Filtry CSS jsou mocným nástrojem, který mohou autoři použít k dosažení různých vizuálních efektů (podobně jako filtry Photoshopu pro prohlížeč). Vlastnost CSS filterposkytuje přístup k efektům, jako je rozmazání nebo posun barev při vykreslování prvku, než se prvek zobrazí. Filtry se běžně používají k úpravě vykreslení obrázku, pozadí nebo ohraničení.
Syntaxe je:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Pro hodnotu je možné použít několik funkcí:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- pro použití filtrů SVGcustom()- "již brzy"
Lze použít více funkcí oddělených mezerou.
.do-more-things ( filter: blur(20px) grayscale(20%); )Funkce filtru
Chcete-li použít vlastnost filtru CSS, zadáte hodnotu pro jednu z následujících funkcí uvedených výše. Pokud je hodnota neplatná, funkce vrátí „žádný“. Pokud není uvedeno jinak, funkce, které mají hodnotu vyjádřenou znaménkem procenta (jako v 34%), také přijímají hodnotu vyjádřenou jako desetinné číslo (jako v 0,34).
Zde je ukázka, která vám umožní trochu si hrát s jednotlivými filtry:
stupně šedi ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Převede vstupní obrázek na stupně šedi. Hodnota „částky“ určuje podíl převodu. Hodnota 100% je zcela ve stupních šedi. Hodnota 0% ponechá vstup beze změny. Hodnoty mezi 0% a 100% jsou lineární multiplikátory efektu. Pokud parametr „množství“ chybí, použije se hodnota 100%. Záporné hodnoty nejsou povoleny.
sépie()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Převede vstupní obraz na sépiový. Hodnota „částky“ určuje podíl převodu. Hodnota 100% je zcela sépiová. Hodnota 0 ponechá vstup beze změny. Hodnoty mezi 0% a 100% jsou lineární multiplikátory efektu. Pokud parametr „množství“ chybí, použije se hodnota 100%. Záporné hodnoty nejsou povoleny.
saturovat()
filter: saturate(2); /* same as… */ filter: sature(200%);Nasycuje vstupní obraz. Hodnota „částky“ určuje podíl převodu. Hodnota 0% je zcela nenasycená. Hodnota 100% ponechá vstup beze změny. Ostatní hodnoty jsou lineární multiplikátory účinku. Jsou povoleny hodnoty vyšší než 100%, které poskytují super-nasycené výsledky. Pokud parametr „množství“ chybí, použije se hodnota 100%. Záporné hodnoty nejsou povoleny.
odstín rotace ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Aplikuje rotaci odstínu na vstupní obraz. Hodnota „úhlu“ definuje počet stupňů kolem barevného kruhu, kde budou upraveny vstupní vzorky. Hodnota 0deg ponechá vstup beze změny. Pokud parametr „úhel“ chybí, použije se hodnota 0deg. Maximální hodnota je 360deg.
invertovat ()
filter: invert(100%);Invertuje vzorky ve vstupním obrazu. Hodnota „částky“ určuje podíl převodu. Hodnota 100% je zcela invertována. Hodnota 0% ponechá vstup beze změny. Hodnoty mezi 0% a 100% jsou lineární multiplikátory efektu. Pokud parametr „množství“ chybí, použije se hodnota 100%. Záporné hodnoty nejsou povoleny.
neprůhlednost()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Aplikuje průhlednost na vzorky ve vstupním obrázku. Hodnota „částky“ určuje podíl převodu. Hodnota 0% je zcela transparentní. Hodnota 100% ponechá vstup beze změny. Hodnoty mezi 0% a 100% jsou lineární multiplikátory efektu. To odpovídá vynásobení vzorků vstupního obrazu množstvím. Pokud parametr „množství“ chybí, použije se hodnota 100%. Tato funkce je podobná více zavedené vlastnosti krytí; rozdíl je v tom, že s filtry některé prohlížeče poskytují hardwarovou akceleraci pro lepší výkon. Záporné hodnoty nejsou povoleny.
jas()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Aplikuje na vstupní obraz lineární multiplikátor, díky kterému vypadá více či méně jasně. Hodnota 0% vytvoří obrázek, který je zcela černý. Hodnota 100% ponechá vstup beze změny. Ostatní hodnoty jsou lineární multiplikátory účinku. Jsou povoleny hodnoty přesahující 100%, které poskytují jasnější výsledky. Pokud parametr „množství“ chybí, použije se hodnota 100%.
kontrast()
filter: contrast(4); /* same as… */ filter: contrast(400%);Upravuje kontrast vstupu. Hodnota 0% vytvoří obrázek, který je zcela černý. Hodnota 100% ponechá vstup beze změny. Hodnoty přesahující částku přesahující 100% jsou povoleny, což poskytuje výsledky s menším kontrastem. Pokud parametr „množství“ chybí, použije se hodnota 100%.
rozmazat()
filter: blur(5px); filter: blur(1rem);Aplikuje Gaussovo rozostření na vstupní obraz. Hodnota „radius“ definuje hodnotu směrodatné odchylky od Gaussovy funkce nebo kolik pixelů na obrazovce do sebe zapadá, takže větší hodnota způsobí větší rozostření. Pokud není zadán žádný parametr, použije se hodnota 0. Parametr je zadán jako délka CSS, ale nepřijímá procentní hodnoty.
vrhat stín()
filter: drop-shadow((2,3) ?)Aplikuje efekt vrženého stínu na vstupní obraz. Vržený stín je efektivně rozmazaná, ofsetová verze alfa masky vstupního obrazu nakreslená v konkrétní barvě, složená pod obrázkem. Funkce přijímá parametr typu (definovaný v CSS3 Backgrounds), s výjimkou, že klíčové slovo 'inset' není povoleno.
Tato funkce je podobná zavedenější vlastnosti box-shadow; rozdíl je v tom, že s filtry některé prohlížeče poskytují hardwarovou akceleraci pro lepší výkon.
Vržený stín také přirozeně napodobuje obrys zamýšlených objektů, na rozdíl od box-shadowtoho se za cestu považuje pouze rámeček.
Stejně jako u textového stínu neexistuje parametr „šíření“, který by vytvořil pevný stín větší než objekt.
url ()
filter: url()url()Funkce trvá umístění souboru XML, který určuje SVG filtr, a může zahrnovat kotvu ke specifické filtrační vložky. Zde je návod, který funguje jako pěkný úvod do filtrů SVG se zábavnou ukázkou.
Animační filtry
Vzhledem k tomu, že filtry jsou animovatelné, může vám otevřít dveře pro spoustu zábavy.
Poznámky
Pro manipulaci s vykreslením můžete kombinovat libovolný počet funkcí, ale na pořadí stále záleží (tj. Použití grayscale()after sepia()bude mít za následek zcela šedý výstup).
Vypočítaná hodnota jiná než „žádná“ má za následek vytvoření kontextu stohování stejným způsobem jako neprůhlednost CSS. Vlastnost filtru nemá žádný vliv na geometrii modelu pole cílového prvku, přestože filtry mohou způsobit malování mimo rámeček ohraničení prvku. Funkce filtru ovlivňují všechny části cílového prvku. To zahrnuje veškerý obsah, pozadí, ohraničení, dekoraci textu, obrys a viditelný mechanismus posouvání prvku, na který je filtr aplikován, a jeho potomků. Filtry lze také použít na vložený obsah, například na jednotlivé rozpětí textu.
Specifikace také zavádí filter(image-URL, filter-functions)funkci obálky pro obrázek. Umožnilo by vám to filtrovat jakýkoli obrázek v době, kdy jej používáte v CSS. Můžete například rozmazat obrázek na pozadí, aniž byste rozmazali text. Tato funkce filtru zatím není v prohlížečích podporována. Mezitím můžete na pseudo-element použít pozadí i filtr a vytvořit podobný efekt.
Patentovaný filtr IE
filterVlastnost se také používá , například:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Většinou se používá pro krytí, když potřebujete podporovat IE 8 a nižší.
Více informací
- Specifikace efektů filtru W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galerie filtrů Bennetta Feelyho
- Dokumenty MDN
- Mohu použít
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Porozumění efektům filtru CSS
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 18 * | 35 | Ne | 79 | 6 * |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |