CSS
Filter eigenschap
Zoeken…
Syntaxis
- filter: geen (standaardwaarde)
- filter: initiaal (standaard ingesteld op geen);
- filter: erven (standaardwaarde bovenliggende waarde);
- filter: vervagen (px)
- filter: helderheid (aantal |%)
- filter: contrast (aantal |%)
- filter: slagschaduw (horizontale schaduw-px verticale-schaduw-px schaduw-vervagen-px-schaduw - gespreide kleur)
- filter: grijswaarden (aantal |%)
- filter: tint draaien (graden)
- filter: omkeren (aantal |%)
- filter: dekking (aantal |%)
- filter: verzadigd (aantal |%)
- filter: sepia (aantal |%)
parameters
| Waarde | Beschrijving |
|---|---|
| onscherpte (x) | Vervaagt de afbeelding met x pixels. |
| Helderheid (x) | Hiermee wordt het beeld helderder gemaakt bij elke waarde boven 1,0 of 100%. Daaronder wordt de afbeelding donkerder gemaakt. |
| contrast (x) | Biedt meer contrast met de afbeelding bij elke waarde boven 1,0 of 100%. Daaronder wordt de afbeelding minder verzadigd. |
| slagschaduw (h, v, x, y, z) | Geeft de afbeelding een slagschaduw. h en v kunnen negatieve waarden hebben. x, y en z zijn optioneel. |
| grijswaarden (x) | Toont de afbeelding in grijstinten, met een maximale waarde van 1,0 of 100%. |
| hue draaien (x) | Past een tintrotatie toe op de afbeelding. |
| invert (x) | Keert de kleur van de afbeelding om met een maximale waarde van 1,0 of 100%. |
| opaciteit (x) | Stelt in hoe ondoorzichtig / transparant de afbeelding is met een maximale waarde van 1,0 of 100%. |
| verzadigde (x) | Verzadigt de afbeelding met elke waarde boven 1,0 of 100%. Daaronder begint het beeld te verzadigen. |
| sepia (x) | Converteert de afbeelding naar sepia met een maximale waarde van 1,0 of 100%. |
Opmerkingen
Aangezien filter een experimentele functie is, moet u het voorvoegsel -webkit gebruiken. Het kan veranderen in syntaxis en gedrag, maar de veranderingen zullen waarschijnlijk klein zijn.
Het wordt mogelijk niet ondersteund in oudere versies van grote browsers. Het wordt mogelijk niet ondersteund in mobiele browsers.
Vanwege de relatief beperkte ondersteuning, probeer
box-shadowte gebruikenbox-shadowplaats vanfilter: drop-shadow(). Gebruikopacityplaats vanfilter: opacity().Het kan worden geanimeerd via Javascript / jQuery. Gebruik voor Javascript
object.style.WebkitFilter.W3Schools heeft ook een demopagina voor alle verschillende type filterwaarden.
Slagschaduw (gebruik in plaats daarvan box-schaduw indien mogelijk)
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);
}
Resultaat
Meerdere filterwaarden
Als u meerdere filters wilt gebruiken, scheidt u elke waarde met een spatie.
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%);
}
Resultaat
Tint Roteren
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
Resultaat
Kleur omkeren
HTML
<div></div>
CSS
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
Resultaat
Verandert van wit naar zwart.
vervagen
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
Resultaat
Je wilt over je bril wrijven.