Descripción
La propiedad filter de CSS nos permite aplicar efectos visuales como desenfoque, saturación, brillo o contraste a cualquier elemento HTML. Esta propiedad es especialmente útil para manipular imágenes y crear efectos visuales dinámicos sin necesidad de modificar el archivo original.
Sintaxis
filter : none | <filter-value-list>
Valores
- filter-value-list, representa una lista de uno o más efectos de filtro que se aplicarán al elemento. Estos pueden incluir funciones como
blur(),brightness(),contrast(),grayscale(),hue-rotate(),invert(),opacity(),saturate(),sepia(), odrop-shadow(). - none, valor por defecto que indica que no se aplicará ningún efecto de filtro al elemento,
Ejemplo
Un ejemplo común del uso de la propiedad filter es aplicar un efecto de desenfoque a una imagen cuando el usuario pasa el cursor por encima:
img {
filter: none;
}
img:hover {
filter: blur(3px);
}
En este ejemplo, la imagen se muestra normal por defecto, pero cuando el usuario coloca el cursor sobre ella, se aplica un desenfoque de 3 píxeles.
