En los dos últimos tutoriales de esta serie, hemos discutido como los filtros y los modos de mezcla pueden cambiar por completo la apariencia de las imágenes. En este tutorial, voy a cubrir los fundamentos de edición de imágenes usando las dos propiedades juntas.
Los conceptos básicos
Cualquier edición de imagen no primitiva requiere más que solo un sólo elemento. Esto se puede lograr con pseudo elementos. Por desgracia, hay una compilación más. El elemento img viene a reemplazar elementos. Como resultado :before y :after no funcionarán con las etiquetas de imagen. Para resolver este problema, necesitamos envolver nuestra imagen y la etiqueta figure parece ser la mejor candidata en este caso. Por lo tanto, nuestro marcado debería de parecerse a esto:
<figure> <img src="image-url"> </figure>
Todos los efectos de edición que crearemos tendrán algo de CSS en común.
figure {
position: relative;
}
figure:before,
figure:after {
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
He utilizados los pseudo elementos :before y :after para que pueda aplicar varios modos de mezcla. Note que he ajustado la width y la height a 100% para cubrir la figure apropiadamente y he ajustado la posición a absolute para la alineación perfecta.
En la mayoría de los casos, aplicaremos los filtros de imágenes y, también, usaremos los modos de mezcla y otros efectos sobre los pseudo elementos. La imagen debajo es la imagen original que estaremos editando.
Imágenes en Escala de Grises con Alto Contraste
Para crear imágenes con alto contraste, usted solo puede ajustar el contraste a un valor más alto, pero incrementar el brillo hacer que el efecto se más dramático. Si solamente fuera a utilizar filtros, entonces eso es todo lo que podría hacer. Sin embargo, con los modos de mezcla usted también puede añadir una inset box-shadow [sombra paralela interna] con el modo de mezcla overlay sobre la imagen para obtener los mejores resultados. Aquí está la línea de código CSS para este efecto:
img {
filter: contrast(1.8) brightness(1.5) grayscale(1);
}
figure:before {
z-index: 3;
mix-blend-mode: overlay;
box-shadow: 0 0 200px black inset;
}
Añadiendo un indice z: z-index, para mantener nuestros pseudo elementos encima de la imagen. He utilizado el modo de mezcla overlay para mantener la imagen ligeramente oscura después de la aplicación del efecto box-shadow.
Trate de mover el cursor sobre la imagen para ver la diferencia entre filtros y un combo de filtros y modos de mezcla.
Para practicar, puede probar con diferentes valores para la propiedad box-shadow en la muestra CodePen.
De a las imágenes una apariencia antigua
El color, en la mayoría de las fotos viejas, por lo general, desaparece y tienen un revestimiento externo de color marrón rojizo. Para recrear el mismo efecto, tendremos que usar más elementos y filtros. Aquí está nuestro CSS:
img {
filter: saturate(0.6);
}
figure {
filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);
}
figure:before {
z-index: 2;
mix-blend-mode: multiply;
box-shadow: 0 0 250px brown inset;
background: rgba(125, 100, 0, 0.3);
}
figure:after {
z-index: 3;
mix-blend-mode: hard-light;
box-shadow: 0 0 150px pink inset;
background: rgba(198, 155, 0, 0.3);
}
Esta vez, he aplicado filtros tanto a la imagen así como también a la figura. Básicamente, queremos que la imagen sea menos colorida. Esto se logra usando el filtro saturate con un valor más bajo que 1. La figura con los filtro aplicados después de todos los modos de mezcla. Si no aplica estos filtros, el resultado final tendrá tonos más notables de marrón, lo cual es indeseable.
Debería de observar que también he aplicado un fondo rojizo semitransparente a los dos pseudo elementos. Esto da a la imagen una apariencia marrón rojizo. El efecto box-shadow es utilizado para mantener el contorno comparativamente más marrón.
Debería experimentar con varias propiedades en la demostración para ver si puede conseguir mejores resultados.
Añadiendo un Tono Específico.
Esta vez trataremos de darle a nuestra imagen un tono azul. Comparado con los colores cálidos, agregar un tono de color frío como azul hace que la imagen sea más atractiva para nuestros ojos.
Este es el CSS que necesitamos aplicar:
img {
filter: brightness(1.1) contrast(1.3);
}
figure:before {
z-index: 2;
mix-blend-mode: multiply;
box-shadow: 0 0 100px rgba(100, 150, 200, 1) inset, 0 0 300px rgba(100, 150, 200, 1) inset;
}
figure:after {
z-index: 3;
mix-blend-mode: difference;
background: rgba(0, 0, 255, 0.3);
}
Comencé a incrementar el brillo y el contraste de nuestra imagen. Esto garantizará que nuestra imagen no perdió menos colores importantes ni tampoco se volvió demasiado opaca durante la edición.
Por lo general, usted tiene que usar múltiples efectos box-shadows con colores claros para notar los cambios. Por esa razón añadí dos box-shadows azulados a nuestra imagen. Con solo usar un box-shadow, reduce el tono azul a los límites de nuestra imagen. Para esparcir el color azul sobre toda nuestra imagen, la he usado como fondo sobre el pseudo elemento :after. Aquí está el resultado final de todos estos filtros:
Trate de añadir un tono verde o rojo a la imagen en la demostración.
Neblina amarillenta
¿Alguna vez ha sido testigo de una tarde ligeramente nublada con partículas de arena suspendida en la atmósfera debido al viendo? En esas condiciones de clima. todo tiene un tono amarillento, y los objetos parecen ser un poco opacos. Para recrear el mismo efecto, necesitamos los siguiente CSS:
img {
filter: saturate(0.2);
}
figure {
filter: contrast(1.8) brightness(1.1) saturate(1.5);
}
figure:before {
z-index: 2;
mix-blend-mode: multiply;
box-shadow: 0 0 100px rgba(0,0,0,0.5) inset;
background: rgba(125, 100, 0, 0.3);
}
figure:after {
z-index: 3;
mix-blend-mode: hard-light;
box-shadow: 0 0 500px rgba(0,0,0,0.6) inset;
background: rgba(198, 155, 0, 0.3);
}
Lo primero que hice fue reducir la saturación de la imagen. Ambos pseudo elementos :before y :after tienen fondos amarillentos translúcidos para añadir el tono deseado. Usando el modo de mezcla hard-light sobre el pseudo elemento :after hace la neblina más prominente.
El efecto box-shadow sobre los pseudo elementos incrementa el enfoque sobre el motociclista. Finalmente, aplicando los filtros alto contrast, brightness y saturation a nuestro elemento figure refuerza la neblina.
En la demostración, usted puede probar con diferentes valores de varias propiedades para ver como afectan el resultado final.
Reflexión final
No es tan difícil editar las imágenes en CSS. Si tiene en mente los puntos que he abordado en este tutorial, será capaz de crear algunos filtros asombrosos por su cuenta.
Para practicar, puede experimentar con las demostraciones que están en este tutorial o trate de recrear los filtros populares de Instagram. También puede revisar una variedad de animaciones y efectos disponibles en Envato Marketplace en caso de que necesita algún filtro listo para utilizar.
