CSS-filtrid on võimas tööriist, mida autorid saavad kasutada erinevate visuaalefektide saavutamiseks (brauseri jaoks sarnased Photoshopi filtrid). Atribuut CSS filterannab juurdepääsu elementidele, näiteks hägususele või värvi nihutamisele elemendi renderdamisel enne elemendi kuvamist. Filtreid kasutatakse tavaliselt pildi, tausta või äärise renderdamise reguleerimiseks.
Süntaks on:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Väärtuse jaoks saab kasutada mitmeid funktsioone:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- SVG-filtrite rakendamisekscustom()- "tulekul"
Kasutada saab mitut funktsiooni, tühikud eraldatud.
.do-more-things ( filter: blur(20px) grayscale(20%); )Filtrifunktsioonid
CSS-filtri atribuudi kasutamiseks määrake väärtus ühele järgmistest eespool loetletud funktsioonidest. Kui väärtus on vale, tagastab funktsioon väärtuse „puudub”. Välja arvatud juhul, kui on märgitud, aktsepteerivad funktsioonid, mis võtavad protsendimärgina väljendatud väärtuse (nagu 34%), ka kümnendarvuna (nagu 0,34) väljendatud väärtuse.
Siin on demo, mis võimaldab teil üksikute filtritega natuke mängida:
halltoon ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Teisendab sisendkujutise halltooniks. „Summa” väärtus määratleb konversiooni osakaalu. 100% väärtus on täiesti hallikas. Väärtus 0% jätab sisendi muutmata. Väärtused vahemikus 0% kuni 100% on efekti lineaarkordajad. Kui parameeter „summa” puudub, kasutatakse väärtust 100%. Negatiivsed väärtused pole lubatud.
seepia ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Teisendab sisendpildi seepiaks. „Summa” väärtus määratleb konversiooni osakaalu. 100% väärtus on täiesti sepia. Väärtus 0 jätab sisendi muutmata. Väärtused vahemikus 0% kuni 100% on efekti lineaarkordajad. Kui parameeter „summa” puudub, kasutatakse väärtust 100%. Negatiivsed väärtused pole lubatud.
küllastama ()
filter: saturate(2); /* same as… */ filter: sature(200%);Küllastab sisendpilti. „Summa” väärtus määratleb konversiooni osakaalu. Väärtus 0% on täielikult küllastamata. Väärtus 100% jätab sisendi muutmata. Teised väärtused on efekti lineaarkordajad. Lubatud on üle 100% väärtused, mis annavad üleküllastatud tulemusi. Kui parameeter „summa” puudub, kasutatakse väärtust 100%. Negatiivsed väärtused pole lubatud.
tooni pööramine ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Rakendab sisendkujutisele tooni pööramist. Nurga väärtus määrab kraadide arvu ümber värviringi, mida sisendproove korrigeeritakse. Väärtus 0deg jätab sisendi muutmata. Kui „nurk“ parameeter puudub, kasutatakse väärtust 0deg. Maksimaalne väärtus on 360deg.
ümber pöörama ()
filter: invert(100%);Pöörab sisendpildil olevad proovid. „Summa” väärtus määratleb konversiooni osakaalu. 100% väärtus on täielikult ümber pööratud. Väärtus 0% jätab sisendi muutmata. Väärtused vahemikus 0% kuni 100% on efekti lineaarkordajad. Kui parameeter „summa” puudub, kasutatakse väärtust 100%. Negatiivsed väärtused pole lubatud.
läbipaistmatus ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Rakendab sisendkujutises olevate näidiste jaoks läbipaistvust. „Summa” väärtus määratleb konversiooni osakaalu. Väärtus 0% on täiesti läbipaistev. Väärtus 100% jätab sisendi muutmata. Väärtused vahemikus 0% kuni 100% on efekti lineaarkordajad. See võrdub sisendpildi proovide korrutamisega summaga. Kui parameeter „summa” puudub, kasutatakse väärtust 100%. See funktsioon sarnaneb rohkem väljakujunenud läbipaistmatuse omadusega; erinevus seisneb selles, et filtrite abil pakuvad mõned brauserid parema jõudluse tagamiseks riistvarakiirendust. Negatiivsed väärtused pole lubatud.
heledus ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Rakendab sisendpildile lineaarkordajat, muutes selle enam-vähem heledaks. Väärtus 0% loob pildi, mis on täiesti must. Väärtus 100% jätab sisendi muutmata. Teised väärtused on efekti lineaarkordajad. Lubatud on väärtused, mille summa ületab 100%, pakkudes eredamaid tulemusi. Kui parameeter „summa” puudub, kasutatakse väärtust 100%.
kontrast ()
filter: contrast(4); /* same as… */ filter: contrast(400%);Reguleerib sisendi kontrastsust. Väärtus 0% loob pildi, mis on täiesti must. Väärtus 100% jätab sisendi muutmata. Lubatud on väärtused üle 100% summa, pakkudes tulemusi vähem kontrastiga. Kui parameeter „summa” puudub, kasutatakse väärtust 100%.
hägustama ()
filter: blur(5px); filter: blur(1rem);Rakendab sisendkujutisele Gaussi hägustust. Raadiuse väärtus määratleb standardhälbe väärtuse Gaussi funktsioonile või mitu ekraanil olevat pikslit üksteisega sulanduvad, nii et suurem väärtus tekitab rohkem hägusust. Kui parameetrit ei esitata, kasutatakse väärtust 0. Parameeter on määratud CSS-i pikkusena, kuid ei aktsepteeri protsendiväärtusi.
varju ()
filter: drop-shadow((2,3) ?)Rakendab sisendkujutisele varjuefekti. Vari on sisuliselt kujutise alfamaski hägune, nihutatud versioon, mis on joonistatud kindla värviga ja mis on kokku pandud pildi alla. Funktsioon aktsepteerib tüübiparameetrit (määratletud CSS3 taustades), välja arvatud see, et märksõna „sisestamine” pole lubatud.
See funktsioon sarnaneb enamkasutatava kasti-varju omadusega; erinevus seisneb selles, et filtrite abil pakuvad mõned brauserid parema jõudluse tagamiseks riistvarakiirendust.
Drop-shadow jäljendab ka kavandatud objektide kontuuri loomulikult, erinevalt sellest, box-shadowmis kohtleb teena ainult kasti.
Nii nagu teksti-varju puhul, pole objektist suuremat kindlat varju tekitamiseks parameetrit „levida”.
URL ()
filter: url()url()Funktsioon võtab asukohast XML-faili, mis määrab SVG filter, ja see võib sisaldada ankur konkreetse filter element. Siin on õpetus, mis töötab toreda sissejuhatusena SVG-filtritele koos lõbusa demoga.
Filtrite animeerimine
Kuna filtrid on animeeritavad, võib see avada uksi terve hulga lõbu jaoks.
Märkused
Renderdamise manipuleerimiseks võite kombineerida suvalise arvu funktsioone, kuid järjekord on siiski oluline (st grayscale()pärast kasutamist sepia()annab tulemuseks täiesti halli väljundi).
Arvutatud väärtus, mis pole „ükski”, loob virnastamise konteksti loomise samamoodi nagu CSS-i läbipaistmatus. Filtri omadus ei mõjuta sihtelemendi kasti mudeli geomeetriat, kuigi filtrid võivad põhjustada värvimist väljaspool elemendi piirikasti. Filtrifunktsioonid mõjutavad kõiki sihtelemendi osi. See hõlmab elemendi, millele filtrit rakendatakse, ja selle järeltulijate mis tahes sisu, tausta, piire, teksti kaunistamist, kontuuri ja nähtavat kerimismehhanismi. Filtrid saab rakendada ka tekstisisese sisu, näiteks üksikute tekstivahemike korral.
Spetsifikatsioon tutvustab ka filter(image-URL, filter-functions)pildi ümbrise funktsiooni. See võimaldaks teil filtreerida mis tahes pilti CSS-is kasutamise ajal. Näiteks võite taustapilti hägustada teksti hägustamata. Brauserites pole seda filtrifunktsiooni veel toetatud. Seniks saate sarnase efekti loomiseks pseudoelemendile rakendada nii tausta kui ka filtri.
IE patenteeritud filtrivärk
Kasutas ka filtervara, näiteks:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Enamasti kasutatakse läbipaistmatuse korral, kui peate toetama IE 8 ja alla.
Rohkem informatsiooni
- W3C filtriefektide spetsifikatsioon
- http://html5-demos.appspot.com/static/css/filters/index.html
- Bennett Feely filtrite galerii
- MDN-i dokumendid
- Kas ma võin kasutada
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- CSS-i filtriefektide mõistmine
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 18 * | 35 | Ei | 79 | 6 * |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0–6,1 * |