El podcast de CSS (023: Filters)
Supongamos que necesitas compilar un elemento que tenga un efecto de vidrio esmerilado un poco opaco sobre la parte superior de una imagen. El texto debe ser texto activo, no una imagen. ¿Cómo puede hacerlo?
Una combinación de filtros CSS y backdrop-filter nos permite aplicar efectos y desenfocar lo necesario en tiempo real.
El desenfoque y la opacidad son dos de los muchos filtros disponibles, así que veamos rápidamente qué hacen todos y cómo usarlos.
La propiedad filter
Puedes aplicar uno o muchos de los siguientes filtros como valor para filter.
Si aplicas un filtro de forma incorrecta, el resto de los filtros definidos para filter no funcionarán.
blur
De esta manera, se aplica un desenfoque gaussiano y el único argumento que puedes pasar es un radius, que es cuánto desenfoque se aplica.
Debe ser una unidad de longitud, como 10px. No se aceptan los porcentajes.
.my-element {
filter: blur(0.2em);
}
brightness
Para aumentar o disminuir el brillo de un elemento, usa la función de brillo. El valor de brillo se expresa como un porcentaje y la imagen sin cambios se expresa en un valor del 100%. Un valor del 0% convierte la imagen por completo en negro; por lo tanto, los valores entre el 0% y el 100% la hacen menos brillante. Usa valores superiores a 100% para aumentar el brillo.
.my-element {
filter: brightness(80%);
}
contrast
Establece un valor entre 0% y 100% para disminuir o aumentar el contraste, respectivamente.
.my-element {
filter: contrast(160%);
}
grayscale
Puedes aplicar un efecto en escala de grises por completo si usas 1 como valor de grayscale(), o bien 0 para tener un elemento completamente saturado.
También puedes usar valores porcentuales o decimales para aplicar solo un efecto parcial en escala de grises.
Si no pasas argumentos, el elemento estará completamente en escala de grises.
Si pasas un valor superior al 100%, se limitará al 100%.
.my-element {
filter: grayscale(80%);
}
invert
Al igual que grayscale, puedes pasar 1 o 0 a la función invert() para activarla o desactivarla. Cuando está activada, los colores del elemento se invierten por completo.
También puedes usar valores porcentuales o decimales para aplicar solo una inversión parcial de los colores.
Si no pasas ningún argumento a la función invert(), el elemento se invertirá por completo.
.my-element {
filter: invert(1);
}
opacity
El filtro opacity() funciona de la misma manera que la propiedad opacity, en la que puedes pasar un número o porcentaje para aumentar o reducir la opacidad.
Si no pasas argumentos, el elemento se vuelve completamente visible.
.my-element {
filter: opacity(0.3);
}
saturate
El filtro de saturación es muy similar al filtro brightness y acepta el mismo argumento: número o porcentaje.
En lugar de aumentar o disminuir el efecto de brillo, saturate aumenta o disminuye la saturación de color.
.my-element {
filter: saturate(155%);
}
sepia
Puedes agregar un efecto de tono sepia con este filtro que funciona como grayscale().
El tono sepia es una técnica de impresión fotográfica que convierte los tonos negros en tonos marrones para entrar en calor.
Puedes pasar un número o porcentaje como argumento de sepia(), lo que aumenta o disminuye el efecto.
Si no pasas ningún argumento, se agrega un efecto sepia completo (equivalente a sepia(100%)).
.my-element {
filter: sepia(70%);
}
hue-rotate
En la lección de colores, aprendiste que el matiz de hsl hace referencia a una rotación de la rueda de colores y que este filtro funciona de manera similar.
Si pasas un ángulo, como grados o giros, se modifica el matiz de todos los colores del elemento y la parte de la rueda de colores a la que hace referencia. Si no pasas ningún argumento, no pasa nada.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Puedes aplicar una sombra paralela con curvas como lo harías en una herramienta de diseño, como Photoshop con drop-shadow.
Esta sombra se aplica a una máscara alfa que la hace muy útil para agregar una sombra a una imagen recortada.
El filtro drop-shadow toma un parámetro de sombra que contiene valores de offset-x, offset-y, desenfoque y color separados por espacios.
Es casi idéntico a box-shadow, pero no se admiten la palabra clave inset ni el valor de distribución.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Obtén más información sobre los diferentes tipos de sombras en el módulo shadows.
url
El filtro url te permite aplicar un filtro SVG de un elemento o archivo SVG vinculado.
Puedes obtener más información sobre los filtros de SVG aquí.
Filtro de fondo
La propiedad backdrop-filter acepta los mismos valores de funciones de filtro que filter.
La diferencia entre backdrop-filter y filter es que la propiedad backdrop-filter solo aplica los filtros al fondo, en el que la propiedad filter se aplica a todo el elemento.
El ejemplo que aparece al comienzo de esta lección es el ejemplo perfecto, ya que no es conveniente que el texto se difumine, ni tampoco debes agregar elementos HTML adicionales. Poder aplicar filtros solo al fondo permite hacerlo.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre filtros
¿Cuáles de las siguientes son funciones de filtro de CSS?
grayscale()invert()flip()multiply()blur()brightness()¿El CSS puede usar filtros SVG?
url() habilita esta