Filtros

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

Navegadores compatibles

  • Chrome: 53.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 9.1

Origen

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

Navegadores compatibles

  • Chrome: 18.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 6.

Origen

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

Navegadores compatibles

  • Chrome: 18.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 6.

Origen

Establece un valor entre 0% y 100% para disminuir o aumentar el contraste, respectivamente.

.my-element {
    filter: contrast(160%);
}

grayscale

Navegadores compatibles

  • Chrome: 18.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 6.

Origen

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

Navegadores compatibles

  • Chrome: 18.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 6.

Origen

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

Navegadores compatibles

  • Chrome: 18.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 6.

Origen

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

Navegadores compatibles

  • Chrome: 18.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 6.

Origen

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

Navegadores compatibles

  • Chrome: 18.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 6.

Origen

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

Navegadores compatibles

  • Chrome: 18.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 6.

Origen

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

Navegadores compatibles

  • Chrome: 18.
  • Límite: 12.
  • Firefox: 35.
  • Safari: 6.

Origen

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

Navegadores compatibles

  • Chrome: 5.
  • Límite: 12.
  • Firefox: 3.
  • Safari: 6.

Origen

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

Navegadores compatibles

  • Chrome: 76
  • Borde: 79.
  • Firefox: 103.
  • Safari: 18.

Origen

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()
🎉
flip()
Vuelve a intentarlo.
multiply()
Vuelve a intentarlo.
blur()
🎉
brightness()
🎉

¿CSS puede usar filtros SVG?

Sí
La función de filtro url() habilita lo siguiente
No
Vuelve a intentarlo.