Cómo crear filtros en CSS

Desde la llegada de CSS3 tenemos bastantes características nuevas para la web, como bordes redondeados, sombras, degradados, animaciones, etc. Gracias a estas nuevas propiedades, podemos tener un sitio web mucho más amistoso y que genere una mejor interfaz de usuario. CSS3 nos ofrece una serie de características muy interesantes para personalizar nuestro sitio web. Entre ellas, destacan los filtros. Estos nos dan acceso a efectos como el desenfoque o la opacidad de una imagen. En este artículo te guiaré paso a paso en la creación de diversos filtros. Si quieres verlos en funcionamiento, te invito a visitar el demo en GitHub. Es importante mencionar que los filtros CSS ya pueden ser usados; aunque no son totalmente compatibles con todos los navegadores. En la mayoría hay que usar prefijos. Así que te recomiendo siempre consultar antes el soporte.

Sintaxis

Definir un filtro es muy sencillo y aunque todos funcionan diferente, la sintaxis es la misma: [css] .imagen { filter: <filter-function> [<filter-function>]* | none } [/css] Un ejemplo aplicando un filtro a una imagen sería: HTML:

[html] <img class="blur" src="imagen.jpg" /> [/html]

CSS:

[css] .blur { -webkit-filter: grayscale(20%) filter: grayscale(20%); } [/css]

Funcionamiento

Ahora veamos los distintos filtros que tenemos y cómo afectarían una imagen.

Blur

Da un desenfoque gaussiano. El valor define cuántos pixeles en la pantalla se mezclan entre sí. Entre más grande el valor más borroso va a ser.

[css] .imagen { -webkit-filter: blur(2px); filter: blur(2px); } [/css

Brightness

Se aplica un multiplicador lineal a la imagen; dando ese efecto de brillo. Se pueden usar valores porcentuales o numéricos. [css] .imagen { -webkit-filter: brightness(2); /* 2 = 200% */ filter: brightness(2); } [/css]

Contrast

Ajusta el contraste de nuestra imagen dependiendo del valor que le asignemos. [css] .imagen { -webkit-filter: contrast(1.5); /* 1.5 = 150% */ filter: contrast(1.5); } [/css]

Drop-shadow

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. [css] .imagen { -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.9)); filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.9)); } [/css]

Grayscale

Da un efecto de escala de grises. El valor define la proporción de la conversión; mientras más grande sea el valor, más gris va a ser (100% valor máximo). [css] .imagen { -webkit-filter: grayscale(1); /* 1 = 100% */ filter: grayscale(1); } [/css]

Hue-rotate

Se aplica una rotación de matriz en la imagen. El valor define el número de grados alrededor del círculo de color. (360deg. valor máximo ). [css] .imagen { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } [/css]

Invert

Invierte los colores de una imagen. Un valor de 100% sería totalmente invertido. [css] .imagen { -webkit-filter: invert(1); /* 1 = 100% */ filter: invert(1); } [/css]

Opacity

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. [css] .imagen { -webkit-filter: opacity(0.5); /* 0.5 = 50% */ filter: opacity(0.5); } [/css]

Saturate

Aplica saturación a una imagen. [css] .imagen { -webkit-filter: saturate(3); /* 3 = 300% */ filter: saturate(3); } [/css]

Sepia

Convierte una imagen a sepia. Entre más grande el valor, más se va a ver el efecto. [css] .imagen { -webkit-filter: sepia(1); /* 1 = 100% */ filter: sepia(1); } [/css] Como puedes ver, CSS3 nos proporciona una gran variedad de filtros muy interesantes; con ellos podemos lograr varios efectos para nuestras imágenes y así dar un mejor aspecto a nuestro sitio web. Recuerda que en Platzi tenemos el curso de HTML5 y CSS3 donde aprenderás más propiedades CSS3 y todas las herramientas que te pueden ayudar a personalizar tu sitio web y mejorar su interfaz de usuario.