Úprava obrazu pomocí efektů filtru CSS
Úprava obrazu Jas a Kontrast, nebo otočení obrazu do Stupně šedi nebo Sephia je společná funkce, kterou můžete najít v aplikaci pro úpravy obrázků Photoshop. Nyní je však možné přidat stejné efekty na webové obrazy pomocí CSS.
Tato schopnost pochází z efektů filtru, které jsou ve skutečnosti stále ve fázi pracovního návrhu. Prohlížeč Webkit se však zdá být krokem vedoucím k implementaci této funkce.
Zkusme to a my použijeme tento obrázek od Mehdi Kh k prokázání efektů.
Účinky
Aplikace efektů je velmi snadná. Podívejte se na níže uvedený úryvek, aby se obrázky střídaly ve stupních šedi;
img -webkit-filter: stupně šedi (100%);
… A to je pro sépie ala Instagram.
img -webkit-filter: sépie (100%);
Oba sépie a ve stupních šedi hodnoty jsou uvedeny v procentech, kde 100% je maximální a platí 0% udrží obraz nezměněný, ale když hodnota není explicitně specifikována 100% jako výchozí.
Rozjasnění obrazu je také možné a my to můžeme udělat pomocí jas funkce;
img -webkit-filter: jas (50%);
Efekt jasu funguje stejně jako kontrast a sépiový efekt, kde hodnota 0% uchová obraz tak, jak je a aplikuje 100% obraz zcela rozjasní, což by namísto obrázku mohlo zobrazit pouze prázdnou bílou stránku.
Efekt jasu také umožňuje záporné hodnoty, ve kterém bude ztmavit obraz.
img -webkit-filter: jas (-50%);
… A tímto způsobem můžeme upravit kontrast obrazu.
img -webkit-filter: kontrast (200%);
Tam je malý rozdíl v tom, jak hodnota funguje stejně, jak můžete vidět na výše uvedeném, jsme nastavili kontrast() podle 200%, je to proto, že hodnota 100% je výchozí bod, kde obraz zůstane nezměněn. Když je hodnota nižší 100%, řekněme 50%, obraz bude méně kontrastní.
Dále můžeme efekt kombinovat také v jednom deklaračním bloku, například v příkladu níže. Zapneme obraz ve stupních šedi a zvýšit kontrast o 50%.
img -webkit-filter: kontrast ve stupních šedi (100%) (150%);
Kombinací filtru s přechodem CSS3 můžeme vytvořit elegantní vznášet se účinek.
img: hover -webkit-filter: stupně šedi (0%); img: hover -webkit-filter: sépie (0%); img: hover -webkit-filter: jas (0%); img: hover -webkit-filter: kontrast (100%);
A konečně existuje ještě jeden efekt, který můžeme zkusit; Gaussovské rozostření, který rozostří cílený prvek.
img: hover -webkit-filter: rozostření (5px);
Stejně jako ve Photoshopu je i hodnota rozostření uvedena v poloměru pixelů a pokud není hodnota explicitně uvedena, bude hodnota 0 považována za výchozí a obrázek zůstane v původním stavu..
Závěrečná myšlenka
Ve spec. jako rotace odstínu, invertovat a saturovat, ale myslím si, že jsou méně využívány v reálných případech na webu. Diskuse tak byla omezena pouze na čtyři efekty.
A navzdory diskusi, která se v tomto tutoriálu aplikuje na obrázky, může být tato vlastnost ve skutečnosti použita také na libovolný prvek v DOM.
Nakonec si můžete prohlédnout živé demo z těchto odkazů níže. Vezměte prosím na vědomí, že filtr je v současné době podporován pouze v jazyce Chrome 19 a výše.
- Demo
- Stáhněte si zdroj
