Attēlu pielāgošana ar CSS filtra efektiem

Attēla pielāgošana Spilgtums un Kontrasts, vai pagriežot attēlu Pelēktoņu vai Sefija ir kopīga iezīme, ko var atrast attēlu rediģēšanas lietojumprogrammā, piemēram, Photoshop. Bet tagad ir iespējams pievienot tos pašus efektus tīmekļa attēliem, izmantojot CSS.

Šī spēja nāk no filtra efektiem, kas faktiski vēl ir darba projekta posmā. Tomēr Webkit pārlūks, šķiet, ir solis uz priekšu šīs funkcijas īstenošanā.

Tātad, pieņemsim to izmēģināt, un mēs izmantosim šo attēlu no Mehdi Kh, lai parādītu sekas.

Efekti

Efektu piemērošana ir ļoti vienkārša. Apskatiet tālāk redzamo fragmentu, lai attēlus pārvērstu pelēktoņu;

 img -webkit-filter: pelēktoņu (100%);  

… Un tas ir sēpija ala Instagram.

 img -webkit-filtrs: sēpija (100%);  

Gan sēpija un pelēktoņu vērtības ir norādītas procentos 100% ir maksimālais un piemērojams 0% saglabās attēla maiņu, bet, ja vērtība nav skaidri norādīta 100% tiks uzskatīts par noklusējumu.

Iespējama arī attēla spilgtināšana, un mēs to varam izdarīt, izmantojot spilgtumu funkciju;

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

Spilgtuma efekts darbojas kā kontrasts un sēpijas efekts virs tā vērtības 0% saglabās attēlu tā, kā tas ir un piemēro 100% pilnībā atdzīvinās attēlu, kas attēla vietā, iespējams, parādītu tikai tukšu baltu lapu.

Arī spilgtuma efekts pieļauj negatīvas vērtības, kurā tā būs tumšāku attēlu.

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

… Un mēs varam pielāgot attēla kontrastu šādā veidā.

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

Ir neliela atšķirība attiecībā uz to, kā vērtība darbojas, kā jūs varat redzēt iepriekš kontrasts () līdz 200%, tas ir tāpēc, ka vērtība ir 100% ir sākuma punkts, kur attēls paliks nemainīgs. Kad vērtība ir zemāka 100%, teiksim 50%, attēls kļūs mazāk kontrastēts.

Turklāt mēs varam arī apvienot efektu vienā deklarācijas blokā, piemēram, zemāk redzamajā piemērā. Mēs ieslēdzam attēlu pelēktoņu un palielināt kontrastu par 50%.

 img -webkit-filter: pelēktoņu (100%) kontrasts (150%);  

Apvienojot filtru ar CSS3 pāreju, mēs varam padarīt graciozi lidināties efektu.

 img: hover -webkit-filtrs: pelēktoņu (0%);  img: hover -webkit-filtrs: sēpija (0%);  img: hover -webkit-filtrs: spilgtums (0%);  img: hover -webkit-filtrs: kontrasts (100%);  

Visbeidzot, mēs varam izmēģināt vēl vienu efektu; the Gausa izplūšana, kas izplūdīs mērķa elementu.

 img: hover -webkit-filtrs: blur (5px);  

Tāpat kā Photoshop, izplūduma vērtība ir norādīta pikseļa rādiusā, un, ja vērtība nav skaidri norādīta, 0 tiks uzskatīts par noklusējumu, un attēls tiek atstāts kā tas ir.

Galīgā doma

Spec. Ir faktiski daudz vairāk efektu. piemēram, rotēt, apgriezt un piesātināts, bet es domāju, ka tie ir mazāk piemēroti reālos tīmekļa lietās. Tādējādi diskusija aprobežojās tikai ar četrām sekām.

Un, neskatoties uz diskusijām, kas tiek izmantotas attēlos šajā apmācībā, īpašums var tikt piemērots arī jebkuram DOM elementam.

Visbeidzot, varat skatīt tiešo demonstrāciju no šīm saitēm. Lūdzu, ņemiet vērā, ka filtrs pašlaik tiek atbalstīts tikai Chrome 19 un augstāk.

• Demo
• Lejupielādēt avotu