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.
