CSS-filtre er et kraftig verktøy som forfattere kan bruke for å oppnå varierende visuelle effekter (som Photoshop-filtre for nettleseren). CSS- filteregenskapen gir tilgang til effekter som uskarphet eller fargeskifting på gjengivelsen av et element før elementet vises. Filtre brukes ofte til å justere gjengivelsen av et bilde, en bakgrunn eller en kant.
Syntaksen er:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Det er en rekke funksjoner å bruke for verdien:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- for bruk av SVG-filtrecustom()- "kommer snart"
Flere funksjoner kan brukes, mellomrom.
.do-more-things ( filter: blur(20px) grayscale(20%); )Filterfunksjoner
For å bruke CSS-filteregenskapen angir du en verdi for en av følgende funksjoner som er oppført ovenfor. Hvis verdien er ugyldig, returnerer funksjonen "ingen". Unntatt der det er angitt, aksepterer også funksjonene som tar en verdi uttrykt med et prosenttegn (som i 34%) verdien uttrykt som desimal (som i 0.34).
Her er en demo som lar deg spille med individuelle filtre litt:
gråtoner ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Konverterer inngangsbildet til gråtoner. Verdien av "beløp" definerer andelen av konverteringen. En verdi på 100% er helt gråtoner. En verdi på 0% etterlater inngangen uendret. Verdier mellom 0% og 100% er lineære multiplikatorer på effekten. Hvis parameteren "beløp" mangler, brukes en verdi på 100%. Negative verdier er ikke tillatt.
sepia ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Konverterer inngangsbildet til sepia. Verdien av "beløp" definerer andelen av konverteringen. En verdi på 100% er helt sepia. En verdi på 0 etterlater inngangen uendret. Verdier mellom 0% og 100% er lineære multiplikatorer på effekten. Hvis parameteren "beløp" mangler, brukes en verdi på 100%. Negative verdier er ikke tillatt.
mettet ()
filter: saturate(2); /* same as… */ filter: sature(200%);Metter inngangsbildet. Verdien av "beløp" definerer andelen av konverteringen. En verdi på 0% er helt umettet. En verdi på 100% etterlater inngangen uendret. Andre verdier er lineære multiplikatorer på effekten. Verdier over 100% er tillatt, noe som gir supermettede resultater. Hvis parameteren "beløp" mangler, brukes en verdi på 100%. Negative verdier er ikke tillatt.
fargetone-roter ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Bruker en nyanserotasjon på inngangsbildet. Verdien av “vinkel” definerer antall grader rundt fargesirkelen inngangsprøvene vil bli justert. En verdi på 0deg etterlater inngangen uendret. Hvis "vinkel" -parameteren mangler, brukes verdien av 0deg. Maksimumsverdien er 360deg.
invertere ()
filter: invert(100%);Inverterer prøvene i inngangsbildet. Verdien av "beløp" definerer andelen av konverteringen. En verdi på 100% er fullstendig invertert. En verdi på 0% etterlater inngangen uendret. Verdier mellom 0% og 100% er lineære multiplikatorer på effekten. Hvis parameteren "beløp" mangler, brukes en verdi på 100%. Negative verdier er ikke tillatt.
opasitet ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Bruker gjennomsiktighet til prøvene i inngangsbildet. Verdien av "beløp" definerer andelen av konverteringen. En verdi på 0% er helt gjennomsiktig. En verdi på 100% etterlater inngangen uendret. Verdier mellom 0% og 100% er lineære multiplikatorer på effekten. Dette tilsvarer multiplisering av inngangsbildeprøver med mengde. Hvis parameteren "beløp" mangler, brukes en verdi på 100%. Denne funksjonen ligner på den mer etablerte opasitetsegenskapen; Forskjellen er at med nettlesere gir noen nettlesere maskinvareakselerasjon for bedre ytelse. Negative verdier er ikke tillatt.
lysstyrke ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Bruker en lineær multiplikator på inngangsbildet, slik at det ser mer eller mindre lyst ut. En verdi på 0% vil skape et bilde som er helt svart. En verdi på 100% etterlater inngangen uendret. Andre verdier er lineære multiplikatorer på effekten. Verdier på et beløp over 100% er tillatt, noe som gir lysere resultater. Hvis parameteren "beløp" mangler, brukes en verdi på 100%.
kontrast()
filter: contrast(4); /* same as… */ filter: contrast(400%);Justerer kontrasten til inngangen. En verdi på 0% vil skape et bilde som er helt svart. En verdi på 100% etterlater inngangen uendret. Verdier over mengden over 100% er tillatt, noe som gir resultater med mindre kontrast. Hvis parameteren "beløp" mangler, brukes en verdi på 100%.
uklarhet()
filter: blur(5px); filter: blur(1rem);Bruker en Gaussisk uskarphet på inngangsbildet. Verdien av 'radius' definerer verdien av standardavviket til den Gaussiske funksjonen, eller hvor mange piksler på skjermen som smelter inn i hverandre, slik at en større verdi vil skape mer uskarphet. Hvis ingen parameter er gitt, brukes en verdi 0. Parameteren er spesifisert som en CSS-lengde, men aksepterer ikke prosentverdier.
drop-shadow ()
filter: drop-shadow((2,3) ?)Bruker en skyggeeffekt på inngangsbildet. En skygge er effektivt en uskarpt, forskjøvet versjon av inngangsbildets alfamaske tegnet i en bestemt farge, sammensatt under bildet. Funksjonen godtar en parameterparameter (definert i CSS3 bakgrunner), med unntak av at 'innfelt' nøkkelordet ikke er tillatt.
Denne funksjonen ligner på den mer etablerte box-shadow-egenskapen; Forskjellen er at med nettlesere gir noen nettlesere maskinvareakselerasjon for bedre ytelse.
Drop-shadow etterligner også de tiltenkte objektene som skisseres naturlig, i motsetning til det box-shadowsom bare behandler boksen som dens vei.
Akkurat som med tekst-skygge, er det ingen "spread" -parameter for å skape en solid skygge som er større enn objektet.
url ()
filter: url()Den url()funksjonen gjør plasseringen av en XML-fil som spesifiserer en SVG filter, og kan omfatte et anker til en bestemt filterelement. Her er en veiledning som fungerer som en fin intro til SVG-filtre med en morsom demo.
Animasjonsfiltre
Siden filtre er animerbare, kan det åpne dørene for en hel masse moro.
Merknader
Du kan kombinere et hvilket som helst antall funksjoner for å manipulere gjengivelsen, men rekkefølgen betyr fortsatt noe (dvs. å bruke grayscale()etter sepia()vil resultere i helt grå utgang).
En beregnet verdi på annet enn “ingen” resulterer i at det opprettes en stablingskontekst på samme måte som CSS opacity gjør. Filteregenskapen har ingen innvirkning på geometrien til målelementets boksmodell, selv om filtre kan forårsake maling utenfor elementets kantboks. Eventuelle deler av målelementet påvirkes av filterfunksjoner. Dette inkluderer alt innhold, bakgrunn, rammer, tekstdekorasjon, omriss og synlig rullemekanisme for elementet som filteret er påført, og de av dets etterkommere. Filtre kan også brukes på innebygd innhold, for eksempel individuelle tekstspenn.
Spesifikasjonen introduserer også en filter(image-URL, filter-functions)innpakningsfunksjon for et bilde. Det vil tillate deg å filtrere hvilket som helst bilde på det tidspunktet du bruker det i CSS. For eksempel kan du uskarpe et bakgrunnsbilde uten å uskarpe teksten. Denne filterfunksjonen støttes ennå ikke i nettlesere. I mellomtiden kan du bruke både bakgrunnen og filteret til et pseudo-element for å skape en lignende effekt.
IEs proprietære filterting
Brukte også filtereiendommen, som:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Brukes mest for opasitet når du trengte å støtte IE 8 og nedover.
Mer informasjon
- W3C Filter Effects Specification
- http://html5-demos.appspot.com/static/css/filters/index.html
- Bennett Feely's Filters Gallery
- MDN Docs
- Kan jeg bruke
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Forstå CSS-filtereffekter
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 18 * | 35 | Nei | 79 | 6 * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |