CSS-filtre er et kraftfuldt værktøj, som forfattere kan bruge til at opnå varierende visuelle effekter (som Photoshop-filtre til browseren). CSS- filterejendommen giver adgang til effekter som sløring eller farveskift på elementets gengivelse, før elementet vises. Filtre bruges ofte til at justere gengivelsen af et billede, en baggrund eller en ramme.
Syntaksen er:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Der er en række funktioner, der skal bruges til værdien:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- til anvendelse af SVG-filtrecustom()- “kommer snart”
Flere funktioner kan bruges, pladsadskilt.
.do-more-things ( filter: blur(20px) grayscale(20%); )Filterfunktioner
For at bruge CSS-filteregenskaben skal du angive en værdi for en af følgende funktioner, der er anført ovenfor. Hvis værdien er ugyldig, returnerer funktionen "ingen". Bortset fra hvor det er angivet, accepterer de funktioner, der tager en værdi udtrykt med et procenttegn (som i 34%), også værdien udtrykt som decimal (som i 0,34).
Her er en demo, der lader dig spille med individuelle filtre lidt:
gråtoner ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Konverterer inputbilledet til gråtoner. Værdien af "beløb" definerer andelen af konverteringen. En værdi på 100% er fuldstændig gråtoner. En værdi på 0% efterlader input uændret. Værdier mellem 0% og 100% er lineære multiplikatorer for effekten. Hvis parameteren "beløb" mangler, bruges en værdi på 100%. Negative værdier er ikke tilladt.
sepia ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Konverterer inputbilledet til sepia. Værdien af "beløb" definerer andelen af konverteringen. En værdi på 100% er helt sepia. En værdi på 0 efterlader input uændret. Værdier mellem 0% og 100% er lineære multiplikatorer for effekten. Hvis parameteren "beløb" mangler, bruges en værdi på 100%. Negative værdier er ikke tilladt.
mættet ()
filter: saturate(2); /* same as… */ filter: sature(200%);Mætter inputbilledet. Værdien af "beløb" definerer andelen af konverteringen. En værdi på 0% er fuldstændig umættet. En værdi på 100% efterlader input uændret. Andre værdier er lineære multiplikatorer på effekten. Værdier over 100% er tilladt, hvilket giver supermættede resultater. Hvis parameteren "beløb" mangler, bruges en værdi på 100%. Negative værdier er ikke tilladt.
nuance-rotere ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Anvender en farvetone-rotation på inputbilledet. Værdien af "vinkel" definerer antallet af grader omkring den farvecirkel, som inputprøverne justeres. En værdi på 0deg efterlader input uændret. Hvis parameteren "vinkel" mangler, bruges en værdi på 0deg. Den maksimale værdi er 360deg.
inverter ()
filter: invert(100%);Inverterer prøverne i inputbilledet. Værdien af "beløb" definerer andelen af konverteringen. En værdi på 100% er fuldstændig inverteret. En værdi på 0% efterlader input uændret. Værdier mellem 0% og 100% er lineære multiplikatorer for effekten. Hvis parameteren "beløb" mangler, bruges en værdi på 100%. Negative værdier er ikke tilladt.
Gennemsigtighed()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Anvender gennemsigtighed på prøverne i inputbilledet. Værdien af "beløb" definerer andelen af konverteringen. En værdi på 0% er fuldstændig gennemsigtig. En værdi på 100% efterlader input uændret. Værdier mellem 0% og 100% er lineære multiplikatorer for effekten. Dette svarer til at multiplicere eksempler på inputbilledet med mængde. Hvis parameteren "beløb" mangler, bruges en værdi på 100%. Denne funktion svarer til den mere etablerede opacitetsejendom; forskellen er, at med filtre giver nogle browsere hardwareacceleration for bedre ydeevne. Negative værdier er ikke tilladt.
lysstyrke ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Anvender en lineær multiplikator på inputbillede, så det ser mere eller mindre lyst ud. En værdi på 0% opretter et billede, der er helt sort. En værdi på 100% efterlader input uændret. Andre værdier er lineære multiplikatorer på effekten. Værdier på et beløb over 100% er tilladt, hvilket giver lysere resultater. Hvis parameteren "beløb" mangler, bruges en værdi på 100%.
kontrast()
filter: contrast(4); /* same as… */ filter: contrast(400%);Justerer kontrasten på input. En værdi på 0% opretter et billede, der er helt sort. En værdi på 100% efterlader input uændret. Værdier over beløbet over 100% er tilladt, hvilket giver resultater med mindre kontrast. Hvis parameteren "beløb" mangler, bruges en værdi på 100%.
slør ()
filter: blur(5px); filter: blur(1rem);Anvender en Gaussisk sløring på inputbilledet. Værdien af 'radius' definerer værdien af standardafvigelsen til den Gaussiske funktion, eller hvor mange pixels på skærmen blandes ind i hinanden, så en større værdi vil skabe mere sløring. Hvis der ikke er angivet nogen parameter, anvendes en værdi 0. Parameteren er angivet som en CSS-længde, men accepterer ikke procentværdier.
drop-shadow ()
filter: drop-shadow((2,3) ?)Anvender en skyggeeffekt på inputbilledet. En skygge er faktisk en sløret, forskudt version af inputbilledets alfamaske tegnet i en bestemt farve, sammensat under billedet. Funktionen accepterer en parameter af typen (defineret i CSS3-baggrunde) med den undtagelse, at nøgleordet 'indsat' ikke er tilladt.
Denne funktion svarer til den mere etablerede box-shadow egenskab; forskellen er, at med filtre giver nogle browsere hardwareacceleration for bedre ydeevne.
Drop-shadow efterligner også de tilsigtede objekter, der skitseres naturligt i modsætning til, box-shadowat kun behandler kassen som dens sti.
Ligesom med tekst-skygge er der ingen 'spread' -parameter til at skabe en solid skygge, der er større end objektet.
url ()
filter: url()Den url()funktion tager placeringen af en XML-fil, der angiver en SVG-filter, og kan omfatte et anker til en bestemt filterelement. Her er en tutorial, der fungerer som en god introduktion til SVG-filtre med en sjov demo.
Animerende filtre
Da filtre kan animeres, kan det åbne dørene for en hel masse sjov.
Bemærkninger
Du kan kombinere et vilkårligt antal funktioner for at manipulere gengivelsen, men rækkefølge betyder stadig (dvs. brug af grayscale()efter sepia()vil resultere i helt grå output).
En beregnet værdi på andet end “ingen” resulterer i oprettelse af en stablingskontekst på samme måde som CSS-opacitet gør. Filteregenskaben har ingen indflydelse på geometrien af målelementets boksmodel, selvom filtre kan forårsage maling uden for et elements kantboks. Alle dele af målelementet påvirkes af filterfunktioner. Dette inkluderer ethvert indhold, baggrund, grænser, tekstdekoration, omrids og synlig rullemekanisme for det element, som filteret er anvendt på, og dets efterkommere. Filtre kan også anvendes til indbygget indhold, såsom individuelle tekstspænd.
Specifikationen introducerer også en filter(image-URL, filter-functions)indpakningsfunktion til et billede. Det giver dig mulighed for at filtrere ethvert billede på det tidspunkt, du bruger det i CSS. For eksempel kan du sløre et baggrundsbillede uden at sløre teksten. Denne filterfunktion understøttes endnu ikke i browsere. I mellemtiden kan du anvende både baggrunden og filteret på et pseudo-element for at skabe en lignende effekt.
IE's proprietære filter ting
Brugte også filterejendommen, som:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Bruges mest til opacitet, når du har brug for at understøtte IE 8 og derunder.
Mere information
- W3C filtereffektspecifikation
- http://html5-demos.appspot.com/static/css/filters/index.html
- Bennett Feely's Filters Gallery
- MDN Docs
- Kan jeg bruge
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Forståelse af CSS-filtereffekter
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 18 * | 35 | Ingen | 79 | 6 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |