Muchas veces nos complicamos la vida editando imágenes en photoshop para efectos sencillos que podemos hacer directamente con CSS por código en nuestra web, con la ventaja de poder modificarlo directamente al interactuar con la foto u otros elementos de la página.
El desenfoque o blur, es uno de esos efectos fácilmente aplicable con CSS y que da mucho juego a la hora de utilizar fotografías en nuestra web.
En este ejemplo, aplicamos un desenfoque de 3px y lo quitamos con la propiedad :hover de CSS al pasar por encima de la foto.
.ejemploblur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.ejemploblur:hover {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
Escala de grises:
Otro efecto muy utilizado es el de quitar los colores a una foto y usarla en escala de grises.
Lo que más me gusta de hacerlo por código, es poder darle un % intermedio, ni 0% ni 100% y así darle un efecto que me encanta:
.grayscale {
-webkit-filter: grayscale(60%);
-moz-filter: grayscale(60%);
-o-filter: grayscale(60%);
-ms-filter: grayscale(60%);
filter: grayscale(60%);
}
Sepia:
Otro efecto que puede dar mucho juego es el sepia, que funciona por porcentaje igual que el de escala de grises:
.sepia {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
}
¿Conoces algún otro efecto fotográfico que podamos aplicar fácilmente con CSS?
