Efectos fotográficos con CSS3

Si no saben manejar Photoshop o cualquier otro editor gráfico y desean dar efectos a las imágenes para sus sitios webs, pueden aplicar filtros a imágenes con CSS3 sin tener que hacer nada en la imagen que quieren usar. Simplemente con una sola línea de código CSS pueden aplicar sus efectos a las imágenes, sin saber diseño gráfico, sin saber programar, sin saber lo que es una variable (por Dios, no caigan tan bajo).

¿Conocen estas páginas o aplicaciones en las que el usuario sube una imagen, selecciona qué efectos quiere aplicarle y después se muestra el resultado de la imagen inicial pero transoformada? Pues algo similiar pueden lograr con estos efectos. En los siguientes ejemplos verán la imagen original sin ningún efecto aplicado y a continuación cómo quedaría esa imagen tras aplicarle el efecto fotográfico con CSS.

Efecto Desenfoque

Código :

<figure id="desenfoque">
   <img src="imagen.jpg" class="blur" alt="">
</figure>

Código :

-webkit-filter: blur(Npx);

figure .blur{
  -webkit-filter: blur(1.3px);
}

Recomiendo usar cantidades de píxeles no superiores a 4, ya que el efecto resultante es tal que puede desconcertar al usuario al no quedar absolutamente nada claro qué es lo que hay en esa zona de la página en la que nosotros queremos que haya una imagen distorsionada. Pero eso lo sabes tú, el resto verá un borrón y no entenderá que ocurre, por eso si quieres usar diferentes grados de desenfoque en cantidades entre 0 y 4 puedes valerte de decimales.

Efecto Brillo

Código :

<figure id="brillo">
   <img src="imagen.jpg" class="brightness" alt="">
</figure>

Código :

-webkit-filter: brightness(N);

figure .brightness{
  -webkit-filter: brightness(1.5);
}

Recomiendo usar cantidades no superiores a 3 por la misma razón que en el caso anterior.

Efecto Contraste

Código :

<figure id="contraste">
   <img src="imagen.jpg" class="contrast" alt="">
</figure>

Código :

-webkit-filter: contrast(N);

figure .contrast{
  -webkit-filter: contrast(1.3);
}

En este caso, no hay un límite recomendado, ya que en cantidades elevadas a efectos visuales no hay diferencia entre ponerle un contrast(20) que un contrast(500), así que la cantidad que le indiques depende de lo que quieras lograr.

Efecto Escala de Grises

Código :

<figure id="escala_grises">
   <img src="imagen.jpg" class="grayscale" alt="">
</figure>

Código :

-webkit-filter: grayscale(N%);

figure .grayscale{
  -webkit-filter: grayscale(70%);
}

Al aplicar un 100% volvemos la imagen a blanco y negro de forma absoluta en escala de grises, así que de nuevo en este efecto el porcentaje que se tenga que aplicar es en función del objetivo que se desea.

Efecto Rotación de Color

Código :

<figure id="rota_color">
   <img src="imagen.jpg" class="huerotate" alt="">
</figure>

Código :

-webkit-filter: hue-rotate(Ndeg);

figure .huerotate{
  -webkit-filter: hue-rotate(90deg);
}

Este efecto es muy interesante y para entenderlo hay que observar la rueda de color de la imagen de abajo. La explicación es la siguiente: observen como ejemplo el color rojo del símbolo de la taza de HTML5, y vean dónde se encuentra ese rojo en la rueda de color. Tras aplicarle una rotación de color de 90 grados, ésta rotación siempre se hará hacia la derecha, es decir, en el sentido opuesto a las agujas del reloj. 90 grados a la derecha en esa dirección en la rueda de color nos lleva al verde señalado. Pues bien, es ése verde el que sustituye el rojo inicial, y esa misma transformación se hace con el resto de colores.

Si le aplicáramos una rotación de 180 grados, la imagen tendría los opuestos en la rueda de color.

Efecto Inversión

Código :

<figure id="inversion">
   <img src="imagen.jpg" class="invert" alt="">
</figure>

Código :

-webkit-filter: invert(N%);

figure .invert{
  -webkit-filter: invert(80%);
}

Al aplicar un 100% logramos una inversión total en los colores (no confundir con la rotación de color del efecto anterior).

Efecto Opacidad

Código :

<figure id="opacidad">
   <img src="imagen.jpg" class="opacity" alt="">
</figure>

Código :

-webkit-filter: opacity(N%);

figure .opacity{
  -webkit-filter: opacity(30%);
}

