El filtrado en CSS es una característica poderosa que permite a los desarrolladores aplicar efectos visuales a las imágenes, fondos y bordes. Estos incluyen efectos de desenfoque, brillo, contraste, saturación, entre otros.
Aquí es cómo puedes usarlo:
1. Propiedad CSS de filtro:
Para utilizar el filtrado en CSS, debes aplicar la propiedad CSS `filter` a cualquier elemento HTML en tu hoja de estilo.
```css
img {
filter: blur(5px);
}
```
En este ejemplo, la imagen se desenfocará gracias al valor de filtro `blur(5px)`.
2. Aplicar múltiples filtros
Puedes aplicar múltiples filtros a un elemento a la vez, separándolos con espacios.
```css
img {
filter: grayscale(100%) blur(5px);
}
```
En este ejemplo, la imagen se convertirá en una imagen de grises y también se desenfocará.
3. Usar porcentajes
Algunos filtros también permiten utilizar porcentajes en lugar de valores de píxeles.
```css
div {
filter: sepia(70%);
}
```
Este ejemplo aplica un 70% de efecto sepia a un div.
Aquí están algunas de las funciones de filtro que puedes usar:
- blur(): para desenfocar la imagen.
- brightness(): para cambiar el brillo de la imagen.
- contrast(): para ajustar el contraste de la imagen.
- drop-shadow(): para aplicar una sombra a la imagen.
- grayscale(): para convertir la imagen a escala de grises.
- hue-rotate(): para rotar los colores de la imagen a lo largo del círculo cromático.
- invert(): para invertir los colores de la imagen.
- opacity(): para cambiar la opacidad de la imagen.
- saturate(): para saturar los colores de la imagen.
- sepia(): para aplicar un efecto sepia a la imagen.
Recuerda que el soporte del navegador para la propiedad de filtro es bastante bueno, pero siempre debes comprobar la compatibilidad del navegador antes de usar cualquier característica de CSS.
