CSS-suodattimet ovat tehokas työkalu, jota kirjoittajat voivat käyttää erilaisten visuaalisten tehosteiden aikaansaamiseen (kuten Photoshop-suodattimet selaimelle). CSS- filterominaisuus tarjoaa pääsyn efekteihin, kuten epätarkkuuteen tai värinsiirtoon elementin renderöinnissä ennen elementin näyttämistä. Suodattimia käytetään yleisesti kuvan, taustan tai reunuksen renderointiin.
Syntaksi on:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Arvolle voidaan käyttää useita toimintoja:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- SVG-suodattimien käyttämiseencustom()- "tulossa pian"
Useita toimintoja voidaan käyttää, erotettu tilasta.
.do-more-things ( filter: blur(20px) grayscale(20%); )Suodatintoiminnot
Jos haluat käyttää CSS-suodatinta, määritä arvo jollekin seuraavista yllä luetelluista toiminnoista. Jos arvo on virheellinen, funktio palauttaa arvon "ei mitään". Lukuun ottamatta mainintoja, funktiot, jotka ottavat arvon, joka ilmaistaan prosenttimerkillä (kuten 34%), hyväksyvät myös desimaalina ilmaistun arvon (kuten 0,34).
Tässä on demo, jonka avulla voit pelata vähän yksittäisillä suodattimilla:
harmaasävy ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Muuntaa syötetyn kuvan harmaasävyksi. ”Summan” arvo määrittää muunnoksen osuuden. 100% arvo on täysin harmaasävy. Arvo 0% jättää syötteen muuttumattomaksi. Arvot 0% - 100% ovat lineaarisia kerrannaisia vaikutukselle. Jos “määrä” -parametri puuttuu, käytetään arvoa 100%. Negatiivisia arvoja ei sallita.
seepia()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Muuntaa syötetyn kuvan seepiaksi. ”Summan” arvo määrittää muunnoksen osuuden. 100% arvo on täysin seepia. Arvo 0 jättää syötteen muuttumattomaksi. Arvot 0% - 100% ovat lineaarisia kerrannaisia vaikutukselle. Jos “määrä” -parametri puuttuu, käytetään arvoa 100%. Negatiivisia arvoja ei sallita.
kyllästää ()
filter: saturate(2); /* same as… */ filter: sature(200%);Kyllästää syötetyn kuvan. ”Summan” arvo määrittää muunnoksen osuuden. Arvo 0% on täysin tyydyttymätön. 100% arvo jättää syötteen ennalleen. Muut arvot ovat lineaarisia kerrannaisia vaikutukselle. Yli 100%: n arvot ovat sallittuja, jolloin saadaan erittäin kylläisiä tuloksia. Jos “määrä” -parametri puuttuu, käytetään arvoa 100%. Negatiivisia arvoja ei sallita.
kiertää ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Lisää tulokuvaan sävykierron. “Kulman” arvo määrittelee asteiden määrän väripyörän ympärillä, jota syötenäytteet säätävät. Arvo 0 astetta jättää syötteen muuttumattomaksi. Jos “kulma” -parametri puuttuu, käytetään arvoa 0deg. Suurin arvo on 360deg.
kääntää ()
filter: invert(100%);Kääntää syötekuvan näytteet. ”Summan” arvo määrittää muunnoksen osuuden. 100%: n arvo on täysin käänteinen. Arvo 0% jättää syötteen muuttumattomaksi. Arvot 0% - 100% ovat lineaarisia kerrannaisia vaikutukselle. Jos “määrä” -parametri puuttuu, käytetään arvoa 100%. Negatiivisia arvoja ei sallita.
opasiteetti ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Lisää läpinäkyvyyttä syötekuvan näytteisiin. ”Summan” arvo määrittää muunnoksen osuuden. Arvo 0% on täysin läpinäkyvä. 100% arvo jättää syötteen ennalleen. Arvot 0% - 100% ovat lineaarisia kerrannaisia vaikutukselle. Tämä vastaa tulokuvanäytteiden kertomista määrällä. Jos “määrä” -parametri puuttuu, käytetään arvoa 100%. Tämä toiminto on samanlainen kuin vakiintuneempi opasiteettiominaisuus; ero on se, että suodattimien avulla jotkin selaimet tarjoavat laitteistokiihdytyksen paremman suorituskyvyn saavuttamiseksi. Negatiivisia arvoja ei sallita.
kirkkaus()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Lisää tulokuvaan lineaarisen kertoimen, jolloin se näyttää enemmän tai vähemmän kirkkaalta. Arvo 0% luo kuvan, joka on täysin musta. 100% arvo jättää syötteen ennalleen. Muut arvot ovat lineaarisia kerrannaisia vaikutukselle. Yli 100-prosenttiset arvot ovat sallittuja, mikä antaa kirkkaampia tuloksia. Jos “määrä” -parametri puuttuu, käytetään arvoa 100%.
kontrasti()
filter: contrast(4); /* same as… */ filter: contrast(400%);Säätää tulon kontrastia. Arvo 0% luo kuvan, joka on täysin musta. 100% arvo jättää syötteen ennalleen. Yli 100 prosentin arvot ovat sallittuja, jolloin tulokset ovat vähemmän kontrastisia. Jos “määrä” -parametri puuttuu, käytetään arvoa 100%.
hämärtää()
filter: blur(5px); filter: blur(1rem);Lisää Gaussin epätarkkuuden kuvaan. Säteen arvo määrittää Gaussin funktion keskihajonnan arvon tai kuinka monta näytön pikseliä sulautuu toisiinsa, joten suurempi arvo luo enemmän epätarkkuutta. Jos parametria ei anneta, käytetään arvoa 0. Parametri määritetään CSS-pituudeksi, mutta se ei hyväksy prosentuaalisia arvoja.
varjo ()
filter: drop-shadow((2,3) ?)Lisää varjokuvatehosteen tulokuvaan. Varjo on käytännössä hämärtynyt, offset-versio syötetyn kuvan alfa-maskista, joka on piirretty tietyllä värillä, yhdistettynä kuvan alle. Funktio hyväksyy tyyppisen parametrin (määritelty CSS3-taustoissa), paitsi että 'inset' -avainsana ei ole sallittu.
Tämä toiminto on samanlainen kuin vakiintuneempi ruutu-varjo-ominaisuus; ero on se, että suodattimien avulla jotkin selaimet tarjoavat laitteistokiihdytyksen paremman suorituskyvyn saavuttamiseksi.
Drop-shadow myös jäljittelee aiottujen esineiden luonnetta luonnollisesti, toisin kuin box-shadowvain laatikkoa poluksi.
Aivan kuten tekstivarjon kohdalla, ei ole "levitä" -parametria objektia suuremman kiinteän varjon luomiseksi.
URL ()
filter: url()url()Toiminto ottaa sijainnin XML-tiedoston, joka määrittää SVG-suodatin, ja se voi sisältää ankkuri tiettyyn suodatinelementin. Tässä on opetusohjelma, joka toimii mukavana SVG-suodattimien esittelynä hauskalla esittelyllä.
Suodattimien animointi
Koska suodattimet ovat animoitavia, se voi avata ovet koko joukolle hauskaa.
Huomautuksia
Voit yhdistää minkä tahansa määrän toimintoja manipuloida tekee, mutta järjestys silti väliä (eli käyttämällä grayscale()jälkeen sepia()johtaa kokonaan harmaa lähtö).
Laskettu arvo, joka ei ole ”ei”, johtaa pinoamiskontekstin luomiseen samalla tavalla kuin CSS: n peittävyys. Suodatinominaisuudella ei ole vaikutusta kohde-elementin laatikkomallin geometriaan, vaikka suodattimet voivat aiheuttaa maalaamisen elementin reunuksen ulkopuolella. Suodatintoiminnot vaikuttavat kaikkiin kohde-elementin osiin. Tämä sisältää minkä tahansa sisällön, taustan, reunukset, tekstin koristelun, ääriviivat ja näkyvän vieritysmekanismin elementistä, johon suodatinta käytetään, ja sen jälkeläisistä. Suodattimia voidaan käyttää myös sisäiseen sisältöön, kuten yksittäisiin tekstialueisiin.
Spesifikaatio esittelee filter(image-URL, filter-functions)myös kuvan käärintätoiminnon. Sen avulla voit suodattaa minkä tahansa kuvan, kun käytät sitä CSS: ssä. Voit esimerkiksi hämärtää taustakuvan sumentamatta tekstiä. Tätä suodatintoimintoa ei vielä tueta selaimissa. Sillä välin voit käyttää sekä taustaa että suodatinta näennäiselementtiin samanlaisen vaikutuksen luomiseksi.
IE: n oma suodatinjuttu
Käytti myös filteromaisuutta, kuten:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Käytetään enimmäkseen peittävyyteen, kun sinun on tuettava IE 8: ta ja sitä alempia.
Lisää tietoa
- W3C-suodatinvaikutusten määrittely
- http://html5-demos.appspot.com/static/css/filters/index.html
- Bennett Feely's Filters Gallery
- MDN-dokumentit
- Voinko käyttää
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- CSS-suodatintehosteiden ymmärtäminen
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 18 * | 35 | Ei | 79 | 6 * |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |