CSS
Propiedad de filtro
Buscar..
Sintaxis
- filtro: ninguno (valor predeterminado)
- filtro: inicial (predeterminado en ninguno);
- filtro: heredar (por defecto al valor principal);
- filtro: desenfoque (px)
- filtro: brillo (numero |%)
- filtro: contraste (número |%)
- filtro: sombra-sombra (sombra horizontal-sombra-vertical-sombra-px sombra-desenfoque-sombra-sombra - color de propagación)
- filtro: escala de grises (número |%)
- filtro: hue-rotate (grados)
- filtro: invertido (número |%)
- filtro: opacidad (número |%)
- filtro: saturar (número |%)
- filtro: sepia (numero |%)
Parámetros
| Valor | Descripción |
|---|---|
| difuminar (x) | Difumina la imagen por x píxeles. |
| brillo (x) | Ilumina la imagen en cualquier valor por encima de 1.0 o 100%. Debajo de eso, la imagen se oscurecerá. |
| contraste (x) | Proporciona más contraste con la imagen en cualquier valor por encima de 1.0 o 100%. Debajo de eso, la imagen se saturará menos. |
| sombra paralela (h, v, x, y, z) | Da a la imagen una sombra paralela. hyv pueden tener valores negativos. x, y, yz son opcionales. |
| escala de grises (x) | Muestra la imagen en escala de grises, con un valor máximo de 1.0 o 100%. |
| hue-rotate (x) | Aplica una rotación de tono a la imagen. |
| invertir (x) | Invierte el color de la imagen con un valor máximo de 1.0 o 100%. |
| opacidad (x) | Establece la opacidad / transparencia de la imagen con un valor máximo de 1.0 o 100%. |
| saturar (x) | Satura la imagen en cualquier valor por encima de 1.0 o 100%. Debajo de eso, la imagen comenzará a desaturarse. |
| sepia (x) | Convierte la imagen en sepia con un valor máximo de 1.0 o 100%. |
Observaciones
Dado que el filtro es una función experimental, debe usar el prefijo -webkit. Puede cambiar la sintaxis y el comportamiento, pero los cambios probablemente serán pequeños.
Puede que no sea compatible con versiones anteriores de los principales navegadores. Puede que no sea totalmente compatible con los navegadores móviles.
Debido a su soporte relativamente limitado, intente usar
box-shadowlugar defilter: drop-shadow(). Usa laopacitylugar delfilter: opacity().Se puede animar a través de Javascript / jQuery. Para Javascript, use
object.style.WebkitFilter.W3Schools también tiene una página de demostración para todos los diferentes tipos de valores de filtro.
Sombra paralela (usa box-shadow si es posible)
HTML
<p>My shadow always follows me.</p>
CSS
p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}
Resultado
Valores de filtro múltiples
Para usar múltiples filtros, separe cada valor con un espacio.
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}
Resultado
Hue Rotate
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
Resultado
Invertir color
HTML
<div></div>
CSS
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
Resultado
Vuelve de blanco a negro.
Difuminar
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
Resultado
Te hace querer frotar tus gafas.