Vamos a mostrar unos filtros CSS para aplicar los efectos más populares usando únicamente código CSS. Por lo que no va a ser necesario utilizar una herramienta de edición de fotografía como Adobe Photoshop, Gimp…
Portafolio de temas
Esta es la imagen original que vamos a usar para los ejemplos de filtros CSS:
Escala de grises
Da un efecto de escala de grises.
Indicaremos el porcentaje de decoloración.
El valor que hay que aplicar,define la proporción de la conversión; mientras más grande sea el valor, más gris va a ser la imagen (100% valor máximo).
.mi-imagen {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
IR A PORTAFOLIO
Desenfoque
Da un desenfoque gaussiano (es un efecto de suavizado para mapas de bits generado por software de edición gráfica. El efecto es generado por medio de algoritmos matemáticos).
Tendremos que indicar un número de píxeles, proporcional a la intensidad del efecto.
El valor define cuántos pixeles en la pantalla se mezclan entre sí. Cuando más grande el valor más borroso va a ser.
.mi-imagen {
filter: blur(5px);
-webkit-filter: blur(5px);
}
Brillo
Se aplica un multiplicador lineal a la imagen; dando ese efecto de brillo. Se pueden usar valores porcentuales o numéricos.
filter:brightness(200%);
-webkit-filter:brightness(200%);
IR A PORTAFOLIO
Contraste
Aplica el este filtro de contraste a la imagen, hace que destaque un elemento visual en comparación con otro en la misma imagen. También se puede definir como la diferencia entre el tono más negro y el tono más blanco de la imagen.
.mi-imagen {
-webkit-filter: contrast(200%);
filter: contrast(200%);
}
IR A PORTAFOLIO
Sombreado
Aplica un efecto de sombra a la imagen y acepta el parámetro de fondos definido por CSS3. Este filtro es similar a la propiedad box-shadow; la diferencia es que con filtros, algunos navegadores ofrecen la aceleración de hardware para mejorar el rendimiento. Aplica un sombreado como si estuviera colgada esta foto en una pared.
filter:drop-shadow(8px 8px 10px yellow); -webkit-filter:drop-shadow(8px 8px 10px yellow);IR A PORTAFOLIO
Tono rotativo
Se aplica una rotación de matriz en la imagen. Cambia el matiz relativo de un elemento, para su uso por la propiedad de filtro. Acepta una medida de ángulo de grados que representa una rueda de matices. El valor define el número de grados alrededor del círculo de color. (360deg. valor máximo)
.mi-imagen {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
IR A PORTAFOLIO
Inverso
Invierte el color, la saturación y el brillo. Indicaremos el porcentaje de aplicación.
Un valor de 100% sería totalmente invertido.
.mi-imagen {
-webkit-filter: invert(100%);
filter: invert(100%);
}
IR A PORTAFOLIO
Transparencia
Aplica transparencia a una imagen. Este filtro es similar a la propiedad opacity; la diferencia, como lo mencioné anteriormente, es que con los filtros, algunos navegadores ofrecen la aceleración de hardware para mejorar el rendimiento.
filter:opacity(30%);
-webkit-filter:opacity(30%); Saturado
Este es un efecto bastante popular que sirve para incrementar la saturación de color en imágenes subexpuestas. Indicaremos un porcentaje.
.mi-imagen {
-webkit-filter: saturate(8);
filter: saturate(8);
} Sepia
Aquí indicaremos un porcentaje de aplicación del típico efecto “vintage”. .
.mi-imagen {
filter:sepia(100%);
filter:sepia(100%); } Combinación de filtros
Si queremos aplicar más de un filtro de manera simultánea, podemos hacerlo separando los efectos que queramos usar con un espacio
.mi-imagen {
filter:contrast(200%) brightness(150%);
-webkit-filter:contrast(200%) brightness(150%);
}
.mi-imagen {
-webkit-filter: saturate(150%) hue-rotate(45deg) blur(1px);
filter: saturate(150%) hue-rotate(45deg) blur(1px);
}
Como puedes ver, nos proporciona una gran variedad de filtros CSS muy interesantes; con ellos podemos lograr varios efectos para nuestras imágenes y así dar un mejor aspecto a nuestro sitio web.
Si quieres ver más utilidades de HTML5 y CSS3, te recomiendo que eches un vistazo al Antes de subir imágenes, deberás ajustar todas tus imágenes para que tarde menos en cargar tu página web. Dejo una herramienta online que comprime tus imágenes de forma online.
Antes de empezar, hay que tener en cuenta que algunos de estos filtros no son compatibles con todos los navegadores web, aunque se prevé que en futuras versiones de los otros navegadores más usados la compatibilidad con los filtros mejorará. Debajo os dejo una tabla de compatibilidades por cada navegador web.
| Versiones Compatibles |  |  |  |  |  |  |
| filter | 53.0 | 35.0 | 9.1 | 40.0 | 13.0 | |
| -webkit-filter | 18.0 | 6.0 | 15.0 |
Fuente. https://www.nxworld.net/10-css-hamburger-menu-active-effect.html https://lacodigoteca.com/html5-y-css3/10-filtros-css-para-anadir-a-tus-imagenes/#Brillo https://blog.endeos.com/8-filtros-css-para-imagenes-que-todo-disenador-web-deberia-conocer/
