Con los filtros CSS podrás aplicar varios efectos visuales a elementos, normalmente imágenes, aunque también los podrás usar para fondos, bordes…
Contenidos
Propiedades generales de los filtros CSS
La propiedad se define de la siguiente forma:
img {
filter: grayscale(100%);
}Podrás utilizar las siguientes funciones:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()– para aplicar sobre SVGcustom()
Puedes ver en este estás imágenes de la guitarra ir modificando los diferentes filtros:
See the Pen
Play with Individual CSS filters by Chris Coyier (@chriscoyier)
on CodePen.
¿Cómo se eliminan los filtros existentes?
Con el siguiente código:
img {
filter: none;
}
¿Cómo se añaden varios filtros a la vez?
Simplemente tienes que indicar los diferentes valores que quieres. Ahí te va un ejemplo:
.img {
filter: blur(3px) grayscale(20%);
}
Definir la función de la propiedad del filtro
La mayoría tienen valores entre el 0 y el 100%, y si quieres también los puedes definir en valor decimal entre 0 y 1, por ejemplo: 0.3. Pero hay algunos valores que se indican en px como blur u otros formatos distintos.
Generadores de filtros CSS
Si no quieres complicarte escribiendo estilos, tienes una opción rápida para generar estos filtros CSS y es mediante generadores. A continuación te indico varias páginas desde donde podrás generar el código que necesitas en un par de clics.
Filter CSS Generator
Escoge sobre la imagen de muestra las diferentes opciones de filtro que deseas aplicar. Según las opciones escogidas se genera un código que solo tendrás que copiar y pegar donde estén el resto de estilos CSS.
Just Code
De funcionamiento similar al anterior, podrás conseguir un código rápido y eficaz.
Angry Tools
Lo bueno de esta herramienta online es que no sólo te servirá para configurar filtros CSS sino otras muchas otras propiedades CSS como la sombra, degradado, animaciones…
CSS Filters
Si estás buscando una herramienta online que te genere los estilos de filtros CSS a partir de la imagen que tu quieras, aquí la tienes. Podrás subir una imagen e irle aplicando los distintos filtros.
Otras herramientas de filtros CSS
CSS Filters Editor
Es una extensión de Chrome que podrás instalar en ese navegador. Podrás modificar los valores de los filtros de una imagen.
Y hasta aquí todo lo relativo a filtros CSS, si quieres comentar algo acerca de este tema solo tienes que dejar tu comentario más abajo.
