Aflați cum să desaturați imaginea CSS (CSS de imagine în nuanțe de gri) și faceți-o frumos
Deci, să începem cu una simplă, avem nevoie de fotografii frumoase. ia acest lucru:
Trebuie să-l decolorăm (desaturați imaginea CSS - eliminați culorile, faceți imaginea alb-negru). Pentru aceasta (și, în general, pentru lucrul cu grafică) în CSS3 există un instrument special numit filtru.
Aceasta este ceea ce vom aplica.
Soluție: desaturați imaginea CSS
Mai intai facem poza in sine:
Apoi, să prescrieți stilul pentru imagine:
Acum imaginea noastră va deveni alb-negru.
Poți, desigur, să te oprești aici, dar este mult mai interesant atunci când imaginea răspunde și acțiunilor utilizatorului.
Vă propun să faceți ca atunci când plasați cursorul peste imagine, acesta devine treptat colorat.
Animați imaginea CSS desaturate
Puțini se adaugă stilului nostru anterior:
Acest lucru va permite imaginii când treceți cu mouse-ul peste ea, devine o culoare. Și vom folosi tranziția CSS3 pentru a face animat procesul de decolorare:
Tot parametrul din tranziție spune că regula va funcționa pentru toate stilurile, iar al doilea parametru este timpul de animație.
În primul parametru, puteți specifica o proprietate specifică (de exemplu, înălțime, pentru a anima numai înălțimea), și a doua oară în secunde (puteți face în fracții zecimale - 0,1 s).
Ei bine, asta e tot. Și sa dovedit că avem următoarele (încercați să aduceți imaginea de mai jos).
- Selectați selectați textul în opțiune
- New Mail API. Efectuarea tuturor lucrărilor
- Adăugați un stil CSS pentru substituent
