Nastavenie obrazu pomocou efektov filtra CSS

Úprava obrázka jas a kontrastovať, alebo otočenie obrázka v odtieňoch sivej alebo Sephia je bežná funkcia, ktorú možno nájsť v aplikácii na úpravu obrázkov, napríklad photoshop. Teraz je však možné pridávať rovnaké efekty do webových obrázkov pomocou CSS.

Táto schopnosť pochádza z filtrovaných efektov, ktoré sa v skutočnosti stále nachádzajú vo fáze pracovného návrhu. Prehliadač Webkit sa však zdá byť krokom v implementácii tejto funkcie.

Skúsme to skúsiť a tento obrázok z Mehdi Kh použijeme na demonštráciu účinkov.

Efekty

Použitie efektov je veľmi jednoduché. Pozrite sa na útržok nižšie, na premenu obrázkov v odtieňoch sivej;

 img -webkit-filter: šedá stupnica (100%);  

... a to je pre sépia ala Instagram.

 img -webkit-filter: sépia (100%);  

Obaja sépia a v odtieňoch sivej hodnoty sú uvedené v percentách, kde 100% je maximálne a platí 0% nezmení obrázok, ale keď nie je explicitne zadaná hodnota 100% sa bude považovať za predvolené.

Objasnenie obrazu je tiež možné a môžeme to urobiť pomocou jas nasledujúca funkcia;

 img -webkit-filter: jas (50%);  

Efekt jasu funguje ako efekt kontrastu a sépia, nad ktorým je hodnota 0% zachová obraz tak, ako je a uplatňuje sa 100% úplne rozjasní obraz, ktorý by namiesto obrázka mohol zobraziť iba prázdnu biela stránku.

Efekt jasu tiež umožňuje záporné hodnoty, v ktorom to bude tmavší obraz.

 img -webkit-filter: jas (-50%);  

... a týmto spôsobom môžeme nastaviť kontrast obrazu.

 img -webkit-filter: kontrast (200%);  

Existuje malý rozdiel v tom, ako funguje aj hodnota, ako vidíte vo vyššie uvedenom texte kontrast () podľa 200%, je to preto, že hodnota 100% je začiatočný bod, v ktorom sa obraz nezmení. Ak je hodnota nižšia 100%, povedzme 50%, obraz bude menej kontrastný.

Okrem toho môžeme efekt kombinovať aj do jedného bloku deklarácie, ako napríklad v nižšie uvedenom príklade. Zmeníme obraz v odtieňoch sivej a zvýšiť kontrastovať o 50% súčasne.

 img -webkit-filter: grayscale (100%) kontrast (150%);  

Kombináciou filtra s prechodom CSS3 môžeme urobiť elegantný vznášať sa účinok.

 img: hover -webkit-filter: šedá stupnica (0%);  img: hover -webkit-filter: sépia (0%);  img: hover -webkit-filter: jas (0%);  img: hover -webkit-filter: kontrast (100%);  

Nakoniec existuje ešte jeden účinok, ktorý môžeme vyskúšať. Gaussovské rozostrenie, čo roztiera cieľový prvok.

 img: hover -webkit-filter: rozostrenie (5px);  

Rovnako ako vo Photoshope, hodnota rozmazania je uvedená v polomere pixelov a ak hodnota nie je explicitne uvedená, hodnota 0 bude braná ako predvolená hodnota a obraz zostane ako je.

Konečná myšlienka

Existujú v skutočnosti oveľa viac efektov v spec. ako napr odtieň-rotate, invertný a saturovať, ale myslím, že sú menej aplikované v reálnych prípadoch Web. Diskusia sa teda obmedzila len na štyri účinky.

A napriek diskusii, ktorá sa aplikuje na obrázky v tomto výučbe, môže byť vlastnosť skutočne použitá aj pre akýkoľvek prvok v DOM.

Nakoniec môžete zobraziť živé demo z týchto odkazov nižšie. Upozorňujeme, že filter je v súčasnosti podporovaný iba v Chrome 19 a nad.

• demonštrácie
• Stiahnuť zdroj