Reglarea imaginii cu efecte de filtrare CSS
Ajustarea imaginii strălucire și Contrast, sau transformarea imaginii în Alb-negru sau Sephia este o caracteristică comună pe care o puteți găsi în aplicația de editare a imaginilor, cum ar fi Photoshop. Dar, acum este posibil să adăugăm aceleași efecte la imaginile web folosind CSS.
Această capacitate provine din Efectele de Filtru care se află încă în stadiul proiectului de lucru. Cu toate acestea, browserul Webkit pare să fie un pas în direcția implementării acestei caracteristici.
Deci, hai să încercăm și vom folosi această imagine de la Mehdi Kh pentru a demonstra efectele.
Efectele
Aplicarea efectelor este foarte ușoară. Uitați-vă la fragmentul de mai jos, pentru a transforma imaginile alb-negru;
img -webkit-filter: tonuri de gri (100%);
... și asta e pentru sepia ala Instagram.
img -webkit-filter: sepia (100%);
Amandoua sepia si alb-negru valorile sunt exprimate în procentaj în care 100% este maximul și se aplică 0% va menține imaginea neschimbată, dar când valoarea nu este specificată explicit 100% va fi considerată implicită.
Încurajarea imaginii este, de asemenea, posibilă și o putem face folosind strălucire funcție, după cum urmează;
img -webkit-filter: luminozitate (50%);
Efectul de luminozitate funcționează ca efectul de contrast și sepia de mai sus în cazul în care valoarea de 0% va păstra imaginea așa cum este și va aplica 100% va lumina în totalitate imaginea, care ar putea afișa doar o pagină alb albă în locul unei imagini.
De asemenea, efectul de luminozitate permite valori negative, în care va fi întunecați imaginea.
img -webkit-filter: luminozitate (-50%);
... și putem regla contrastul imaginii în acest fel.
img -webkit-filter: contrast (200%);
Există o mică diferență în privința modului în care funcționează valoarea, după cum puteți vedea în cele de mai sus, setăm contrast() de 200%, acest lucru se datorează faptului că valoarea 100% este punctul de plecare în care imaginea va rămâne neschimbată. Când valoarea este mai mică 100%, să spunem 50%, imaginea va deveni mai puțin contrazisă.
În plus, putem combina efectul într-un bloc de declarație, cum ar fi în exemplul de mai jos. Transformăm imaginea alb-negru și să crească contrast cu 50% în același timp.
img -webkit-filter: contrast de tonuri de gri (100%) (150%);
Prin combinarea filtrului cu tranziția CSS3 putem face un grațios planare efect.
img: hover -webkit-filter: tonuri de gri (0%); img: hover -webkit-filter: sepia (0%); img: hover -webkit-filter: luminozitate (0%); img: hover -webkit-filtru: contrast (100%);
În cele din urmă, există încă un efect pe care îl putem încerca; Gaussian Blur, care va bloca elementul vizat.
img: hover -webkit-filter: estomp (5px);
Ca în Photoshop, valoarea neclarității este exprimată în rază de pixeli și dacă valoarea nu este specificată explicit, valoarea 0 va fi luată ca valoare prestabilită și imaginea va fi lăsată așa cum este ea.
Gândirea finală
Există de fapt mai multe efecte în spec. precum nuanță-rotire, inversa și satura, dar cred că acestea sunt mai puțin aplicate în cazurile Web real. Astfel, discuția a fost limitată la doar patru efecte.
Și, în ciuda discuției care se aplică imaginilor din acest tutorial, proprietatea poate fi de asemenea aplicată la orice element din DOM.
În cele din urmă, puteți vedea demo-ul live din aceste linkuri de mai jos. Rețineți că în prezent filtrul este acceptat numai în Chrome 19 Si mai sus.
- Demo
- Descărcați sursa
