Képbeállítás CSS szűrőhatásokkal

A kép beállítása Fényesség és Kontraszt, vagy a kép fordítása szürkeárnyalatos vagy Sephia a képszerkesztő alkalmazásban megtalálható általános jellemző, mint például Photoshop. De most már lehetséges ugyanazokat a hatásokat hozzáadni a webes képekhez a CSS használatával.

Ez a képesség a szűrőhatásokból származik, amelyek valójában még a munkaprojekt szakaszában vannak. Úgy tűnik azonban, hogy a Webkit böngésző egy lépés a fejében a funkció megvalósításában.

Szóval, próbáljuk meg, és ezt a képet Mehdi Kh-től fogjuk használni a hatások bemutatására.

A hatások

A hatások alkalmazása nagyon egyszerű. Tekintse meg az alábbi részletet, a képek beillesztéséhez szürkeárnyalatos;

 img -webkit-filter: szürkeárnyalatos (100%);  

… És ez az szépia ala Instagram.

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

Mind a szépia és a szürkeárnyalatos az értékek százalékban vannak megadva 100% a maximális és az alkalmazás 0% megtartja a kép kicserélését, de ha az értéket nem határozza meg kifejezetten, a 100% az alapértelmezettnek tekintendő.

A kép élénkítése is lehetséges, és ezt a fényesség funkciója a következők szerint;

 img -webkit-filter: fényesség (50%);  

A fényerő hatása olyan, mint a kontraszt és a szépiahatás, ahol a 0% megtartja a képet, ahogy van, és alkalmazza 100% teljesen megvilágítja a képet, ami csak egy üres fehér oldalt mutatna a kép helyett.

A fényerő hatása is lehetővé teszi a negatív értékeket, amelyben ez lesz sötétítse a képet.

 img -webkit-filter: fényerő (-50%);  

… És így beállíthatjuk a kép kontrasztját.

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

Kevés különbség van abban, hogy az érték hogyan működik, ahogy azt a fentiekben láthatjuk kontraszt() által 200%, ez azért van, mert az értéke 100% a kezdőpont, ahol a kép változatlan marad. Ha az érték az alábbi 100%, mondjuk 50%, a kép kevésbé kontrasztos lesz.

Továbbá kombinálhatjuk a hatást egy deklarációs blokkban, például az alábbi példában. Megfordítjuk a képet szürkeárnyalatos és növelje a kontraszt 50% -kal.

 img -webkit-filter: szürkeárnyalatos (100%) kontraszt (150%);  

A szűrő CSS3 átmenetével kombinálva kecses lebeg hatás.

 img: hover -webkit-filter: szürkeárnyalatos (0%);  img: hover -webkit-filter: szépia (0%);  img: hover -webkit-filter: fényerő (0%);  img: hover -webkit-filter: kontraszt (100%);  

Végül, van még egy hatás, amit megpróbálhatunk; a Gauss-elmosódás, amely elmosódja a célelemet.

 img: hover -webkit-filter: elmosódás (5px);  

A Photoshophoz hasonlóan az elmosódási értéket pixel sugárban adjuk meg, és ha az értéket nem határozza meg kifejezetten, akkor a 0 lesz az alapértelmezett és a kép úgy marad, mint amilyen.

Végső gondolat

Valójában sokkal több hatás van a specifikációban. mint például Hue-forgatás, invert és telít, de azt hiszem, kevésbé alkalmazzák őket a valódi webes esetekben. Így a vita csak négy hatásra korlátozódott.

És annak ellenére, hogy a bemutatóban a képekre vonatkozó beszélgetésekre került sor, a tulajdonságot a DOM bármely elemére is alkalmazni lehet.

Végül az alábbi linkekből megtekintheti az élő demót. Kérjük, vegye figyelembe, hogy a szűrőt jelenleg csak a rendszer támogatja Chrome 19 és fölötte.

• Demó
• Letöltés forrása