CSS: La Guía Definitiva, 5ª Edición

Capítulo 20. Filtros, mezclas, recortes y máscaras

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Varias propiedades especiales permiten a los autores alterar la apariencia de los elementos con filtros visuales, especificar distintas formas de mezclar visualmente los elementos con lo que haya detrás de ellos, y alterar la presentación de los elementos mostrando partes y ocultando otras. Aunque puedan parecer conceptos dispares, todos tienen algo en común: permiten alterar los elementos de formas que antes eran difíciles o imposibles.

Filtros CSS

CSS proporciona una forma de aplicar efectos de filtro visual incorporados, así como filtros personalizados definidos en la página o en archivos externos, a los elementos mediante la propiedad filter.

filtro

Valores	[ none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url() ]#
Valor inicial	none
Se aplica a	Todos los elementos (en SVG, se aplica a todos los elementos gráficos y a todos los elementos contenedores excepto al elemento <defs> )
Valor calculado	Según lo declarado
Heredado	No
Animable	Sí

La sintaxis del valor permite una lista separada por espacios de funciones de filtro, aplicándose cada filtro en secuencia. Así, dada la declaración filter: opacity(0.5) blur(1px);, se aplica la opacidad al elemento, y luego se difumina el resultado semitransparente. Si se ...