Podcast de CSS - 023: Filtros
Supongamos que necesitas compilar un elemento que tenga un efecto de vidrio esmerilado un poco opaco que se ubica sobre una imagen. El texto debe ser texto en vivo y no una imagen. ¿Cómo puede hacerlo?
Una combinación de filtros CSS y backdrop-filter nos permite aplicar efectos y desenfocar lo que necesitamos en tiempo real.
El desenfoque y la opacidad son dos de los muchos filtros disponibles, así que veamos qué hacen todos y cómo usarlos.
La propiedad filter
Puedes aplicar uno o varios de los siguientes filtros como un valor para filter.
Si aplicas un filtro de forma incorrecta, el resto de los filtros definidos para filter no funcionarán.
blur
Esto aplica un desenfoque gaussiano y el único argumento que puedes pasar es un radius, que es la cantidad de desenfoque que se aplica.
Debe ser una unidad de longitud, como 10px. No se aceptan 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; la imagen sin modificar se expresa como un valor del 100%. Un valor de 0% hace que la imagen se vea completamente negra; por lo tanto, los valores entre 0% y 100% hacen que la imagen sea menos brillante. Usa valores superiores al 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 completamente en escala de grises usando 1 como valor de grayscale(), o 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 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 igual que la propiedad opacity, con la que puedes pasar un número o porcentaje para aumentar o reducir la opacidad.
Si no pasas argumentos, el elemento es 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 marrones para calentarlos.
Puedes pasar un número o un porcentaje como argumento de sepia(), que aumenta o disminuye el efecto.
Si no pasas argumentos, se agrega un efecto sepia completo (equivalente a sepia(100%)).
.my-element {
filter: sepia(70%);
}
hue-rotate
Aprendiste cómo el matiz de hsl hace referencia a una rotación de la rueda de colores en la lección de colores, y este filtro funciona de manera similar.
Si pasas un ángulo, como grados o giros, cambia el tono de todos los colores del elemento y modifica 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 que se abra de forma curva como lo harías en una herramienta de diseño, como Photoshop con drop-shadow.
Esta sombra se aplica a una máscara alfa, lo 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 los 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 extendido.
.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 de sombras.
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 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 la aplica a todo el elemento.
El ejemplo que aparece al comienzo de esta lección es el ejemplo perfecto, ya que no quieres que el texto se desenfoque e idealmente no quieres tener que agregar elementos HTML adicionales. Poder aplicar filtros solo para el fondo te permite hacerlo.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre filtros
¿Cuáles de las siguientes opciones son funciones de filtro de CSS?
grayscale()invert()flip()multiply()blur()brightness()¿CSS puede usar filtros SVG?
url() habilita lo siguiente