La propiedad filter es una de las más impresionantes en el apartado gráfico. La constante evolución de HTML5 y CSS3 nos acerca a funciones tan increíbles como esta, que nos permite aplicar efectos “tipo Photoshop” sobre nuestros elementos.
Al día que escribo estas líneas, las últimas versiones de Chrome ya soportan filter, y aunque no sea conveniente aplicarlo todavía en nuestros proyectos profesionales, podemos ir viendo como funciona.
Filter puede tomar en principio 9 valores diferentes: hue-rotate, brightness, contrast, invert, grayscale, sepia, blur, drop-shadow y opacity.
Hue-rotate
Define la rotación de color medida en grados. ¿Habéis visto el selector de color de Photoshop? Pues funciona prácticamente igual. Los valores se definen en grados y comprende valores entre 0 y 359. Lógicamente si le mandamos el valor “360deg” equivaldrá al valor “0deg” por lo que no tiene mucho sentido usar valores fuera del rango.
La forma de usar este filtro es la siguiente:
-webkit-filter: hue-rotate(20deg);
Por ahora usaremos el prefijo -webkit- hasta que aumente su compatibilidad. Como vemos todos los filtros se definen como filter: tipofiltro(valor); , donde el tipo de unidad de valor puede variar.
El valor 0deg equivaldría al color de partida del elemento.
Muchos filtros recuerdan a Photoshop
Brightness
Nos indica el brillo aplicado a nuestro elemento. Al contrario de lo que se afirma en el tutorial Say Hello to CSS3 de Nettuts el rango de brillo va desde el -100% al 100%, siendo 0% la posición de partida, y no el 100% como afirman. El brillo puede aumentarse o disminuirse y por ello puede tomar valores positivos y negativos.
-webkit-filter: brightness(30%);
Contrast
-webkit-filter: contrast(-30%);
Saturate
El filtro saturate indica la saturación de nuestro elemento. Los valores van del 0% en adelante, siendo 100% el valor base. Si usamos valores inferiores al 100% desaturamos nuestro elemento tendiendo a una versión en grises.
-webkit-filter: saturate(1000%);
Invert
Invierte los colores de nuestro elemento. Es porcentual, con valores del 0% al 100%, siendo 0% el valor básico del elemento.
-webkit-filter: invert(78%);
Grayscale y Sepia
Podría decirse que tanto grayscale como sepia son filtros que simplifican efectos que se podrían realizar con los filtros que hemos visto hasta ahora.
Grayscale transforma nuestro elemento a escala de grises con valores del 0% (color) al 100% (totalmente desaturado).
Sepia convierte nuestro elemento a un tono sepia (¡regocijaos adoradores de lo Vintage!). Tiene el mismo rango que grayscale.
-webkit-filter: grayscale(50%); -webkit-filter: sepia(30%);
Como veis el efecto de grayscale se puede lograr con saturate, y sepia con una combinación hue-rotation + brightness y entiendo que no tienen otro sentido que facilitar unos efectos “predefinidos”.
Blur
Desenfoque Gaussiano
Crea un efecto de desenfoque gaussiano. El valor del desenfoque se define en pixeles a partir de 0 que es el valor inicial.
-webkit-filter: blur(12px);
Miedo me da el día que se implemente este filtro en todos los navegadores. Apuesto que muchos front-ends lo usarán con cualquier excusa como el text-shadow.
Opacity y drop-shadow
Estos filtros modifican la opacidad y crean un efecto de sombra paralela de nuestros elementos.
Te preguntarás: Ya existen las propiedades opacity, text-shadow y box-shadow ¿que diferencia hay?.
Esta es una suposición mía en base a lo que he leído: Inicialmente los filtros estaban desarrollados para funcionar sobre el elemento SVG y posteriormente se quiso extender al resto de elementos del DOM. Esto implicó desarrollos paralelos de las propiedades de CSS3.
Además aunque son parecidos, los filtros son mucho más potentes que las propiedades opacity, text-shadow y box-shadow ya que se podrán acelerar por hardware y porque son aplicables a todos los elementos del DOM.
-webkit-filter: opacity(40%); -webkit-filter: drop-shadow(10px 10px 3px rgba(0, 0, 0, 0.6));
Opacity tiene valores comprendidos entre 0 y 100% siendo este último el valor por defecto de todo elemento. Drop-shadow recibe la distancia en “x”, la distancia en “y”, la distancia de difusión y el color.
Las claves de filter
Veamos por último algunas claves y detalles que he descubierto de los filtros:
- Aún sólo funciona en Chrome 18+ y Chrome Canary, pero es un estándar que pertenece al concepto HTML5 y se implantará tarde o temprano.
- Los filtros son aplicables a todos los elementos del DOM, desde Canvas y Video hasta textos y contenedores.
- Los filtros aplicados a un canvas no actúan sobre el contenedor sino sobre los elementos.
- Los filtros aplicados a un video o audio afectan también a los controles del mismo.
- El filtro drop-shadow combina text-shadow y box-shadow y además es aplicable a más elementos del DOM.
- Los filtros permitirán aceleración por hardware.
- Los filtros se pueden animar mediante transitions y animations
- Se pueden aplicar varios filtros simultáneos: -webkit-filter: saturate(20%) blur(2px);
Antonio Navajas
Antonio Navajas es desarrollador front-end, diseñador y formador ocasional. Apasionado por la tecnología, el diseño y en general por la cultura geek, colabora activamente en varios proyectos relacionados con la web, la formación y el diseño.
Follow Me:
