CSS Filters es una muestra de 10 filtros para imágenes que actualmente se pueden aplicar en navegadores modernos, especialmente aquellos basados en webkit.

Si quieres usar alguno de ellos en tu proyecto, sólo tienes que copiar el texto azul del ejemplo y ponerlo dentro de la Clase o selector ID  que desees. Puedes aplicar dichos efectos sobre un <div> ‘contenedor’ o directamente sobre un elemento <img>. Te recomiendo esto último, ya que si tu <div> ‘contenedor’ tiene otros elementos dentro, también se verán afectados por el filtro.

Además, hay que tener en cuenta que este tipo de características suelen consumir bastantes recursos y la experiencia de usuario (UX) podría verse afectada.

Si necesitas filtros más configurables o potentes, puedes investigar librerías como CSSgram. De nuevo, ten en cuenta que este tipo de características tienen poco o nulo soporte en navegadores antiguos, así que selecciona bien el proyecto en que vayas a usarlas.

 

Share:Tweet about this on TwitterShare on FacebookShare on Google+