CSS filtri snažni su alat koji autori mogu koristiti za postizanje različitih vizualnih efekata (poput Photoshop filtara za preglednik). filterSvojstvo CSS omogućuje pristup efektima poput zamućenja ili pomicanja boja na prikazivanju elementa prije nego što se element prikaže. Filteri se obično koriste za podešavanje prikaza slike, pozadine ili obruba.
Sintaksa je:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Postoji niz funkcija koje treba koristiti za vrijednost:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- za primjenu SVG filtaracustom()- "dolazi uskoro"
Može se koristiti više funkcija, odvojenih razmakom.
.do-more-things ( filter: blur(20px) grayscale(20%); )Funkcije filtra
Da biste koristili svojstvo CSS filtra, odredite vrijednost za jednu od sljedećih gore navedenih funkcija. Ako je vrijednost nevaljana, funkcija vraća "none". Osim tamo gdje je navedeno, funkcije koje poprimaju vrijednost izraženu znakom postotka (kao u 34%) također prihvaćaju vrijednost izraženu u decimalu (kao u 0,34).
Evo demonstracije koja vam omogućuje da se malo poigrate s pojedinačnim filtrima:
sive ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Pretvara ulaznu sliku u sive tonove. Vrijednost "iznosa" definira udio konverzije. Vrijednost od 100% potpuno je sive. Vrijednost od 0% ostavlja ulaz nepromijenjenim. Vrijednosti između 0% i 100% linearni su množitelji učinka. Ako parametar "iznos" nedostaje, koristi se vrijednost od 100%. Negativne vrijednosti nisu dopuštene.
sepija()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Pretvara ulaznu sliku u sepiju. Vrijednost "iznosa" definira udio konverzije. Vrijednost od 100% potpuno je sepija. Vrijednost 0 ostavlja ulaz nepromijenjenim. Vrijednosti između 0% i 100% linearni su množitelji učinka. Ako parametar "iznos" nedostaje, koristi se vrijednost od 100%. Negativne vrijednosti nisu dopuštene.
zasititi()
filter: saturate(2); /* same as… */ filter: sature(200%);Zasićuje ulaznu sliku. Vrijednost "iznosa" definira udio konverzije. Vrijednost od 0% potpuno je nezasićena. Vrijednost od 100% ostavlja ulaz nepromijenjenim. Ostale vrijednosti su linearni multiplikatori na učinak. Vrijednosti preko 100% su dopuštene, pružajući super zasićene rezultate. Ako parametar "iznos" nedostaje, koristi se vrijednost od 100%. Negativne vrijednosti nisu dopuštene.
zakretanje nijanse ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Primjenjuje rotaciju nijanse na ulaznoj slici. Vrijednost "kut" definira broj stupnjeva oko kruga boje koji će se prilagoditi ulazni uzorci. Vrijednost 0deg ostavlja ulaz nepromijenjenim. Ako parametar "kut" nedostaje, koristi se vrijednost 0deg. Maksimalna vrijednost je 360deg.
invert ()
filter: invert(100%);Obrne uzorke na ulaznoj slici. Vrijednost "iznosa" definira udio konverzije. Vrijednost od 100% potpuno je obrnuta. Vrijednost od 0% ostavlja ulaz nepromijenjenim. Vrijednosti između 0% i 100% linearni su množitelji učinka. Ako parametar "iznos" nedostaje, koristi se vrijednost od 100%. Negativne vrijednosti nisu dopuštene.
neprozirnost()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Primjenjuje prozirnost na uzorke na ulaznoj slici. Vrijednost "iznosa" definira udio konverzije. Vrijednost od 0% potpuno je prozirna. Vrijednost od 100% ostavlja ulaz nepromijenjenim. Vrijednosti između 0% i 100% linearni su množitelji učinka. To je ekvivalentno množenju uzoraka ulazne slike s količinom. Ako parametar "iznos" nedostaje, koristi se vrijednost od 100%. Ova je funkcija slična utvrđenom svojstvu neprozirnosti; razlika je u tome što s filtrima neki preglednici pružaju hardversko ubrzanje radi boljih performansi. Negativne vrijednosti nisu dopuštene.
svjetlina ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Primjenjuje linearni množitelj na ulaznu sliku, čineći je da izgleda više ili manje svijetla. Vrijednost od 0% stvorit će sliku koja je potpuno crna. Vrijednost od 100% ostavlja ulaz nepromijenjenim. Ostale vrijednosti su linearni multiplikatori na učinak. Vrijednosti iznosa preko 100% su dopuštene, pružajući svjetlije rezultate. Ako parametar "iznos" nedostaje, koristi se vrijednost od 100%.
kontrast()
filter: contrast(4); /* same as… */ filter: contrast(400%);Podešava kontrast ulaza. Vrijednost od 0% stvorit će sliku koja je potpuno crna. Vrijednost od 100% ostavlja ulaz nepromijenjenim. Vrijednosti preko 100% dopuštene su, pružajući rezultate s manje kontrasta. Ako parametar "iznos" nedostaje, koristi se vrijednost od 100%.
zamagljivanje ()
filter: blur(5px); filter: blur(1rem);Primijenjuje Gaussov zamućenje na ulaznu sliku. Vrijednost 'radijusa' definira vrijednost standardnog odstupanja od Gaussove funkcije ili koliko se piksela na zaslonu stapa jedan u drugi, pa će veća vrijednost stvoriti više zamućenja. Ako nije naveden parametar, tada se koristi vrijednost 0. Parametar je naveden kao CSS duljina, ali ne prihvaća postotne vrijednosti.
pad-sjena ()
filter: drop-shadow((2,3) ?)Primjenjuje efekt pada sjene na ulaznu sliku. Sjena je efekt zamućena, pomaknuta verzija alfa maske ulazne slike nacrtane u određenoj boji, sastavljena ispod slike. Funkcija prihvaća parametar tipa (definiran u CSS3 Pozadine), s tim da ključna riječ 'inset' nije dopuštena.
Ova je funkcija slična ustaljenijem svojstvu box-shadow; razlika je u tome što s filtrima neki preglednici pružaju hardversko ubrzanje radi boljih performansi.
Drop-shadow također oponaša predviđeni obris predmeta, naravno, za razliku od toga box-shadowda samo okvir tretira kao svoj put.
Kao i kod text-shadow, ne postoji parametar 'širenja' koji bi stvorio čvrstu sjenu veću od objekta.
url ()
filter: url()url()Funkcija uzima mjesto u XML datoteku koja određuje se SVG filtar, a može uključivati i sidro na element specifičan za filtriranje. Evo vodiča koji predstavlja lijep uvod u SVG filtere sa zabavnim demo.
Animirajući filtri
Budući da su Filteri animirani, može otvoriti vrata za čitavu hrpu zabave.
Bilješke
Možete kombinirati bilo koji broj funkcija za manipulaciju prikazivanjem, ali redoslijed je i dalje važan (tj. Upotreba grayscale()after sepia()rezultirat će potpuno sivim izlazom).
Izračunata vrijednost različita od "none" rezultira stvaranjem konteksta slaganja na isti način kao što to čini neprozirnost CSS-a. Svojstvo filtra nema utjecaja na geometriju modela okvira ciljnog elementa, iako filtri mogu uzrokovati slikanje izvan okvira okvira elementa. Funkcije filtra utječu na bilo koji dijelovi ciljnog elementa. To uključuje sav sadržaj, pozadinu, obrube, ukras teksta, obrise i mehanizam vidljivog pomicanja elementa na koji je primijenjen filtar i njegovih potomaka. Filteri se mogu primijeniti i na ugrađeni sadržaj, poput pojedinačnih raspona teksta.
Specifikacija također uvodi filter(image-URL, filter-functions)funkciju omotavanja slike. Omogućio bi vam filtriranje bilo koje slike u trenutku kada je koristite u CSS-u. Na primjer, možete zamutiti pozadinsku sliku bez zamućenja teksta. Ova funkcija filtra još nije podržana u preglednicima. U međuvremenu možete primijeniti pozadinu i filtar na pseudo-element kako biste stvorili sličan efekt.
IE zaštićeni filtri
Također se koristio filtersvojstvo, poput:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Uglavnom se koristi za neprozirnost kada trebate podržati IE 8 i niže.
Više informacija
- Specifikacija efekata filtra W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galerija filtera Bennetta Feelyja
- MDN dokumenti
- Mogu li koristiti
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Razumijevanje CSS efekata filtra
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 18 * | 35 | Ne | 79 | 6 * |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |