Podcast de CSS - 023: Filtros
Supongamos que necesitas crear un elemento que sea un poco opaco efecto de vidrio esmerilado que se ubica sobre la parte superior de una imagen. El texto debe ser texto en vivo y no una imagen. ¿Cómo puede hacerlo?
Una combinación de filtros CSS y el backdrop-filter
nos permiten aplicar efectos y difuminar lo que necesitamos en tiempo real.
El desenfoque y la opacidad son dos de los tantos filtros disponibles
Veamos rápidamente qué hacen
y cómo se usan.
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
cuánto desenfoque 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, haz lo siguiente: 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 que 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 si usas 1
como valor para 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 activarlo o desactivarlo.
Cuando está activado, 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
.
donde 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()
.
lo 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 que el tono de hsl
hace referencia a una rotación de la rueda de colores en el
lección de colores y este filtro funciona de manera similar.
Si pasas un ángulo, como grados o giros,
cambia el matiz de todos los colores del elemento,
cambiar 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 abraza 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, 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
obtén más información sobre los filtros SVG aquí
Filtro de Fondo
El filtro backdrop-filter
acepta todos los mismos valores de función de filtro que filter
.
Diferencia entre backdrop-filter
y filter
es que la propiedad backdrop-filter
solo aplica los filtros al fondo
donde la propiedad filter
la aplica a todo el elemento.
El ejemplo del comienzo de esta lección es el ejemplo perfecto, porque 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()
brightness()
multiply()
flip()
blur()
¿CSS puede usar filtros SVG?