CSS filtri ir spēcīgs rīks, kuru autori var izmantot, lai iegūtu dažādus vizuālos efektus (piemēram, pārlūka Photoshop filtrus). CSS filterrekvizīts nodrošina piekļuvi tādiem efektiem kā izplūšana vai krāsu maiņa uz elementa renderēšanas pirms elementa parādīšanas. Filtrus parasti izmanto, lai pielāgotu attēla, fona vai apmales renderēšanu.
Sintakse ir:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Vērtībai ir jāizmanto vairākas funkcijas:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- SVG filtru pielietošanaicustom()- "drīzumā"
Var izmantot vairākas funkcijas, atdalot atstarpi.
.do-more-things ( filter: blur(20px) grayscale(20%); )Filtra funkcijas
Lai izmantotu CSS filtra rekvizītu, norādiet vērtību vienai no šīm iepriekš uzskaitītajām funkcijām. Ja vērtība nav derīga, funkcija atgriež “none”. Izņemot gadījumus, kad funkcijas atzīmē vērtību, kas izteikta ar procentu zīmi (kā 34%), tiek pieņemta arī vērtība, kas izteikta kā decimāldaļa (kā 0,34).
Šeit ir demonstrācija, kas ļauj mazliet spēlēt ar atsevišķiem filtriem:
pelēktoņu ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Pārvērš ievades attēlu par pelēktoņu. “Summas” vērtība nosaka reklāmguvuma proporciju. 100% vērtība ir pilnīgi pelēka. Vērtība 0% atstāj ievadu nemainītu. Vērtības no 0% līdz 100% ir lineāri efekta reizinātāji. Ja trūkst parametra “summa”, tiek izmantota vērtība 100%. Negatīvās vērtības nav atļautas.
sēpija ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Pārvērš ievades attēlu par sēpiju. “Summas” vērtība nosaka reklāmguvuma proporciju. 100% vērtība ir pilnīgi sēpija. Vērtība 0 atstāj ievadu nemainītu. Vērtības no 0% līdz 100% ir lineāri efekta reizinātāji. Ja trūkst parametra “summa”, tiek izmantota vērtība 100%. Negatīvās vērtības nav atļautas.
piesātināt ()
filter: saturate(2); /* same as… */ filter: sature(200%);Piesātina ievades attēlu. “Summas” vērtība nosaka reklāmguvuma proporciju. 0% vērtība nav pilnībā piesātināta. 100% vērtība izejvielu nemaina. Citas vērtības ir lineāri efekta reizinātāji. Ir atļautas vērtības, kas pārsniedz 100%, nodrošinot pārāk piesātinātus rezultātus. Ja trūkst parametra “summa”, tiek izmantota vērtība 100%. Negatīvās vērtības nav atļautas.
pagriezt nokrāsu ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Ievades attēlā pielieto nokrāsas pagriešanu. “Leņķa” vērtība nosaka grādu skaitu ap krāsu apli, kurā ievades paraugi tiks koriģēti. Vērtība 0deg atstāj ievadu nemainītu. Ja trūkst parametra “angle”, 0degtiek izmantota vērtība . Maksimālā vērtība ir 360deg.
apgriezt ()
filter: invert(100%);Apvērš paraugus ievades attēlā. “Summas” vērtība nosaka reklāmguvuma proporciju. 100% vērtība ir pilnībā apgriezta. Vērtība 0% atstāj ievadu nemainītu. Vērtības no 0% līdz 100% ir lineāri efekta reizinātāji. Ja trūkst parametra “summa”, tiek izmantota vērtība 100%. Negatīvās vērtības nav atļautas.
necaurredzamība ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Pieliek caurspīdīgumu ievades attēla paraugiem. “Summas” vērtība nosaka reklāmguvuma proporciju. 0% vērtība ir pilnīgi caurspīdīga. 100% vērtība izejvielu nemaina. Vērtības no 0% līdz 100% ir lineāri efekta reizinātāji. Tas ir līdzvērtīgs ievades attēla paraugu reizināšanai ar daudzumu. Ja trūkst parametra “summa”, tiek izmantota vērtība 100%. Šī funkcija ir līdzīga daudzveidīgākajam necaurredzamības īpašumam; atšķirība ir tāda, ka, izmantojot filtrus, dažas pārlūkprogrammas nodrošina aparatūras paātrinājumu labākai veiktspējai. Negatīvās vērtības nav atļautas.
spilgtums ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Ievades attēlam piemēro lineāru reizinātāju, padarot to vairāk vai mazāk spilgtu. 0% vērtība izveidos attēlu, kas ir pilnīgi melns. 100% vērtība izejvielu nemaina. Citas vērtības ir lineāri efekta reizinātāji. Ir atļautas vērtības, kas pārsniedz 100%, nodrošinot gaišākus rezultātus. Ja trūkst parametra “summa”, tiek izmantota vērtība 100%.
kontrasts ()
filter: contrast(4); /* same as… */ filter: contrast(400%);Pielāgo ievades kontrastu. 0% vērtība izveidos attēlu, kas ir pilnīgi melns. 100% vērtība izejvielu nemaina. Ir atļautas vērtības, kas pārsniedz 100%, nodrošinot rezultātus ar mazāku kontrastu. Ja trūkst parametra “summa”, tiek izmantota vērtība 100%.
aizmiglot ()
filter: blur(5px); filter: blur(1rem);Ievades attēlam piemēro Gausa izplūdumu. “Rādiusa” vērtība nosaka standarta novirzes vērtību līdz Gausa funkcijai vai to, cik pikseļu ekrānā saplūst viens ar otru, tāpēc lielāka vērtība radīs vairāk izplūdumu. Ja parametrs nav norādīts, tiek izmantota vērtība 0. Parametrs ir norādīts kā CSS garums, taču tas nepieņem procentuālās vērtības.
ēna ()
filter: drop-shadow((2,3) ?)Ievades attēlam piemēro ēnas efektu. Krītošā ēna faktiski ir izplūdusi, nobīdīta ievades attēla alfa maskas versija, kas zīmēta noteiktā krāsā un ir salikta zem attēla. Funkcija pieņem tipa parametru (definēts CSS3 fonos), izņemot to, ka atslēgas “ieliktnis” nav atļauts.
Šī funkcija ir līdzīga daudzveidīgākajam lodziņa-ēnas īpašumam; atšķirība ir tāda, ka, izmantojot filtrus, dažas pārlūkprogrammas nodrošina aparatūras paātrinājumu labākai veiktspējai.
Drop-shadow arī atdarina iecerēto objektu kontūru dabiski, atšķirībā no tā, box-shadowka tā tiek uzskatīta tikai par lodziņu.
Tāpat kā ar teksta ēnu, nav arī “izplatīšanās” parametra, lai izveidotu cietu ēnu, kas ir lielāka par objektu.
URL ()
filter: url()url()Funkcija aizņem vietu XML failu, kas nosaka ar SVG filtru, un var ietvert arī enkuru uz specifisku filtra elementu. Šeit ir apmācība, kas darbojas kā jauks SVG filtru ievads ar jautru demonstrāciju.
Filtru animēšana
Tā kā filtri ir animējami, tas var atvērt durvis visam priekam.
Piezīmes
Varat apvienot jebkuru funkciju skaitu, lai manipulētu ar renderēšanu, taču kārtībai joprojām ir nozīme (ti, izmantojot grayscale()after sepia(), rezultāts būs pilnīgi pelēks).
Aprēķinātā vērtība, kas nav “neviens”, rada sakraušanas konteksta izveidi tāpat kā CSS necaurredzamība. Filtra īpašība neietekmē mērķa elementa lodziņa modeļa ģeometriju, pat ja filtri var izraisīt krāsošanu ārpus elementa apmales lodziņa. Filtru funkcijas ietekmē visas mērķa elementa daļas. Tas ietver jebkuru elementa, kuram tiek piemērots filtrs, un tā pēcnācēju saturu, fonu, apmales, teksta rotājumus, kontūras un redzamo ritināšanas mehānismu. Filtrus var izmantot arī iekļautajam saturam, piemēram, atsevišķiem teksta posmiem.
Specifikācija ievieš filter(image-URL, filter-functions)arī attēla iesaiņošanas funkciju. Tas ļautu filtrēt jebkuru attēlu laikā, kad to izmantojat CSS. Piemēram, jūs varētu aizmiglot fona attēlu, nesamazinot tekstu. Šī filtrēšanas funkcija pārlūkprogrammās vēl netiek atbalstīta. Tikmēr pseidoelementam var pielietot gan fonu, gan filtru, lai izveidotu līdzīgu efektu.
IE patentētie filtru materiāli
Izmantoja arī filterīpašumu, piemēram:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Pārsvarā tiek izmantots necaurredzamībai, kad nepieciešams atbalstīt IE 8 un zemāk.
Vairāk informācijas
- W3C filtru efektu specifikācija
- http://html5-demos.appspot.com/static/css/filters/index.html
- Beneta Feely filtru galerija
- MDN dokumenti
- Vai es varu izmantot
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Izpratne par CSS filtru efektiem
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 18 * | 35 | Nē | 79 | 6 * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0–6,1 * |