Los filtros CSS son una herramienta poderosa que los autores pueden usar para lograr diferentes efectos visuales (algo así como los filtros de Photoshop para el navegador). La filterpropiedad CSS proporciona acceso a efectos como desenfoque o cambio de color en la representación de un elemento antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de una imagen, un fondo o un borde.
La sintaxis es:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Hay una serie de funciones para usar para el valor:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- para aplicar filtros SVGcustom()- "próximamente"
Se pueden utilizar múltiples funciones, separadas por espacios.
.do-more-things ( filter: blur(20px) grayscale(20%); )Funciones de filtro
Para utilizar la propiedad de filtro CSS, especifique un valor para una de las siguientes funciones enumeradas anteriormente. Si el valor no es válido, la función devuelve "ninguno". Excepto donde se indique, las funciones que toman un valor expresado con un signo de porcentaje (como en 34%) también aceptan el valor expresado como decimal (como en 0.34).
Aquí hay una demostración que te permite jugar un poco con filtros individuales:
escala de grises ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Convierte la imagen de entrada a escala de grises. El valor de "monto" define la proporción de la conversión. Un valor del 100% es completamente en escala de grises. Un valor de 0% deja la entrada sin cambios. Los valores entre 0% y 100% son multiplicadores lineales del efecto. Si falta el parámetro "cantidad", se utiliza un valor del 100%. No se permiten valores negativos.
sepia()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Convierte la imagen de entrada a sepia. El valor de "monto" define la proporción de la conversión. Un valor del 100% es completamente sepia. Un valor de 0 deja la entrada sin cambios. Los valores entre 0% y 100% son multiplicadores lineales del efecto. Si falta el parámetro "cantidad", se utiliza un valor del 100%. No se permiten valores negativos.
saturar()
filter: saturate(2); /* same as… */ filter: sature(200%);Satura la imagen de entrada. El valor de "monto" define la proporción de la conversión. Un valor de 0% está completamente insaturado. Un valor del 100% deja la entrada sin cambios. Otros valores son multiplicadores lineales del efecto. Se permiten valores superiores al 100%, proporcionando resultados sobresaturados. Si falta el parámetro "cantidad", se utiliza un valor del 100%. No se permiten valores negativos.
tono-rotar ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Aplica una rotación de tono en la imagen de entrada. El valor de "ángulo" define el número de grados alrededor del círculo de color que se ajustarán las muestras de entrada. Un valor de 0deg deja la entrada sin cambios. Si falta el parámetro "ángulo", 0degse utiliza un valor de . El valor máximo es 360deg.
invertir()
filter: invert(100%);Invierte las muestras en la imagen de entrada. El valor de "monto" define la proporción de la conversión. Un valor del 100% está completamente invertido. Un valor de 0% deja la entrada sin cambios. Los valores entre 0% y 100% son multiplicadores lineales del efecto. Si falta el parámetro "cantidad", se utiliza un valor del 100%. No se permiten valores negativos.
opacidad()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Aplica transparencia a las muestras en la imagen de entrada. El valor de "monto" define la proporción de la conversión. Un valor del 0% es completamente transparente. Un valor del 100% deja la entrada sin cambios. Los valores entre 0% y 100% son multiplicadores lineales del efecto. Esto equivale a multiplicar las muestras de imágenes de entrada por la cantidad. Si falta el parámetro "cantidad", se utiliza un valor del 100%. Esta función es similar a la propiedad de opacidad más establecida; la diferencia es que con los filtros, algunos navegadores proporcionan aceleración de hardware para un mejor rendimiento. No se permiten valores negativos.
brillo()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Aplica un multiplicador lineal a la imagen de entrada, haciendo que parezca más o menos brillante. Un valor de 0% creará una imagen completamente negra. Un valor del 100% deja la entrada sin cambios. Otros valores son multiplicadores lineales del efecto. Se permiten valores superiores al 100%, lo que proporciona resultados más brillantes. Si falta el parámetro "cantidad", se utiliza un valor del 100%.
contraste()
filter: contrast(4); /* same as… */ filter: contrast(400%);Ajusta el contraste de la entrada. Un valor de 0% creará una imagen completamente negra. Un valor del 100% deja la entrada sin cambios. Se permiten valores superiores al 100%, proporcionando resultados con menos contraste. Si falta el parámetro "cantidad", se utiliza un valor del 100%.
difuminar()
filter: blur(5px); filter: blur(1rem);Aplica un desenfoque gaussiano a la imagen de entrada. El valor de 'radio' define el valor de la desviación estándar de la función gaussiana, o cuántos píxeles en la pantalla se mezclan entre sí, por lo que un valor mayor creará más desenfoque. Si no se proporciona ningún parámetro, se utiliza un valor 0. El parámetro se especifica como una longitud CSS, pero no acepta valores porcentuales.
sombra paralela ()
filter: drop-shadow((2,3) ?)Aplica un efecto de sombra paralela a la imagen de entrada. Una sombra paralela es efectivamente una versión borrosa y compensada de la máscara alfa de la imagen de entrada dibujada en un color particular, compuesta debajo de la imagen. La función acepta un parámetro de tipo (definido en CSS3 Backgrounds), con la excepción de que no se permite la palabra clave 'inset'.
Esta función es similar a la propiedad box-shadow más establecida; la diferencia es que con los filtros, algunos navegadores proporcionan aceleración de hardware para un mejor rendimiento.
La sombra paralela también imita el contorno de los objetos deseados de forma natural, a diferencia de lo box-shadowque trata solo el cuadro como su ruta.
Al igual que con text-shadow, no hay un parámetro de 'extensión' para crear una sombra sólida más grande que el objeto.
url ()
filter: url()La url()función toma la ubicación de un archivo XML que especifica un filtro SVG y puede incluir un ancla a un elemento de filtro específico. Aquí hay un tutorial que funciona como una buena introducción a los filtros SVG con una demostración divertida.
Filtros de animación
Dado que los filtros son animables, puede abrir las puertas para un montón de diversión.
Notas
Puede combinar cualquier número de funciones para manipular el renderizado, pero el orden sigue siendo importante (es decir, usar grayscale()after sepia()resultará en una salida completamente gris).
Un valor calculado distinto de "ninguno" da como resultado la creación de un contexto de apilamiento de la misma manera que lo hace la opacidad de CSS. La propiedad de filtro no tiene ningún efecto sobre la geometría del modelo de caja del elemento de destino, aunque los filtros pueden causar pintura fuera de la caja de borde de un elemento. Cualquier parte del elemento de destino se ve afectada por las funciones de filtro. Esto incluye cualquier contenido, fondo, bordes, decoración de texto, contorno y mecanismo de desplazamiento visible del elemento al que se aplica el filtro y los de sus descendientes. Los filtros también se pueden aplicar al contenido en línea, como por ejemplo, intervalos de texto individuales.
La especificación también introduce una filter(image-URL, filter-functions)función de envoltura para una imagen. Le permitiría filtrar cualquier imagen en el momento en que la use dentro de CSS. Por ejemplo, puede difuminar una imagen de fondo sin difuminar el texto. Esta función de filtro aún no es compatible con los navegadores. Mientras tanto, puede aplicar tanto el fondo como el filtro a un pseudoelemento para crear un efecto similar.
El material del filtro propietario de IE
También usé la filterpropiedad, como:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Se usa principalmente para opacidad cuando necesita admitir IE 8 y versiones anteriores.
Más información
- Especificación de efectos de filtro W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galería de filtros de Bennett Feely
- Documentos de MDN
- Puedo usar
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Comprensión de los efectos de filtro CSS
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 18 * | 35 | No | 79 | 6 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6.0-6.1 * |