Este efecto que también se puede usar con CSS con "opacity: 0.3;" puede utilizarse como filter usando porcentajes, con la misma lógica que con opacity, es decir, un 0% sería totalmente transparente y un 100% no tendría transparencia alguna.

Efecto Saturación

Código :

<figure id="saturacion">
   <img src="imagen.jpg" class="saturate" alt="">
</figure>

Código :

-webkit-filter: saturate(N);

figure .saturate{
  -webkit-filter: saturate(7);
}

La saturación de una imagen es un efecto básico que debe usarse con cuidado. En este ejemplo se usa una saturación de 7, si se usaran saturaciones más elevadas la imagen comenzaría a pixelarse notoriamente, y quizás el resultado se aleje de nuestro gusto.

Efecto Sepia

Código :

<figure id="sepia">
   <img src="imagen.jpg" class="sepia" alt="">
</figure>

Código :

-webkit-filter: sepia(N%);

figure .sepia{
  -webkit-filter: sepia(80%);
}

Este efecto es uno de los que más reclamo tiene, incluso muchas cámaras fotográficas lo tienen incluido en el modo de toma de imágenes. El funcionamiento es igual que la escala de grises, pero aplicándole el toque sepia, es decir un 100% sería totalmente con escala de sepia y un 0% sería la imagen original.

Combinaciones de efectos fotográficos con CSS3

Todos estos efectos pueden combinarse, pero recuerden que esta combinación ha de hacerse en una sola línea de código, es decir si quieren aplicarle a una imagen escala de grises y desenfoque, no funcionará si escriben:

Código :

/* INCORRECTO */
figure .combinacion{
  -webkit-filter: grayscale(80%);
  -webkit-filter: blur(2px);
}

En tales casos, sólo se aplicaría el último efecto listado, es decir, el desenfoque. Por eso el modo correcto es el siguiente:

Código :

/* CORRECTO */
figure .combinacion{
  -webkit-filter: grayscale(80%)  blur(2px);
}

Se deben poner todos consecutivamente sin necesidad de separarlos por comas. Pero recuerden que según como hagan las combinaciones unos efectos pueden anular a otros, es decir si por ejemplo, usan una rotación de color y después le aplican un filter sepia al 100%, lógicamente, no habrá colorido aunque hayamos hecho el efecto de rotación de color.

Efectos de color en videos

Algo muy interesante de estos efectos es que igualmente pueden aplicarse a videos, y también combinarse unos con otros. El código sería el siguiente:

Código :

<video controls width="570" height="321" class="video-filter" id="video">
   <source src="video.mp4" video/mp4; codecs="avc.h264,avc.42E01E,mp4a.40.2"/>
</video>

Código :

.video-filter{
     -webkit-filter: saturate(6) brightness(0.5);
}

En este caso a un video le hemos aplicado una saturación algo elevada y un leve aumento del brillo.

Consejos de uso de filtros

Como conclusión recuerden que el uso de estos efectos debe hacerse de forma coherente y por supuesto en la medida justa, sin abusar. Si se emplean con habilidad pueden ser muy efectivos y útiles para la navegación de usuario.

Por ejemplo, si alguna sección de su sitio web tiene diferentes partes, cada una representada por alguna imagen o logo, para saber cuál de todas las partes es la que el usuario está viendo pueden valerse de tales efectos. Las imágenes que representen las partes que el usuario no está viendo podrían quedarse desenfocadas y en blanco y negro, y la imagen de la zona visible en ese momento en color y resaltada quizás con algo de contraste. Esto mismo puede emplearse en el evento :hover. Aquí tienen un ejemplo:

Código :

<figure id="combinado">
   <img src="imagen.jpg" class="combinaciones" alt="">
</figure>

Código :

figure .combinaciones{
  -webkit-filter: blur(2px) grayscale(100%);
  -webkit-transition: all 0.4s ease;
}
figure .combinaciones:hover{
  -webkit-filter: blur(0px) grayscale(0%) contrast(4);
  border-radius: 50%;
  border: 8px solid green;
}

En este caso al posar el rato en la imagen se le quita el desenfoque, también se le quita el escalado de grises y por último se le aplica un contraste y se adorna con un borde redondeado del 50% convirtiendo la imagen en un círculo, si sus dimensiones son cuadradas.

Así que recuerden hacer un uso moderado de estos efectos, emplearlos teniendo en cuenta qué efecto y sensaciones provocará en el usuario.Con habilidad y buen gusto seguro que hará más cool el resultado.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.