Como se crean los filtros CSS

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…

 

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 SVG
• custom()

 

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.