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.SintaxisDefinir un filtro es muy sencillo y aunque todos funcionan diferente, la sintaxis es la misma:.imagen {filter: []* | none}Un ejemplo aplicando un filtro a una imagen sería:HTML:CSS:.blur {-webkit-filter: grayscale(20%)filter: grayscale(20%);}FuncionamientoDa 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..imagen {-webkit-filter: blur(2px);filter: blur(2px);}[/cssBrightnessSe 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);}ContrastAjusta el contraste de nuestra imagen dependiendo del valor que le asignemos..imagen {-webkit-filter: contrast(1.5); /* 1.5 = 150% */filter: contrast(1.5);}Drop-shadowAplica 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..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));}GrayscaleDa 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)..imagen {-webkit-filter: grayscale(1); /* 1 = 100% */filter: grayscale(1);}Hue-rotateSe 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 )..imagen {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}InvertInvierte los colores de una imagen. Un valor de 100% sería totalmente invertido..imagen {-webkit-filter: invert(1); /* 1 = 100% */filter: invert(1);}OpacityAplica 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.SaturateAplica saturación a una imagen..imagen {-webkit-filter: saturate(3); /* 3 = 300% */filter: saturate(3);}SepiaConvierte una imagen a sepia. Entre más grande el valor, más se va a ver el efecto..imagen {-webkit-filter: sepia(1); /* 1 = 100% */filter: sepia(1);}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.