Definición de .filter utilizado en CSS
Los filtros CSS son una herramienta poderosa que los autores pueden usar para lograr efectos visuales variables (algo así como Photoshop .filters para el navegador). La propiedad CSS .filter 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 usan comúnmente para ajustar la representación de una imagen, un fondo o un borde.
Ejemplo de empleo de la propiedad filter
Esta propiedad de CSS normalmente se emplea de la siguiente manera:
.filter-me {
filter: blur(3px);
filter: grayscale(1);
filter: saturate(2.2);
filter: none; /* remove existing filter */
}Otro ejemplo más avanzado de .filter es el siguiente de CODEPEN:
Sintaxis de .filter en CSS
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();Valores
| Filtrar | Descripción | Manifestación |
|---|---|---|
| ninguna | Valor por defecto. No especifica efectos | |
| desenfoque ( px ) | Aplica un efecto de desenfoque a la imagen. Un valor mayor creará más desenfoque. Si no se especifica ningún valor, se utiliza 0. | |
| brillo ( % ) | Ajusta el brillo de la imagen. 0% hará que la imagen sea completamente negra. 100% (1) es el valor predeterminado y representa la imagen original. Los valores superiores al 100 % proporcionarán resultados más brillantes. | |
| contraste ( % ) | Ajusta el contraste de la imagen. 0% hará que la imagen sea completamente negra. 100% (1) es el valor predeterminado y representa la imagen original. Valores superiores al 100% proporcionarán resultados con más contraste. | |
| sombra paralela ( h-sombra v-sombra desenfoque esparcir color ) | Aplica un efecto de sombra a la imagen. Valores posibles: h-sombra – Obligatorio. Especifica un valor de píxel para la sombra horizontal. Los valores negativos colocan la sombra a la izquierda de la imagen. v-sombra – Obligatorio. Especifica un valor de píxel para la sombra vertical. Los valores negativos colocan la sombra sobre la imagen. desenfoque – Opcional. Este es el tercer valor y debe estar en píxeles. Añade un efecto de desenfoque a la sombra. Un valor mayor creará más desenfoque (la sombra se vuelve más grande y más clara). No se permiten valores negativos. Si no se especifica ningún valor, se utiliza 0 (el borde de la sombra es nítido). propagación – Opcional. Este es el cuarto valor y debe estar en píxeles. Los valores positivos harán que la sombra se expanda y crezca, y los valores negativos harán que la sombra se reduzca. Si no se especifica, será 0 (la sombra tendrá el mismo tamaño que el elemento). Nota: Chrome, Safari y Opera, y quizás otros navegadores, no son compatibles con esta cuarta longitud; no se procesará si se agrega. color – Opcional. Añade un color a la sombra. Si no se especifica, el color depende del navegador (a menudo negro). Un ejemplo de creación de una sombra roja, que tiene un tamaño de 8 px tanto horizontal como verticalmente, con un efecto de desenfoque de 10 px: filtro: sombra paralela (8px 8px 10px rojo); Sugerencia: este filtro es similar a la propiedad. | |
| escala de grises ( % ) | Convierte la imagen a escala de grises. 0% (0) es el valor predeterminado y representa la imagen original. 100% hará que la imagen sea completamente gris (utilizado para imágenes en blanco y negro). Nota: No se permiten valores negativos. | |
| rotación de matiz ( grados ) | Aplica una rotación de tono en la imagen. El valor define el número de grados alrededor del círculo de color que se ajustarán las muestras de imagen. 0deg es el valor predeterminado y representa la imagen original. Nota: El valor máximo es 360 grados. | |
| invertir( % ) | Invierte las muestras en la imagen. 0% (0) es el valor predeterminado y representa la imagen original. 100% hará que la imagen se invierta por completo. Nota: No se permiten valores negativos. | |
| opacidad ( % ) | Establece el nivel de opacidad de la imagen. El nivel de opacidad describe el nivel de transparencia, donde: 0% es completamente transparente. 100% (1) es el valor predeterminado y representa la imagen original (sin transparencia). Nota: No se permiten valores negativos. Sugerencia: este filtro es similar a la propiedad. | |
| saturar( % ) | Satura la imagen. 0% (0) hará que la imagen no esté completamente saturada. 100% es el valor predeterminado y representa la imagen original. Los valores superiores al 100 % proporcionan resultados sobresaturados. Nota: No se permiten valores negativos. | |
| sepia( % ) | Convierte la imagen a sepia. 0% (0) es el valor predeterminado y representa la imagen original. 100% hará que la imagen sea completamente sepia. Nota: No se permiten valores negativos. | |
| URL() | La función url() 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. Ejemplo: filtro: url(svg-url#element-id) | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .filter
Los números de la tabla detallan la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| flex | 29.0 21.0 -webkit- | 11.0 10.0 -ms- | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
