CSS filtri so močno orodje, s katerim avtorji dosežejo različne vizualne učinke (podobno kot filtri Photoshop za brskalnik). Lastnost CSS filteromogoča dostop do učinkov, kot sta zamegljenost ali spreminjanje barv na upodabljanju elementa, preden je element prikazan. Filtri se običajno uporabljajo za prilagoditev upodabljanja slike, ozadja ali obrobe.
Sintaksa je:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Za vrednost lahko uporabite številne funkcije:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- za uporabo SVG filtrovcustom()- "prihaja kmalu"
Uporabite lahko več funkcij, ločene s presledkom.
.do-more-things ( filter: blur(20px) grayscale(20%); )Funkcije filtriranja
Če želite uporabiti lastnost filtra CSS, podate vrednost za eno od naslednjih funkcij, navedenih zgoraj. Če je vrednost neveljavna, funkcija vrne »nič«. Funkcije, ki zavzamejo vrednost, izraženo z znakom odstotka (kot pri 34%), sprejemajo tudi vrednost, izraženo kot decimalna vrednost (kot v 0,34), razen kadar je navedeno.
Tu je predstavitev, ki vam omogoča, da se nekoliko poigrate s posameznimi filtri:
sivine ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Pretvori vhodno sliko v sivine. Vrednost "znesek" določa delež konverzije. Vrednost 100% je popolnoma sivina. Vrednost 0% pusti vnos nespremenjen. Vrednosti med 0% in 100% so linearni multiplikatorji učinka. Če manjka parameter "znesek", se uporabi vrednost 100%. Negativne vrednosti niso dovoljene.
sepija ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Pretvori vhodno sliko v sepijo. Vrednost "znesek" določa delež konverzije. Vrednost 100% je popolnoma sepija. Vrednost 0 ostane vhod nespremenjena. Vrednosti med 0% in 100% so linearni multiplikatorji učinka. Če manjka parameter "znesek", se uporabi vrednost 100%. Negativne vrednosti niso dovoljene.
nasičiti ()
filter: saturate(2); /* same as… */ filter: sature(200%);Nasiči vhodno sliko. Vrednost "znesek" določa delež konverzije. Vrednost 0% je popolnoma nenasičena. Vrednost 100% ostane vnos nespremenjen. Druge vrednosti so linearni multiplikatorji učinka. Dovoljene so vrednosti nad 100%, ki zagotavljajo prenasičene rezultate. Če manjka parameter "znesek", se uporabi vrednost 100%. Negativne vrednosti niso dovoljene.
zavrtite odtenek ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Uporabi zasuk odtenka na vhodni sliki. Vrednost "kota" določa število stopinj okoli barvnega kroga, ki ga bodo prilagodili vhodni vzorci. Vrednost 0deg pusti vnos nespremenjen. Če parameter "kot" manjka, se uporabi vrednost 0deg. Najvišja vrednost je 360deg.
invert ()
filter: invert(100%);Obrne vzorce na vhodni sliki. Vrednost "znesek" določa delež konverzije. Vrednost 100% je popolnoma obrnjena. Vrednost 0% pusti vnos nespremenjen. Vrednosti med 0% in 100% so linearni multiplikatorji učinka. Če manjka parameter "znesek", se uporabi vrednost 100%. Negativne vrednosti niso dovoljene.
motnost ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Uporabi prosojnost vzorcev na vhodni sliki. Vrednost "znesek" določa delež konverzije. Vrednost 0% je popolnoma pregledna. Vrednost 100% ostane vnos nespremenjen. Vrednosti med 0% in 100% so linearni multiplikatorji učinka. To je enakovredno množenju vzorcev vhodne slike s količino. Če manjka parameter "znesek", se uporabi vrednost 100%. Ta funkcija je podobna bolj uveljavljeni lastnosti motnosti; razlika je v tem, da nekateri filtri s filtri zagotavljajo strojno pospeševanje za boljše delovanje. Negativne vrednosti niso dovoljene.
svetlost ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Uporabi linearni množitelj za vhodno sliko, zaradi česar je videti bolj ali manj svetla. Vrednost 0% bo ustvarila sliko, ki je popolnoma črna. Vrednost 100% ostane vnos nespremenjen. Druge vrednosti so linearni multiplikatorji učinka. Dovoljene so vrednosti nad 100%, kar zagotavlja svetlejše rezultate. Če manjka parameter "znesek", se uporabi vrednost 100%.
kontrast ()
filter: contrast(4); /* same as… */ filter: contrast(400%);Prilagodi kontrast vhoda. Vrednost 0% bo ustvarila sliko, ki je popolnoma črna. Vrednost 100% ostane vnos nespremenjen. Vrednosti, ki presegajo 100%, so dovoljene, rezultati pa so manj kontrastni. Če manjka parameter "znesek", se uporabi vrednost 100%.
zameglitev ()
filter: blur(5px); filter: blur(1rem);Na vhodno sliko uporabi Gaussov zameglitev. Vrednost 'radij' določa vrednost standardnega odklona na Gaussovo funkcijo ali koliko slikovnih pik na zaslonu se zlije ena v drugo, zato bo večja vrednost ustvarila več zamegljenosti. Če ni naveden noben parameter, se uporabi vrednost 0. Parameter je določen kot dolžina CSS, vendar ne sprejema odstotkovnih vrednosti.
padajoča senca ()
filter: drop-shadow((2,3) ?)Za vhodno sliko uporabi učinek senčenja. Spuščena senca je dejansko zamegljena, odmična različica alfa maske vhodne slike, narisane v določeni barvi, sestavljena pod sliko. Funkcija sprejema parameter tipa (definiran v CSS3 Backgrounds), z izjemo, da ključna beseda 'inset' ni dovoljena.
Ta funkcija je podobna bolj uveljavljeni lastnosti box-shadow; razlika je v tem, da nekateri filtri s filtri zagotavljajo strojno pospeševanje za boljše delovanje.
Drop-shadow prav tako posnema predvidene orise predmetov, naravno, v nasprotju s box-shadowtem, da samo polje obravnava kot svojo pot.
Tako kot pri text-shadow tudi tukaj ni parametra 'spread', ki bi ustvaril trdno senco, večjo od predmeta.
url ()
filter: url()url()Funkcijo prevzame mesto datoteke XML, ki določa filter SVG, in lahko vključujejo sidro do posebne filtrirni element. Tukaj je vadnica, ki deluje kot lep uvod v filtre SVG z zabavnim predstavitvijo.
Animirajoči filtri
Ker so filtri animirani, lahko odpre vrata za cel kup zabave.
Opombe
Za manipulacijo upodabljanja lahko kombinirate poljubno število funkcij, vendar je vrstni red še vedno pomemben (tj. Uporaba grayscale()pozneje sepia()bo povzročila popolnoma siv izhod).
Izračunana vrednost, ki ni "nič", povzroči ustvarjanje konteksta zlaganja na enak način kot neprosojnost CSS. Lastnost filtra nima vpliva na geometrijo modela polja ciljnega elementa, čeprav lahko filtri povzročijo barvanje zunaj mejnega polja elementa. Funkcije filtra vplivajo na vse dele ciljnega elementa. To vključuje kakršno koli vsebino, ozadje, obrobe, okrasitev besedila, oris in viden mehanizem za pomikanje elementa, na katerega je filter uporabljen, in njegovih potomcev. Filtre lahko uporabite tudi za vstavljeno vsebino, na primer posamezne razpone besedila.
Specifikacija uvaja tudi filter(image-URL, filter-functions)funkcijo zavijanja slike. Omogočil bi vam filtriranje katere koli slike, ko jo uporabite v CSS. Tako lahko na primer zameglite sliko ozadja, ne da bi zameglili besedilo. Ta funkcija filtra še ni podprta v brskalnikih. Medtem lahko za ozadje in filter uporabite psevdo-element, da ustvarite podoben učinek.
Lastniške vsebine IE
Uporabil je tudi filterlastnost, kot so:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Večinoma se uporablja za motnost, kadar potrebujete podporo za IE 8 in manj.
Več informacij
- Specifikacija filtra W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galerija filtrov Bennetta Feelyja
- Dokumenti MDN
- Ali lahko uporabim
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Razumevanje učinkov filtra CSS
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 18 * | 35 | Ne | 79 | 6 * |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |