A CSS-szűrők egy hatékony eszköz, amelyet a szerzők különböző vizuális effektusok (például a böngésző Photoshop-szűrői) elérésére használhatnak. A CSS filtertulajdonság hozzáférést biztosít olyan effektekhez, mint az elmosódás vagy a színeltolás az elem megjelenítésén, mielőtt az elem megjelenik. A szűrőket általában a kép, a háttér vagy a szegély megjelenítésének beállítására használják.
A szintaxis a következő:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Számos függvény használható az értékhez:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- SVG szűrők alkalmazásáhozcustom()- "hamarosan"
Több funkció is használható, szóközzel elválasztva.
.do-more-things ( filter: blur(20px) grayscale(20%); )Szűrőfunkciók
A CSS szűrő tulajdonságának használatához meg kell adnia egy értéket a fent felsorolt alábbi funkciók egyikéhez. Ha az érték érvénytelen, a függvény értéke „semmi”. Hacsak nem említettük, azok a függvények, amelyek százalékjelben kifejezett értéket vesznek fel (mint 34%), elfogadják a tizedesértékben kifejezett értéket (mint 0,34).
Itt van egy bemutató, amely lehetővé teszi az egyéni szűrőkkel való játékot:
szürkeárnyalatos ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);A bemeneti képet szürkeárnyalattá alakítja. Az „összeg” értéke határozza meg a konverzió arányát. A 100% -os érték teljesen szürkeárnyalatos. A 0% -os érték változatlanul hagyja az inputot. A 0% és 100% közötti értékek lineáris szorzók a hatásra. Ha hiányzik az „összeg” paraméter, akkor 100% -os értéket használunk. Negatív értékek nem megengedettek.
szépia()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);A bemeneti képet szépiává alakítja. Az „összeg” értéke határozza meg a konverzió arányát. A 100% -os érték teljesen szépia. A 0 érték változatlanul hagyja az inputot. A 0% és 100% közötti értékek lineáris szorzók a hatásra. Ha hiányzik az „összeg” paraméter, akkor 100% -os értéket használunk. Negatív értékek nem megengedettek.
telít ()
filter: saturate(2); /* same as… */ filter: sature(200%);Telíti a bemeneti képet. Az „összeg” értéke határozza meg a konverzió arányát. A 0% -os érték telítetlen. 100% -os érték változatlanul hagyja az inputot. Más értékek lineáris szorzók a hatásra. A 100% feletti értékek megengedettek, szupertelített eredményeket nyújtva. Ha hiányzik az „összeg” paraméter, akkor 100% -os értéket használunk. Negatív értékek nem megengedettek.
árnyalat-forgatás ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Színárnyalatot alkalmaz a bemeneti képen. A „szög” értéke határozza meg a színkör körüli fokok számát, amelyet a bemeneti minták ki fognak igazítani. A 0deg érték változatlanul hagyja az inputot. Ha a „szög” paraméter hiányzik, akkor egy értéket 0deghasználunk. A maximális érték 360deg.
invert ()
filter: invert(100%);Megfordítja a bemeneti kép mintáit. Az „összeg” értéke határozza meg a konverzió arányát. A 100% -os érték teljesen megfordított. A 0% -os érték változatlanul hagyja az inputot. A 0% és 100% közötti értékek lineáris szorzók a hatásra. Ha hiányzik az „összeg” paraméter, akkor 100% -os értéket használunk. Negatív értékek nem megengedettek.
átlátszatlanság()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Átlátszóságot alkalmaz a bemeneti kép mintáira. Az „összeg” értéke határozza meg a konverzió arányát. A 0% -os érték teljesen átlátszó. 100% -os érték változatlanul hagyja az inputot. A 0% és 100% közötti értékek lineáris szorzók a hatásra. Ez egyenértékű a bemeneti képminták összeggel való szorzásával. Ha hiányzik az „összeg” paraméter, akkor 100% -os értéket használunk. Ez a funkció hasonlít a bevettebb átlátszatlansági tulajdonsághoz; A különbség az, hogy a szűrőkkel egyes böngészők hardveres gyorsítást biztosítanak a jobb teljesítmény érdekében. Negatív értékek nem megengedettek.
Fényerősség()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Lineáris szorzót alkalmaz a bemeneti képre, így többé-kevésbé világosnak tűnik. A 0% -os érték teljesen fekete képet hoz létre. 100% -os érték változatlanul hagyja az inputot. Más értékek lineáris szorzók a hatásra. 100% feletti érték megengedett, fényesebb eredményt nyújtva. Ha hiányzik az „összeg” paraméter, akkor 100% -os értéket használunk.
kontraszt()
filter: contrast(4); /* same as… */ filter: contrast(400%);Beállítja a bemenet kontrasztját. A 0% -os érték teljesen fekete képet hoz létre. 100% -os érték változatlanul hagyja az inputot. A 100% feletti összeg feletti értékek megengedettek, így kevésbé kontrasztosak az eredmények. Ha hiányzik az „összeg” paraméter, akkor 100% -os értéket használunk.
elhomályosít()
filter: blur(5px); filter: blur(1rem);Gauss-féle elmosódást alkalmaz a bemeneti képen. A „sugár” értéke meghatározza a Gauss-függvényhez tartozó szórás értékét, vagy azt, hogy a képernyőn hány képpont keveredik egymásba, így egy nagyobb érték nagyobb elmosódást eredményez. Ha nincs megadva paraméter, akkor 0 értéket használunk. A paraméter CSS-hosszként van megadva, de nem fogadja el a százalékos értékeket.
árnyék()
filter: drop-shadow((2,3) ?)Árnyékhatás alkalmazza a bemeneti képet. Az árnyék a bemeneti kép alfa maszkjának elmosódott, eltolt változata, amely egy adott színnel van rajzolva, a kép alá komponálva. A függvény elfogad egy típusú paramétert (a CSS3 hátterében definiálva), azzal a kivétellel, hogy a 'beillesztés' kulcsszó nem engedélyezett.
Ez a funkció hasonlít a bevettebb box-shadow tulajdonsághoz; A különbség az, hogy a szűrőkkel egyes böngészők hardveres gyorsítást biztosítanak a jobb teljesítmény érdekében.
A Drop-Shadow a tervezett objektumokat természetesen utánozza, ellentétben azzal, box-shadowhogy csak a dobozt kezeli az útjaként.
Csakúgy, mint a text-shadow esetében, nincs "spread" paraméter az objektumnál nagyobb szilárd árnyék létrehozásához.
URL ()
filter: url()A url()függvény egy XML-fájl helyét veszi át, amely meghatározza az SVG-szűrőt, és horgonyt tartalmazhat egy adott szűrőelemhez. Itt van egy oktatóanyag, amely egy jó bemutatóként működik az SVG-szűrők számára, szórakoztató bemutatóval.
Szűrők animálása
Mivel a szűrők animálhatók, egy csomó szórakozáshoz nyithatják meg az ajtókat.
Megjegyzések
A megjelenítés manipulálásához tetszőleges számú funkció kombinálható, de a sorrend továbbra is számít (azaz az grayscale()after használata sepia()teljesen szürke kimenetet eredményez).
A „nincs” értéktől eltérő számított érték egy halmozási kontextus létrehozását eredményezi, ugyanúgy, mint a CSS átlátszatlansága. A szűrő tulajdonság nincs hatással a célelem dobozmodelljének geometriájára, annak ellenére, hogy a szűrők festést okozhatnak az elem határdobozán kívül. A célelem bármely részét érintik a szűrőfunkciók. Ez magában foglalja annak az elemnek a tartalmát, hátterét, szegélyeit, szövegdíszítését, körvonalát és látható görgetési mechanizmusát, amelyre a szűrőt alkalmazzák, és annak leszármazottaira. A szűrők alkalmazhatók az inline tartalomra is, például az egyes szöveges szakaszokra.
A specifikáció filter(image-URL, filter-functions)egy kép burkoló funkcióját is bevezeti . Ez lehetővé tenné, hogy a CSS-ben történő felhasználáskor bármilyen képet szűrjön. Például elmoshatja a háttérképet a szöveg elmosása nélkül. Ez a szűrő funkció még nem támogatott a böngészőkben. Időközben alkalmazhatja a hátteret és a szűrőt egy álelemre, hogy hasonló hatást hozzon létre.
Az IE saját szűrő cuccai
Használta az filteringatlant, például:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Leginkább az átlátszatlanságra használják, amikor az IE 8 és a továbbiak támogatására van szükség.
Több információ
- W3C szűrőeffektusok specifikációja
- http://html5-demos.appspot.com/static/css/filters/index.html
- Feely Bennett Szűrők Galériája
- MDN Docs
- Használhatom
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- A CSS szűrőeffektusok megértése
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 18 * | 35 | Nem | 79 | 6 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0–6,1 * |