Vlastnosti filtru CSS pro verzi firefox. CSS3 filtry: změna obrázků pomocí stylů. Nový život pro vlastnost „filtr“ CSS
Tento článek pojednává o rozhraních API, která ještě nejsou plně standardizovaná a stále se vyvíjejí. Při používání experimentálních rozhraní API ve svých vlastních projektech buďte opatrní.
Úvod
Filtry jsou Výkonný nástroj, které mohou weboví vývojáři použít k vytvoření zajímavých vizuálních efektů. V tomto článku se podíváme na historii efektů filtrů, co dělají a jak je používat. Podíváme se na příklady všech předdefinovaných filtrů definovaných pro CSS.
Budeme se také zabývat řadou aspektů výkonu pro použití na stolních a mobilních zařízeních, jako je přesná definice Rychlost interakce filtru je důležitá pro vytvoření pozitivní uživatelské zkušenosti. Nakonec se podíváme na aktuální stav implementace efektů filtrů v moderních prohlížečích.
Minulost, přítomnost a budoucnost efektů filtrů
Efekty filtrů vznikly jako součást specifikace Scalable Vector Graphics (SVG). Byly vytvořeny pro použití v vektorová grafika sada různých pixelů na základě efektů obrazu. Postupem času, jak vývojáři prohlížečů přidávali možnosti SVG, se užitečnost filtrů ukázala.
U Robert O'Callaghan Mozilla měla skvělý nápad použít filtry SVG použití CSS na „běžný“ obsah HTML.
Robert vyvinul prototyp, který ukázal, jak na to výkonné funkce může mít kombinaci filtrů a stylů CSS. Pracovní skupiny W3C CSS a SVG se rozhodly zefektivnit používání filtrů pro HTML i SVG prostřednictvím stylů CSS, a tak se zrodila vlastnost CSS „filter“.
V tento moment Kolaborativní tým vývojářů CSS a SVG pracuje na tom, aby filtry byly univerzální. Aktuální specifikaci k tomuto tématu naleznete zde.
Nový život pro vlastnost „filtr“ CSS
Weboví vývojáři někdy zažívají déjà vu, když vidí „filtr“. CSS styly. To je způsobeno tím, že starší verze internet Explorer měl vlastnost "filtr" implementovanou prostřednictvím CSS, aby poskytoval některé funkce platformy. Toto byla stará definice standardu vlastností „filtr“, který je nyní součástí CSS3.
Když tedy mezi některými starými webovými stránkami uvidíte „filtr“, nezaměňujte jej s novými filtry. Nová vlastnost „filtr“ je objekt, kde probíhají všechny konverze, a novější verze IE ji implementují stejným způsobem jako všechny ostatní moderní prohlížeče.
Jak fungují filtry
Co přesně tedy filtr dělá? Filtr si můžete představit jako závěrečný krok, který po rozložení a zobrazení obsahu na stránce udělá něco magického.
Když prohlížeč načte webové stránky, musí použít styly, implementovat rozvržení a poté vykreslit stránku, kterou pak vidíme. Filtry vstoupí v platnost po všech těchto krocích, těsně před zkopírováním stránky na obrazovku.
To, co dělají, lze popsat jako fotografování zobrazené stránky jako bitmapa a pak provést nějaké grafické kouzlo na pixelech této fotografie a zobrazit výsledek v horní části původního obrázku stránky.
Dalším obrázkem, který si dokážete představit, je filtr umístěný na čočce fotoaparátu. Vidíte přes objektiv fotoaparátu vnější svět, upraveno efektem filtru.
To přirozeně znamená, že při vytváření stránky pomocí filtrů se stráví určitý čas. Čas navíc, ale pokud jsou použity správně, bude to mít minimální dopad na rychlost načítání webu.
Kromě toho, stejně jako můžete na objektiv fotoaparátu použít více filtrů najednou, můžete na webových stránkách použít libovolný počet filtrů jeden po druhém, abyste dosáhli nejrůznějších efektů.
Filtry definované pomocí SVG a CSS
Protože filtry původně pocházejí z SVG, existují různé cesty jejich definice a použití. Samotné SVG má prvek, který zalamuje definici různé efekty filtrovat pomocí syntaxe XML.
Sada filtrů definovaných pomocí CSS má tu výhodu, že pro totéž grafický model jsou mnohem snadněji definovatelné a snadno použitelné v šabloně stylů.
Většinu filtrů CSS lze vyjádřit pomocí filtrů SVG a CSS také umožňuje odkazovat na filtr definovaný v SVG.
Vývojáři CSS filtrů vynaložili velké úsilí na usnadnění používání filtrů pro webdesignéry, a proto se tento článek bude zabývat pouze filtry dostupnými přímo z CSS. Ignorování filtrů definovaných pomocí SVG.
Jak použít CSS filtr
Poznámka: níže uvedené popisy a příklady používají oficiální syntaxi W3C, který bude dříve nebo později dostupný ve všech moderních prohlížečích. Chcete-li v tuto chvíli použít filtry, musíte použít " filtr» s předponou dodavatele. Ale nebojte se, existuje snadný způsob, jak si s tím vším poradit, kterému se budeme věnovat na konci tohoto článku.
Použití filtrů z CSS se provádí pomocí vlastnosti „filter“, která se aplikuje na libovolný viditelný prvek stránky. Jako velmi jednoduchý příklad můžeme napsat něco takového:
div ( +filtr: stupně šedi (100 %); )
a pak je veškerý obsah uvnitř všech prvků
Původní obrázek
Obrázek po použití filtru
Většina filtrů používá nějakou formu parametru k úpravě intenzity použití filtru.
Pokud tedy například chcete, aby obsah byl něco mezi původní barvou a obrázkem, který byl zcela filtrován ve stupních šedi, můžete to udělat takto:
div ( +filtr: stupně šedi (50 %); )
50% filtrovaný obrázek
Pokud chcete použít několik různých filtrů jeden po druhém, je to snadné - umístěte je ve správném pořadí CSS soubor takhle:
Tento příklad použije nejprve šedý filtr a poté sépiový efekt. Výsledný obrázek bude vypadat takto:
Díky možnosti aplikovat filtry jeden po druhém můžete dosáhnout velmi rozdílných efektů – vše záleží na vaší fantazii. S trochou experimentování můžete dosáhnout skutečně úžasných výsledků.
Jaké efekty filtrů jsou dostupné prostřednictvím CSS
Původní mechanismus filtru SVG je tedy poměrně výkonný, ale zároveň je poměrně náročný na použití. Z tohoto důvodu bylo do CSS zavedeno velké množství standardních efektů filtrů, díky kterým je jejich použití velmi snadné.
Podívejme se na každou z nich a zjistíme, co dělají.
stupně šedi (množství)
Tento filtr převede barvy vstupního obrázku na stupně šedi. „částka“ označuje procento, o které je tento filtr použit. Je-li „množství“ rovno 100 %, budou všechny barvy zobrazeny v odstínech šedé, pokud je 0 %, barvy zůstanou nezměněny.
Pokud nechcete používat procenta, můžete k definování hodnoty použít číslo s plovoucí desetinnou čárkou. To znamená, že 0 znamená totéž jako 0 %, 1,0 znamená 100 %:
Originál
sépie (množství)
Tento filtr vytváří sépiové barvy jako staré fotografie. "množství" se používá stejným způsobem jako u filtru ve stupních šedi.
Konkrétně: 100 % činí všechny barvy plně zastoupeny v sépiových tónech, nižší hodnoty umožňují aplikovat efekt méně intenzivně:
Originál
nasytit (množství)
Tento efekt nastavuje sytost barev a činí je živějšími. Jedná se o skvělý efekt, který umožňuje, aby vaše fotografie vypadaly jako plakáty nebo bannery.
Tento efekt vám také umožňuje použít hodnoty vyšší než 100 %, abyste skutečně zvýraznili sytost. To je rozhodně efekt, díky kterému mohou snímky vypadat opravdu úchvatně!
Originál
Poznámka: B Verze Chrome 19, podle specifikace W3C, funkce saturate() místo toho přijímá celočíselnou hodnotu (bez znaménka procenta). desetinná čísla nebo procenta. Nebojte se, vývojáři si jsou této chyby vědomi a bude brzy opravena.
odstín-otočit (úhel)
Tento filtr nastaví trochu nepředvídatelný barevný efekt, které lze použít k získání zajímavé výsledky. Posouvá se barevné schéma, což způsobí, že obrázek bude vypadat úplně jinak. Představte si barevné spektrum od červené po fialovou uspořádané do kruhu.
Tento efekt posune všechny původní barvy o určitý úhel, který je nastaven parametrem „úhel“. Toto je samozřejmě zjednodušená reprezentace toho, co tento filtr dělá, ale doufejme, že získáte představu:
Originál
otočení odstínu (90 stupňů)
převrátit (částka)
Tento efekt převrací barvy – takže pokud je parametr „množství“ nastaven na 100 %, bude výsledek vypadat jako starý filmový negativ fotoaparátu! Podobně jako u předchozích filtrů, pomocí hodnot nižších než 100 % můžeme upravit intenzitu filtru:
Originál
neprůhlednost (množství)
Pokud chcete, aby váš obsah vypadal jako průsvitný, potřebujete tento filtr. Hodnota "částka" určuje, jak transparentní bude obsah stránky. Hodnota 100 % tedy nastavuje plnou neprůhlednost, což znamená, že vstupní obrázek bude podobný výstupnímu obrázku.
S klesající hodnotou parametru jsou obrázky průhlednější a méně a méně nápadné. Přirozeně to znamená, že pokud předtím něco na stránce zakrývaly, tyto objekty se stanou viditelnými.
„částka“ 0 % znamená, že obrázek úplně zmizí – ale mějte na paměti, že je stále můžete nastavit tak, aby sledovaly události, jako jsou kliknutí myší atd. To je možné i u zcela průhledných objektů. Což se hodí, pokud chcete vytvořit interaktivní oblasti, ve kterých se nebude zobrazovat vůbec nic.
Tento filtr funguje stejně jako vlastnost „opacity“, kterou již znáte. Zpravidla pro Vlastnosti CSS"neprůhlednost" neplatí hardwarová akcelerace, ale některé prohlížeče, které implementují filtry využívající hardwarovou akceleraci, zrychlují verzi filtru krytí pro lepší výkon:
Originál
jas (množství)
Tento efekt funguje jako úprava jasu na televizoru. Proporcionálně mění barvy z úplně černé na původní barvu daný parametr"množství".
Pokud ji nastavíte na 0 %, neuvidíte nic než černou, ale když zvýšíte hodnotu směrem k 100 %, uvidíte původní obrázek dokud na 100 % neuvidíte samotný původní prvek.
Samozřejmě můžete pokračovat – nastavením na něco jako 200 % získáte obraz dvakrát jasnější než originál – skvělá cesta pro zpracování fotografií pořízených při slabém osvětlení!
Originál
jas (140 %)
kontrast (množství)
Další ovládací funkce z TV! Tento filtr koriguje rozdíl mezi nejtmavšími a nejsvětlejšími částmi vstupního obrazu. Pokud použijete 0%, skončíte s černým pozadím, stejně jako s "jasem", není to příliš zajímavé.
Jakmile se však hodnota zvýší směrem k 100 %, bude viditelná ve tmě. původní obrázek dokud to nedostanete na 100%. Pro tento efekt můžete také překročit 100 %, čímž se rozdíl mezi světlými a tmavými barvami ještě zvýší:
Originál
rozostření (poloměr)
Pokud chcete vyhladit okraje obsahu, můžete přidat rozostření. Vypadá to jako klasický pohled namrzlé sklo, což bývala oblíbená metoda natáčení filmů.
Tento efekt způsobí, že se všechny barvy vysypou z oblastí, které vyplnily v původním obrázku, a prolnou se do sousedních barev – jako by vaše oko ztratilo zaostření.
Parametr „poloměr“ ovlivňuje, kolik pixelů na obrazovce se prolne. Čím vyšší je jeho hodnota, tím silnější je rozostření. Nula samozřejmě ponechává obrázek beze změny:
Originál
vržený stín (stín)
Je hezké mít efekt, díky kterému váš obsah vypadá, jako by seděl před sluncem, které za ním vrhá stín na zem. A toho je samozřejmě dosaženo pomocí filtru drop-shadow.
Pořídí snímek obrázku, převede jej na jednu barvu, rozmaže a poté výsledek mírně kompenzuje, aby vypadal jako stín původního obsahu. Parametr „stín“ je ve skutečnosti o něco složitější než jen jedna hodnota. Je to řada hodnot oddělených mezerou – a některé hodnoty jsou volitelné!
„stín“ nastavuje parametry, jako je umístění stínu, stupeň rozostření, barva stínu atd. Pro získání kompletní informace Informace o tom, co je specifikováno hodnotami parametru "shadow", naleznete ve specifikaci "box-shadow" CSS3 Backgrounds.
Několik níže uvedených příkladů by vám mělo poskytnout představu o možnostech efektů dostupných s tímto filtrem:
vržený stín (16px 16px 20px černý)
vržený stín (10px -16px 30px fialový)
Toto je další operace filtrování, která je podobná stávající funkci CSS dostupné prostřednictvím vlastnosti 'box-shadow'. Použití tohoto filtru znamená, že v některých prohlížečích můžete optimalizovat jeho výkon pomocí hardwarové akcelerace, jak je popsáno v části „neprůhlednost“.
Filtry adres URL související se SVG
Vzhledem k tomu, že filtry byly původně vytvořeny jako součást SVG, dává smysl, že s nimi můžete vrstvit obsah pomocí SVG-filtry. S možnostmi, které dnes vlastnost "filtr" poskytuje, je to velmi snadné.
Všechno SVG filtry jsou definovány pomocí atributu 'ID', který lze použít k odkazování na konkrétní efekt filtru. Takže vše, co musíte udělat, abyste mohli použít jakýkoli SVG filtr z CSS, je odkaz na něj pomocí syntaxe 'url'.
Například označení SVG pro filtr může vypadat nějak takto:
A do CSS můžete umístit tento jednoduchý kód:
div ( +filtr: url(#foo); )
A voila! Všechny bloky
vlastní (již brzy)
Velmi brzy budeme moci používat vlastní filtry. To vám umožní plně využít plný potenciál vašeho GPU prostřednictvím použití speciálního programovacího jazyka shader a vytvořit naprosto úžasné efekty, omezené pouze vaší představivostí.
Tato "filtrační" část specifikace je stále v jednání, ale jakmile bude implementována ve většině populární prohlížeče, určitě si to podrobně popíšeme.
Problémy s výkonem
Jedním z hlavních aspektů, o který se každý webový vývojář stará, je výkon webové stránky nebo aplikace. CSS filtry jsou mocným nástrojem pro vizuální efekty, ale zároveň mohou ovlivnit výkon webu.
Je důležité porozumět tomu, co dělají a jak to ovlivňuje výkon. Zvláště pokud chcete, aby vaše stránky dobře fungovaly na mobilních zařízeních.
Za prvé, ne všechny filtry jsou stejné! Ve skutečnosti je většina filtrů rychlá na jakékoli platformě a má velmi malý dopad na výkon.
Nicméně filtry, které fungují různé druhy rozmazání bývá pomalejší než ostatní. To platí pro efekty, jako je „rozostření“ a „vržený stín“. To samozřejmě neznamená, že byste je neměli používat, jen musíte pochopit, jak fungují.
Když použijete filtr 'rozostření', smíchá barvy z různých pixelů ve výstupním obrazu a vytvoří efekt rozostření. Řekněme tedy, že pokud je parametr 'radius' 2, pak pro generování smíšených barev musí filtr zpracovat 2 pixely v každém směru od každého zdrojový pixel.
Protože se to dělá pro každý zdrojový pixel, znamená to automaticky velký počet výpočty. A čím větší poloměr, tím více výpočtů. Protože „rozostření“ zpracovává pixely v každém směru, zdvojnásobení poloměru znamená, že musí být zpracováno 4krát více pixelů.
To znamená, že každé zvýšení poloměru o faktor dva znamená zpomalení práce o faktor čtyři. Filtr 'drop-shadow' obsahuje efekt 'rozostření' jako součást zpracování objektu. Proto se chová stejně jako 'blur', když změníte 'radius' a 'spread' části parametru 'shadow'.
„Rozostření“ však ve skutečnosti není tak špatné, protože jej lze použít na některých platformách GPU abych to urychlil. To ale není dostupné ve všech prohlížečích.
Když máte pochybnosti, je nejlepší experimentovat a zjistit nejmenší hodnotu„poloměr“, který vám poskytne přijatelný vizuální efekt. Díky tomuto nastavení budou vaši uživatelé šťastnější, zvláště pokud na váš web přistupují ze smartphonu.
Pokud používáte filtry „url“, které odkazují na filtry SVG, mohou obsahovat jakékoli svévolné efekty filtry, a proto mohou také pracovat pomalu.
Zkuste tedy zjistit, co přesně tento efekt filtru dělá, a experimentujte mobilní zařízení abyste se ujistili, že váš výkon je v pořádku.
Přístupnost v moderních prohlížečích
V současné době je v prohlížečích WebKit k dispozici řada efektů filtrů CSS Mozilla Firefox. V blízké budoucnosti očekáváme totéž v Opeře, stejně jako v Internet Exploreru 10.
Vzhledem k tomu, že specifikace je ve vývoji, někteří prodejci prohlížečů implementovali tyto věci pomocí předpon. Takže ve WebKit musíte použít '-webkit-filter', v Mozilla Firefox '-moz-filter'. Sledujte také verze vydané pro jiné prohlížeče, jakmile budou vydány.
Ne všechny prohlížeče budou podporovat všechny efekty filtrů, takže výběr filtrů se bude u každého lišit různé platformy. V současné době Prohlížeč Mozilla Firefox podporuje pouze funkci 'filtr: url()' - bez předpony dodavatele, protože její implementace má přednost před ostatními efektovými funkcemi.
Níže jsme shrnuli to hlavní CSS efekty filtry dostupné v různé prohlížeče s uvedením přibližných hodnot výkonu pro ně při implementaci v jiném softwaru.
Vezměte prosím na vědomí, že řádek moderní prohlížeče začínají je hardwarově implementovat (k dispozici je akcelerace GPU). Když je pro ně poskytována podpora GPU, pro pomalejší efekty se výkon výrazně zlepší. Jako obvykle otestujte různé prohlížeče- Tento Nejlepší způsob hodnotit jejich práci.
Překlad článku " Pochopení efektů filtrů CSS“ připravil přátelský projektový tým.
CSS3 filtry jsou velmi zajímavou odnoží SVG a umožňují upravovat HTML prvky a obrázky použitím rozostření, jasu a mnoha dalších filtrů. V tomto tutoriálu se rychle podíváme na to, jak přesně fungují.
Jak to funguje?
Pomocí CSS můžeme vytvořit pěkné komplexní efekty. Lze je použít jak na obrázky, tak na prvky HTML. Vlastnost, která se používá k ovládání všech těchto efektů, je filtr.
filtr: filtr(hodnota) ;
Jak můžete očekávat, tato vlastnost vyžaduje použití předpony prohlížeče. Ale zatím jen -webkit-(Chrome a Safari) jsou jediné prohlížeče, které tuto vlastnost podporují.
Webkit-filter: filtr(hodnota) ;
-moz-filtr: filtr(hodnota) ;
-o-filtr: filtr(hodnota) ;
-ms-filtr: filtr(hodnota) ;
Filtrace
Filtrů je celá řada, takže pro lepší pochopení každého z nich se na ně podívejme jednotlivě. Na jeden prvek (oddělený mezerou) lze použít více filtrů, např. jas A rozmazat:
filtr: rozostření(5px ) jas(0,5 ) ;
Existuje několik filtrů, které níže nebudou uvedeny, ale lze je snadno implementovat pomocí stávajících CSS (průhlednost a stíny). Zde je původní obrázek, který použijeme k demonstraci fungování filtrů:
Foto s naneseným filtrem (první foto) a výsledek filtru dodám ve formuláři statický obrázek(druhá fotografie), pokud používáte prohlížeč, který nepodporuje filtry a nevidíte výsledek.
Rozmazat
Chtěli jste někdy udělat Gaussovské rozostření na obrázku nebo textu pouze pomocí CSS? S filtry to zvládnete! Rozostření se měří v pixelech, takže můžete udělat něco takového:
filtr: blur(5px ) ;
// Specifické pro prohlížeč
-webkit-filter: blur(5px) ;
-moz-filter: blur(5px ) ;
-o-filter: blur(5px ) ;
-ms-filter: blur(5px ) ;
Jas
Jas se měří od nuly do jedné, 1 je plný jas ( bílá barva) a 0 je počáteční jas.
filtr: jas(0,2 ) ;
// Specifické pro prohlížeč
-filtr-webkit: jas(0,2) ;
-moz-filtr: jas(0,2 ) ;
-o-filtr: jas(0,2 ) ;
-ms-filtr: jas(0,2) ;
Nasycení
Nasycení se měří v procentech.
filtr: saturovat(50%) ;
// Specifické pro prohlížeč
-webkit-filter: saturate(50% ) ;
-moz-filtr: saturovat(50%) ;
-o-filtr: saturovat(50%) ;
-ms-filtr: saturovat(50%) ;
Rotace tónů
Tento filtr umožňuje měnit tón jeho otáčením (předpokládejte kolečko barev, které pak otáčíte). Měří se ve stupních.
filtr: hue-rotate (20deg) ;
// Specifické pro prohlížeč
-webkit-filter: hue-rotate(20deg) ;
-moz-filter: hue-rotate(20deg) ;
-o-filtr: hue-rotate(20deg) ;
-ms-filtr: hue-rotate(20deg) ;
Kontrast
Kontrast se opět měří v procentech. 100 % je výchozí hodnota, 0 % vytvoří úplně černý obrázek. Cokoli více než 100% přidává kontrast!
filtr: kontrast(150% ) ;
// Specifické pro prohlížeč
-webkit-filtr: kontrast(150% ) ;
-moz-filtr: kontrast(150% ) ;
-o-filtr: kontrast(150% ) ;
-ms-filtr: kontrast(150% ) ;
Inverze
Měřeno také v procentech. Dostupné hodnoty se pohybují od 0 % do 100 %. Kupodivu v tuto chvíli webkit nepodporuje inverze, pokud jsou menší než 100 %.
filtr: invertovat (100%) ;
// Specifické pro prohlížeč
-webkit-filter: invert (100%) ;
-moz-filtr: invertovat (100% ) ;
-o-filtr: invertovat (100% ) ;
-ms-filtr: invertovat (100% ) ;
Bělení
Opět zadejte procento, o které chcete desaturovat obrázek. Dostupné hodnoty se pohybují od 0 % do 100 %.
filtr: stupně šedi(100% ) ;
// Specifické pro prohlížeč
-filtr-webkit: stupně šedi(100% ) ;
-moz-filtr: stupně šedi(100% ) ;
-o-filtr: stupně šedi(100% ) ;
-ms-filtr: stupně šedi(100% ) ;
Sépie
Předpokládám, že je to velmi užitečné, pokud chcete něco zveřejnit na Instagramu. I když také předpokládám, že k tomu nebudete používat CSS. Pokud něco, tyto odstíny šedé a negativní dodají vašemu obrazu sépiovou barvu. 100 % bude úplný sépie, 0 % bude původní obrázek.
filtr: sépie(100% ) ;
// Specifické pro prohlížeč
-webkit-filter: sépie(100% ) ;
-moz-filtr: sépie(100% ) ;
-o-filtr: sépie (100% ) ;
-ms-filtr: sépie(100% ) ;
Podpora prohlížeče
| Webkit | Mozilla | Trojzubec | rychle | |
| Rozmazat | Experimentální | Ne | Ne | Ne |
| Jas | ||||
| Nasycení | ||||
| Otočte tóny | ||||
| Kontrast | ||||
| Inverze | Pouze plná inverze |
|||
| Bělení | Experimentální | |||
| Sépie |
Pokud máte nějaké dotazy, doporučujeme použít náš
CSS3 filtry hrát v prohlížeči vizuální efekty, podobně jako filtry Photoshopu. Filtry lze přidávat nejen do obrázků, ale i do libovolných neprázdných prvků.
Sada filtrů není omezena na ty předinstalované v prohlížeči. Filtry SVG můžete také použít tak, že si je stáhnete z odkazu spolu s prvkem svg.
Filtry byly původně vytvořeny jako součást specifikace SVG. Jejich úkolem bylo aplikovat na vektorovou grafiku efekty založené na pixelové mřížce. S podpora SVG prohlížeče nyní mají možnost používat tyto efekty přímo v prohlížečích.
Prohlížeče zpracují stránku pixel po pixelu, použijí zadané efekty a výsledek vykreslí na originál. Použitím několika filtrů tedy můžete dosáhnout různých efektů, které se navzájem překrývají. Čím více filtrů, tím déle prohlížeči trvá vykreslení stránky.
Můžete použít více filtrů současně. Klasický způsob použití takových efektů - při najetí myší na prvek: hover .
Podpora prohlížeče
TJ: nepodporují
Okraj: 13.0 kromě url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40,0, 15,0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Prohlížeč Android: 53.0, 4.4 -webkit-
Chrome pro Android: 55,0, 47,0 -webkit-
| filtr | |
|---|---|
| rozmazat() | Hodnota je uvedena v jednotkách délky, například px, em. Aplikuje na původní obrázek Gaussovo rozostření. Jak větší hodnotu poloměr, tím větší je rozostření. Pokud není zadána žádná hodnota poloměru, výchozí hodnota je 0. Syntax filtr: blur(3px); |
| jas() | Hodnota je uvedena v % nebo desetinných zlomcích. Změní jas obrazu. Čím vyšší hodnota, tím jasnější obraz. Výchozí hodnota je 1. Syntax filtr: jas (50 %); filtr: jas(.5); |
| kontrast() | Hodnota je uvedena v % nebo desetinných zlomcích. Upravuje kontrast obrazu, tzn. rozdíl mezi nejtmavšími a nejsvětlejšími oblastmi obrázku/pozadí. Výchozí hodnota je 100 %. Nulová hodnota skryje původní obrázek pod tmavě šedým pozadím. Hodnoty zvyšující se od 0 do 100 % nebo 0 až 1 postupně otevřou původní obrázek na původní zobrazení a hodnoty výše zvýší kontrast mezi světly a stíny. Syntax filtr: kontrast (20 %); filtr: kontrast(.2); |
| vrhat stín() | Filtr funguje podobně jako vlastnosti box-shadow a text-shadow. Používá následující hodnoty: X offset Y offset rozostřit barvu roztaženého stínu. Výrazná vlastnost filtr spočívá v tom, že k prvkům a jejich obsahu je přidán stín s přihlédnutím k jejich průhlednosti, tzn. pokud prvek obsahuje text uvnitř, pak filtr přidá stín jak pro text, tak pro viditelné hranice blok. Na rozdíl od jiných filtrů je u tohoto filtru nutné nastavit parametry (minimální je hodnota offsetu). Syntax filtr: drop-shadow(2px 3px 5px černá); |
| stupně šedi() | Extrahuje všechny barvy z obrázku, takže výstup bude černobílý. Hodnota je uvedena v % nebo desetinných zlomcích. Čím vyšší hodnota, tím silnější efekt. Syntax filtr: stupně šedi(.5); filtr: stupně šedi(50%); |
| hue-rotate() | Změní barvy obrazu v závislosti na určeném úhlu natočení v barevném kole. Hodnota je uvedena ve stupních od 0° do 360°. 0deg je výchozí hodnota, což znamená žádný efekt. Syntax filtr: otočný odstín (180 stupňů); |
| invertovat () | Filtr způsobí, že snímek bude negativní. Hodnota je uvedena v %. 0 % nepoužije filtr, 100 % zcela převede barvy. Syntax filtr: invertovat(100%); |
| neprůhlednost() | Filtr funguje podobně jako vlastnost opacity a přidává prvku průhlednost. Charakteristickým rysem je, že prohlížeče poskytují hardwarovou akceleraci filtru, což zlepšuje výkon. Extra bonus- filtr lze kombinovat s jinými filtry současně a vytvářet zajímavé efekty. Hodnota je nastavena pouze na %, 0 % činí prvek zcela průhledným a 100 % nemá žádný vliv. Syntax filtr: neprůhlednost (30 %); |
| saturovat() | Ovládá sytost barev, pracuje na principu kontrastního filtru. Hodnota 0 % odstraní barvu, zatímco hodnota 100 % nemá žádný účinek. Hodnoty od 0 % do 100 % snižují sytost barev, hodnoty nad 100 % sytost barev zvyšují. Hodnotu lze zadat buď v % nebo jako celé číslo, 1 je ekvivalentní 100 % . Syntax filtr: nasycený (300 %); |
| sépie() | Efekt napodobující antiku a „retro“. Hodnota 0 % se nemění vzhled prvek a 100% plně reprodukuje sépiový efekt. Syntax filtr: sépie (150 %); |
| url() | Funkce přijímá umístění externího souboru XML s filtrem svg nebo ukotvení filtru umístěného v aktuálním dokumentu. Syntax filtr: url(#filterId); /* pokud je filtr v tomto dokumentu */ filtr: url(filter.svg#filterId); /* pokud je filtr s id="filterId" v souboru filter.svg*/ |
| žádný | Výchozí hodnota. Neznamená žádný účinek. |
| počáteční | Nastaví tuto vlastnost na výchozí hodnotu. |
| zdědit | Zdědí hodnotu vlastnosti z nadřazeného prvku. |
Může být nutné udělat obrázek šedě co nejrychleji a bez použití grafických editorů. Samozřejmě můžete použít grafiku Adobe editor Photoshop (můžete dokonce nastavit hloubku a tón). Takové parametry samozřejmě nemůžete v prohlížeči nakonfigurovat, ale naše oči (samozřejmě pokud nejste profesionál) rozdíl téměř nepostřehnou.
V tomto článku se podíváme na způsoby, jak udělat obrázek šedý.
1. CSS filtr
Používání nemovitosti filtr je možná nejvíc jednoduchým způsobem vytvořit černobílý obrázek. Pro tvoření černobílý obrázek v IE musíte také použít vlastnost filtr.
Dnes majetek filtr je součástí technologie CSS3, kterou podporují prohlížeče jako Firefox, Chrome a Safari. Filtry Webkit dokážou vytvořit nejen černobílý efekt, ale také sépiový efekt a efekt rozostření.
Aby byl obrázek šedý, musíte nastavit následující vlastnosti:
Tento kód bude fungovat v IE6-9, Chrome18+, Safari 6.0+ a Opera15+.
2. Javascript
Alternativou k výše uvedenému kódu je Javascript, který funguje ve všech prohlížečích, pokud je povolen, včetně IE6 a nižších.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var imgObj = document.getElementById("js-image" ) ; function gray(imgObj) ( var canvas = document.createElement ("canvas" ) ; var canvasContext = canvas.getContext ( "2d" ) ; var imgW = imgObj.width ; var imgH = imgObj.height ; canvas.width = imgW; canvas.height = imgH; canvasContext.drawImage (imgObj, 0 , 0 ) ;< imgPixels.height ; y++ ) { for (var x = 0 ; x < imgPixels.width ; x++ ) { var i = (y * 4 ) * imgPixels.width + x * 4 ; var avg = (imgPixels.data [ i] + imgPixels.data [ i + 1 ] + imgPixels.data [ i + 2 ] ) / 3 ; imgPixels.data [ i] = avg; imgPixels.data [ i + 1 ] = avg; imgPixels.data [ i + 2 ] = avg; } } canvasContext.putImageData (imgPixels, 0 , 0 , 0 , 0 , imgPixels.width , imgPixels.height ) ; return canvas.toDataURL () ; } imgObj.src = gray(imgObj) ; |
Pomocí Javascriptu můžeme dát obrázku černobílý efekt, například při najetí myší na obrázek a kliknutím na něj. Společně můžete k vytvoření použít jQuery hladký efekt přechod do šedé. Jedinou nevýhodou je, že Javascript může být v prohlížeči zakázán.
3.SVG
Další způsob je pomocí SVG filtry.
Vše, co musíte udělat, je vytvořit soubor SVG a použijte níže uvedený kód:
Veškerý kód můžete také napsat přímo v CSS:
| 1 2 3 4 | img ( filtr : url ( "url("data:image/svg+xml;utf8, |
Výsledek bude podobný.
Závěr
Pro podporu tento efekt všechny prohlížeče, musíte kombinovat všechny metody. Tento kód bude fungovat v prohlížečích Firefox 3.5+, Opera15+, Safari, Chrome a IE.
| 1 2 3 4 5 6 7 8 | img ( -webkit-filter: grayscale(100%) ; -webkit-filter: grayscale(1) ; filter : grayscale(100%) ; filter : url (../img/gray.svg#grayscale" ); filtr : šedá ; |
Tento kód lze použít společně s Javascriptem a pokud je Javascript vypnutý, bude fungovat tento kód. Modernizr s tím může pomoci.
Modernizr dodává js class for body, pokud je v prohlížeči povolen Javascript, a zaregistruje třídu no-js pokud je zakázán Javascript. A vše, co zbývá napsat v CSS, je následující:
| 1 2 3 4 5 6 7 8 | .no-js img ( -webkit-filter: grayscale(100% ) ; -webkit-filter: grayscale(1) ; filter : grayscale(100% ) ; filter : url (../img/gray.svg#grayscale " ); filtr: šedý; |
