Filtre CSS sú mocným nástrojom, ktorý môžu autori použiť na dosiahnutie rôznych vizuálnych efektov (podobne ako filtre Photoshopu pre prehliadač). Vlastnosť CSS filterposkytuje prístup k efektom, ako je rozmazanie alebo zmena farby na vykreslení prvku, pred jeho zobrazením. Filtre sa bežne používajú na úpravu vykreslenia obrázka, pozadia alebo ohraničenia.
Syntax je:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Pre túto hodnotu existuje niekoľko funkcií:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- na použitie SVG filtrovcustom()- "už čoskoro"
Môže byť použitých viac funkcií, oddelených medzerami.
.do-more-things ( filter: blur(20px) grayscale(20%); )Funkcie filtra
Ak chcete použiť vlastnosť filtra CSS, zadáte hodnotu pre jednu z nasledujúcich funkcií uvedených vyššie. Ak je hodnota neplatná, funkcia vráti hodnotu „žiadny“. Pokiaľ nie je uvedené inak, funkcie, ktoré majú hodnotu vyjadrenú znakom percenta (ako v 34%), akceptujú aj hodnotu vyjadrenú ako desatinné miesto (ako v 0,34).
Tu je ukážka, ktorá vám umožní trochu sa pohrať s jednotlivými filtrami:
odtiene sivej ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Skonvertuje vstupný obrázok na odtiene sivej. Hodnota „čiastky“ definuje podiel konverzie. Hodnota 100% je úplne v odtieňoch sivej. Hodnota 0% ponechá vstup nezmenený. Hodnoty medzi 0% a 100% sú lineárnymi multiplikátormi účinku. Ak parameter „množstvo“ chýba, použije sa hodnota 100%. Záporné hodnoty nie sú povolené.
sépia ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Skonvertuje vstupný obrázok na sépiový. Hodnota „čiastky“ definuje podiel konverzie. Hodnota 100% je úplne sépia. Hodnota 0 ponecháva vstup nezmenený. Hodnoty medzi 0% a 100% sú lineárnymi multiplikátormi účinku. Ak parameter „množstvo“ chýba, použije sa hodnota 100%. Záporné hodnoty nie sú povolené.
nasýtiť ()
filter: saturate(2); /* same as… */ filter: sature(200%);Nasýti vstupný obrázok. Hodnota „čiastky“ definuje podiel konverzie. Hodnota 0% je úplne nesýtená. Hodnota 100% ponechá vstup nezmenený. Ostatné hodnoty sú lineárne multiplikátory efektu. Hodnoty nad 100% sú povolené, čo poskytuje mimoriadne nasýtené výsledky. Ak parameter „množstvo“ chýba, použije sa hodnota 100%. Záporné hodnoty nie sú povolené.
otočenie odtieňa ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Použije na vstupný obrázok rotáciu odtieňov. Hodnota „uhol“ definuje počet stupňov okolo farebného kruhu, ktoré upravia vstupné vzorky. Hodnota 0 stupňov ponecháva vstup nezmenený. Ak parameter „uhol“ chýba, použije sa hodnota 0deg. Maximálna hodnota je 360deg.
invertovať ()
filter: invert(100%);Invertuje vzorky na vstupnom obrázku. Hodnota „čiastky“ definuje podiel konverzie. Hodnota 100% je úplne invertovaná. Hodnota 0% ponechá vstup nezmenený. Hodnoty medzi 0% a 100% sú lineárnymi multiplikátormi účinku. Ak parameter „množstvo“ chýba, použije sa hodnota 100%. Záporné hodnoty nie sú povolené.
nepriehľadnosť ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Použije priehľadnosť na vzorky na vstupnom obrázku. Hodnota „čiastky“ definuje podiel konverzie. Hodnota 0% je úplne transparentná. Hodnota 100% ponechá vstup nezmenený. Hodnoty medzi 0% a 100% sú lineárnymi multiplikátormi účinku. Toto je ekvivalent vynásobenia vzoriek vstupného obrázka počtom. Ak parameter „množstvo“ chýba, použije sa hodnota 100%. Táto funkcia je podobná zavedenejšej vlastnosti nepriehľadnosti; rozdiel je v tom, že s filtrami niektoré prehľadávače poskytujú hardvérovú akceleráciu pre lepší výkon. Záporné hodnoty nie sú povolené.
jas ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Použije na vstupný obrázok lineárny multiplikátor, vďaka ktorému bude pôsobiť viac alebo menej jasne. Hodnota 0% vytvorí obrázok, ktorý je úplne čierny. Hodnota 100% ponechá vstup nezmenený. Ostatné hodnoty sú lineárne multiplikátory efektu. Hodnoty nad 100% sú povolené, aby poskytovali jasnejšie výsledky. Ak parameter „množstvo“ chýba, použije sa hodnota 100%.
kontrast ()
filter: contrast(4); /* same as… */ filter: contrast(400%);Upravuje kontrast vstupu. Hodnota 0% vytvorí obrázok, ktorý je úplne čierny. Hodnota 100% ponechá vstup nezmenený. Hodnoty nad 100% sú povolené, poskytujú výsledky s menším kontrastom. Ak parameter „množstvo“ chýba, použije sa hodnota 100%.
rozmazať()
filter: blur(5px); filter: blur(1rem);Aplikuje na vstupný obraz Gaussovo rozostrenie. Hodnota „polomeru“ definuje hodnotu štandardnej odchýlky od Gaussovej funkcie alebo koľko pixelov na obrazovke sa navzájom zmieša, takže väčšia hodnota spôsobí väčšie rozmazanie. Ak nie je zadaný žiadny parameter, použije sa hodnota 0. Parameter je zadaný ako dĺžka CSS, ale neprijíma percentuálne hodnoty.
Vrhať tieň()
filter: drop-shadow((2,3) ?)Na vstupný obrázok použije efekt vrhaného tieňa. Vrhaný tieň je v skutočnosti rozmazaná, ofsetová verzia alfa masky vstupného obrázka nakreslená konkrétnou farbou, zložená pod obrázkom. Funkcia prijíma parameter typu (definovaný v prostredí CSS3 Backgrounds) s výnimkou, že kľúčové slovo „inset“ nie je povolené.
Táto funkcia je podobná viac zavedenej vlastnosti box-shadow; rozdiel je v tom, že s filtrami niektoré prehľadávače poskytujú hardvérovú akceleráciu pre lepší výkon.
Vrhaný tieň tiež prirodzene napodobňuje obrys zamýšľaných objektov, na rozdiel od box-shadowtoho sa za jeho cestu považuje iba rámček.
Rovnako ako v prípade textového tieňa, ani v tomto prípade neexistuje parameter „šírenia“, pomocou ktorého by sa vytvoril solídny tieň väčší ako objekt.
url ()
filter: url()url()Funkcia trvá umiestnenia súboru XML, ktorý určuje SVG filter, a môže zahŕňať kotvu k špecifickej filtračnej vložky. Tu je návod, ktorý funguje ako pekné predstavenie filtrov SVG so zábavnou ukážkou.
Animačné filtre
Pretože filtre sú animovateľné, môžu vám otvoriť dvere pre celú zábavu.
Poznámky
Na manipuláciu s vykreslením môžete kombinovať ľubovoľný počet funkcií, na poradí však stále záleží (tj použitie grayscale()po sepia()spôsobí úplne šedý výstup).
Vypočítaná hodnota iná ako „žiadna“ vedie k vytvoreniu kontextu stohovania rovnakým spôsobom, ako to robí opacita CSS. Vlastnosť filtra nemá žiadny vplyv na geometriu modelu poľa cieľového prvku, aj keď filtre môžu spôsobiť maľovanie mimo rámčeka prvku. Funkcie filtra ovplyvňujú všetky časti cieľového prvku. Zahŕňa to akýkoľvek obsah, pozadie, ohraničenia, dekoráciu textu, obrysový a viditeľný mechanizmus posúvania prvku, na ktorý sa filter aplikuje, a mechanizmov jeho potomkov. Filtre je možné použiť aj na vložený obsah, napríklad na jednotlivé rozpätia textu.
Špecifikácia tiež zavádza funkciu filter(image-URL, filter-functions)obálky obrázka. Umožnilo by vám to filtrovať akýkoľvek obrázok v čase, keď ho použijete v CSS. Môžete napríklad rozmazať obrázok na pozadí bez rozmazania textu. Prehliadače túto funkciu filtra zatiaľ nepodporujú. Medzitým môžete na pseudoelement použiť pozadie aj filter, aby ste vytvorili podobný efekt.
Patentovaný filter pre IE
Tiež sa používa filtervlastnosť, napríklad:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Väčšinou sa používa na nepriehľadnosť, keď ste potrebovali podporovať IE 8 a starší.
Viac informácií
- Špecifikácia efektov filtra W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galéria filtrov Bennetta Feelyho
- Dokumenty MDN
- Môžem použiť
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Pochopenie efektov filtra CSS
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 18 * | 35 | Nie | 79 | 6 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |