Proprietățile CSS au atins un astfel de nivel de dezvoltare încât sunt capabile să facă față unor funcții importante ale editorilor grafici. Un exemplu în acest sens sunt filtrele CSS, cu ajutorul cărora puteți crea efecte frumoase pentru imagini.

Dacă mai devreme era greu de imaginat, acum aproape toate filtrele software sunt implementate în tabelul în cascadă, de la modele de estompare la modele de culoare artistice.

Dar există încă un mic dezavantaj al filtrelor CSS - nu toate browserele web acceptă efecte vizuale. Desigur, este doar o chestiune de timp. Și când sosește ora „x”, dezvoltatorii trebuie să fie pregătiți. Deocamdată, să ne uităm la ceea ce a fost deja implementat până acum.

Suport pentru browser pentru filtre CSS

Practic, toate browserele populare, Firefox, Chrome, Opera, au o relație „prietenoasă” cu efectele de filtrare. Nu același lucru se poate spune despre IE, care refuză complet să suporte efecte, chiar și în cele mai recente versiuni.

Funcțiile și sintaxa filtrelor CSS

Toate proprietățile CSS au anumiți parametri care combină ordinea în care sunt scrise valorile. Proprietatea de filtru nu face excepție, ca și altele, poate folosi o combinație de mai multe reguli într-o singură aplicație. De exemplu, adăugați un filtru de luminozitate pentru o imagine, iar după un spațiu specificați altul - contrast. Vom acoperi totul în acest articol cu ​​câteva exemple pentru o mai bună înțelegere.

Sintaxă

Filtru: numele filtrului (procent din valoare); filtru: url(img.svg); filtru: blur(10px); filtru: luminozitate (0,9); filtru: contrast(150%); filtru: drop-shadow(5px 5px 10px negru); filtru: tonuri de gri(80%); filtru: nuanță-rotire (60deg); filtru: invers (80%); filtru: opacitate(50%); filtru: saturat(50%); filtru: sepia(40%); /* Aplică mai multe filtre */ filtru: contrast (150%) tonuri de gri (80%);

Lista filtrelor

Exemple de filtre CSS

Am ajuns la o parte interesantă a articolului, în care vom lua în considerare fiecare filtru separat cu exemple de aplicare a acestuia. Pentru claritate, vor fi folosite trei imagini. Primul va arăta punctul de plecare, aspectul originalității. Al doilea va servi ca exemplu static de aplicare a unui filtru, iar al treilea va afișa efectul de hover, trecând cursorul mouse-ului peste imagine.

Filtru de estompare

În editorii grafici, filtrul de estompare este un instrument indispensabil și este adesea folosit în muncă. Poate crea cu ușurință o imagine neclară, dar poate crea efectul de focalizare pe un anumit element, în timp ce restul imaginii cade sub neclaritate. Și mult mai mult.

În designul site-ului web (de exemplu, estomparea) poate fi folosită ca linie pentru o mai bună lizibilitate a textului din imagine. De fapt, estomparea este gaussiană de la o valoare de 0 px până când dispare complet.

Original

Filtru

Efect de hover

/*regulă statică*/ .efbl1 img( filtru: blur(2px); -webkit-filter: blur(2px); ) /*pentru efectul de trecere cu mouse-ul*/ .efbl2 img( tranziție: toate 0,6 s ease 0; ) . efbl2 :hover img( filtru: blur(4px); -webkit-filter: blur(4px); tranziție: toate 0.6s ease 0s; )

Filtrează umbră

Proprietatea umbră a venit la noi cu cea de-a treia versiune a tabelului în cascadă. Desigur, este familiar tuturor celor implicați în dezvoltarea site-ului web, deoarece box-shadow joacă un rol important în design. Filtrul de umbră poate fi numit o alternativă inferioară cu parametri similari și sunt doar 5 dintre ei, fără a lua în calcul umbra interioară.

Ordinea scrierii este următoarea: 5px/-5px (offset orizontal), 5px/-5px (offset vertical), 15px (raza de estompare a umbrei), 5px/-5px (întindere a umbrei), negru (culoare). Filtrul acceptă toată sintaxa, cu excepția valorilor de întindere și inserare, precum și adăugarea mai multor umbre separate prin virgule. Dar, în ciuda tuturor acestora, există câteva avantaje, de exemplu, filtrul ia în considerare pseudo-elemente, ceea ce vă permite să afișați forma exactă a umbrei elementului.

De asemenea, interesant este că atunci când blocul nu are un fundal, ci este specificat doar o chenar, atunci când se folosește box-shadow va fi afișată o umbră, presupus ținând cont de fundal, adică unul solid. Iar în cazul utilizării drop-shadow, umbra ia forma unui accident vascular cerebral fără a ține cont de fundal.

Original

Filtru

Efect de hover

/*regula statica*/ .efdrswd1 img( filtru: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0) , 0.4)); ) /*pentru efectul hover*/ .efdrswd2 img( tranziție: toate 0.6s ease 0s; ) .efdrswd2:hover img( filtru: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); tranziție: toate 0.6s ease 0s; )

Filtru de decolorare

Stilul clasic de fotografie pentru toate timpurile în direcția corectă. Filtrul permite o singură valoare - pozitivă. În funcție de procentul specificat, nuanțele de gri vor înlocui fără probleme culoarea imaginii. De asemenea, în loc de procente, puteți folosi fracții până la un număr întreg (0,01/1).

Original

Filtru

Efect de hover

/*regulă statică*/ .efgrays1 img( filtru: tonuri de gri (90%); -webkit-filter: tonuri de gri (90%); ) /*pentru efectul hover*/ .efgrays2 img( tranziție: toate 0.6s ease 0s; ) .efgrays2:hover img( filtru: tonuri de gri (90%); -webkit-filter: tonuri de gri (90%); tranziție: toate 0,6 secunde eșuează 0; )

Filtru de luminozitate

Adăugarea de lumină colțurilor negre „neexplorate” ale imaginii. Este adesea folosit în procesarea fotografiilor, deoarece fotografiile de amatori sunt de obicei realizate în locuri slab iluminate. Luminozitatea filtrului este reglabilă de la 0% (o imagine complet neagră) până la dispariția aproape completă a imaginii. Punctul inițial este definit ca 100%, iar valoarea poate fi specificată și ca fracție.

Original

Filtru

Efect de hover

/*regulă statică*/ .efbrig1 img( filtru: luminozitate (150%); -webkit-filter: luminozitate (150%); ) /*pentru efectul hover*/ .efbrig2 img( tranziție: toate 0,6s ease 0s; ) .efbrig2:hover img( filtru: luminozitate (150%); -webkit-filter: luminozitate (150%); tranziție: toate 0,6 s ușurință 0; )

Filtru de contrast

O modalitate simplă de a face o imagine mai expresivă este prin experimentarea cu setările de luminozitate ale celor mai luminoase și mai întunecate părți ale imaginii. Filtrul de contrast este gata să ajute în acest sens. Parametrii săi, ca mulți alții, exclud o valoare negativă (-150%), iar poziția inițială este indicată la 100%. Pe lângă procente, sunt permise și fracții (1,5).

Original

Filtru

Efect de hover

/*regula statica*/ .efcontr1 img( filtru: contrast(150%); -webkit-filter: contrast(150%); ) /*pentru efectul hover*/ .efcontr2 img( tranzitie: toate 0.6s ease 0s; ) .efcontr2:hover img( filtru: contrast(150%); -webkit-filter: contrast(150%); tranziție: toate 0.6s ease 0s; )

Filtru de tonuri de culoare

O tehnică excelentă de design în designul imaginii, care se potrivește cu stilul designului principal al resursei. Ideea este să suprapuneți o nuanță a culorii selectate pe imaginea originală. Rapoartele ies în funcție de gradul dat, care indică punctul de culoare de pe roata culorilor.

Dacă valoarea este pozitivă (150deg), atunci rotația are loc în sensul acelor de ceasornic. În consecință, dacă este negativ, atunci în sens invers acelor de ceasornic. În două poziții pornește de la 0° la 360°.

Original

Filtru

Efect de hover

/*regulă statică*/ .efhrotai1 img( filtru: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*pentru efectul hover*/ .efhrotai2 img( tranziție: toate 0,6 s ease 0s ; ) .efhrotai2:hover img( filtru: hue-rotate (180deg); -webkit-filter: hue-rotate (180deg); tranziție: toate 0,6 secunde ușurează 0; )

Filtru de inversare

Un efect specific care vă permite să întoarceți culoarea unei imagini cu susul în jos. În editorii grafici are un anumit rol și se întâmplă că fără participarea sa nu se poate obține rezultatul dorit. Parametrul filtru invers este specificat numai în direcția pozitivă de la o valoare de 0% la 100%.

Original

Filtru

Efect de hover

/*regula statica*/ .efinve1 img( filtru: inversat(100%); -webkit-filter: inversat(100%); ) /*pentru efectul de trecere cu mouse-ul*/ .efinve2 img( tranzitie: toate 0,6 secunde ease 0; ) .efinve2:hover img( filtru: inversare (100%); -webkit-filter: inversare (100%); tranziție: toate 0,6 secunde ușurează 0; )

Filtru de saturație

Atunci când o imagine își pierde culoarea naturală din motive necunoscute (ceva ca un tricou albit de soare), creșterea saturației îi poate restabili instantaneu aspectul original. Și dacă acest filtru este folosit în combinație cu alte filtre, rezultatul va fi foarte satisfăcător. Setarea se face de la 0 vizualizare inițială la numere mari.

Original

Filtru

Efect de hover

/*regula statica*/ .efsatut1 img( filtru: saturate(165%); -webkit-filter: saturate(165%); ) /*pentru efectul hover*/ .efsatut2 img( tranzitie: toate 0.6s ease 0s; ) .efsatut2:hover img( filtru: saturate(165%); -webkit-filter: saturate(165%); tranziție: toate 0.6s ease 0s; )

filtru sepia

Imitație a efectului fotografiilor vechi (nuanță ușor maro). Acest lucru realizează un stil retro de imagine, care este deosebit de popular. Filtrul sepia este reglabil de la 0% (poziție acasă) la 100%.

Original

Filtru

Efect de hover

/*regula statica*/ .efsepiaa1 img( filtrul: sepia(100%); -webkit-filter: sepia(100%); ) /*pentru efectul hover*/ .efsepiaa2 img( tranzitie: toate 0.6s ease 0s; ) .efsepiaa2:hover img( filtru: sepia(100%); -webkit-filter: sepia(100%); tranziție: toate 0.6s ease 0s; )

Transparența filtrului

Un filtru similar cu proprietatea de opacitate din tabelul în cascadă versiunea 3. Sintaxa este aceeași, dar valoarea transparenței este ajustabilă de la 0% la 100% (poziția inițială).

Original

Filtru

Efect de hover

/*regulă statică*/ .efopaty1 img( filtru: opacitate(50%); -webkit-filter: opacitate(50%); ) /*pentru efectul hover*/ .efopaty2 img( tranziție: toate 0,6 secunde ușurează 0; ) .efopaty2:hover img( filtru: opacitate (50%); -webkit-filter: opacitate (50%); tranziție: toate 0,6 secunde ușurează 0; )

Legătura de filtrare

Un filtru personalizat este creat pe baza elementelor SVG cu un identificator specific, care poate fi utilizat ulterior în CSS printr-un filtru de link. Efectele pot fi foarte diferite de filtrele standard, de la măști de suprapunere la transparența banală.

Generator de filtre CSS

De mult timp a fost obiceiul de a crea generatoare de diferite proprietăți CSS. , și multe altele. Ele servesc ca un instrument pentru a ușura munca. Și pentru webmasterii începători pot avea beneficii duble. Sunt foarte ușor de utilizat: mișcă glisoarele și poți vedea imediat rezultatele. Și când ați terminat, tot ce rămâne este să copiați codul generat. Același lucru este valabil și pentru generatoarele de filtre CSS. Iată două dintre ele pentru referință:

Concluzie

Recenzia s-a dovedit a fi destul de mare, dar sper că va fi de folos cuiva în practică. De asemenea, nu uitați să combinați filtre, unul este bun, dar două vor fi mai bune în anumite cazuri.

filtre CSS3 reproduce efecte vizuale în browser similar filtrelor Photoshop. Filtrele pot fi adăugate nu numai imaginilor, ci și oricăror elemente care nu sunt goale.

Setul de filtre nu se limitează la cele preinstalate în browser. De asemenea, puteți utiliza filtre SVG descărcându-le din link împreună cu elementul svg.

Filtrele au fost create inițial ca parte a specificației SVG. Sarcina lor a fost să aplice efecte bazate pe grila de pixeli la grafica vectorială. Cu ajutorul browserului pentru SVG, acum este posibil să utilizați aceste efecte direct în browsere.

Browserele procesează pagina pixel cu pixel, aplicând efectele specificate și desenând rezultatul deasupra originalului. Astfel, prin utilizarea mai multor filtre puteți obține efecte diferite; acestea par să se suprapună. Cu cât sunt mai multe filtre, cu atât mai mult îi ia browserului să redea pagina.

Puteți aplica mai multe filtre în același timp. Modul clasic de a aplica astfel de efecte este atunci când treceți cu mouse-ul peste un element: hover .

Suport pentru browser

IE: nu suporta
Margine: 13.0 cu excepția url()
Firefox: 35.0
Crom: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Operă: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Browser Android: 53.0, 4.4 -webkit-
Chrome pentru Android: 55.0, 47.0 -webkit-

Poate fi necesar să faceți o imagine gri cât mai repede posibil și fără a utiliza editori grafici. Desigur, puteți folosi editorul grafic Adobe Photoshop (puteți seta chiar și adâncimea și tonul). Desigur, nu puteți configura astfel de parametri în browser, dar ochii noștri (cu excepția cazului în care, desigur, sunteți un profesionist) cu greu vor observa diferența.

În acest articol vom analiza modalități de a face o imagine gri.

1. Filtru CSS

Folosind proprietatea filtru este poate cel mai simplu mod de a crea o imagine alb-negru. Pentru a crea o imagine alb-negru în IE, trebuie să utilizați și proprietatea filtru.

Astăzi, proprietate filtru face parte din tehnologia CSS3, care este acceptată de browsere precum Firefox, Chrome și Safari. Filtrele Webkit nu numai că pot crea un efect alb-negru, dar pot oferi și efecte sepia și estompare.

Pentru a face imaginea gri, trebuie să setați următoarele proprietăți:

Acest cod va funcționa în IE6-9, Chrome18+, Safari 6.0+ și Opera15+.

2. Javascript

O alternativă la codul de mai sus este Javascript, care funcționează în toate browserele dacă este activat, inclusiv IE6 și mai jos.

Folosind Javascript, putem da unei imagini un efect alb-negru, de exemplu, când trecem cu mouse-ul și facem clic pe imagine. Puteți folosi jQuery împreună pentru a crea un efect de estompare în gri. Singurul dezavantaj este că Javascript poate fi dezactivat în browser.

3.SVG

O altă modalitate este să utilizați filtre SVG.

Tot ce trebuie să faceți este să creați un fișier SVG și să utilizați codul de mai jos:

De asemenea, puteți scrie tot codul direct în CSS:

Rezultatul va fi similar.

Concluzie

Pentru a susține acest efect în toate browserele, este necesar să combinați toate metodele. Acest cod va funcționa în Firefox 3.5+, Opera15+, Safari, Chrome și IE.

Acest cod poate fi folosit împreună cu Javascript, iar dacă Javascript este dezactivat, acest cod va funcționa. Modernizr poate ajuta în acest sens.

Modernizr adaugă js clasă pentru corp, dacă Javascript este activat în browser și va înregistra clasa nu-js dacă Javascript este dezactivat. Și tot ce rămâne de scris în CSS este următorul:

Filtrele CSS3 sunt o ramură foarte interesantă a SVG, permițându-vă să modificați elemente și imagini HTML prin aplicarea de estompare, luminozitate și multe alte filtre. În acest tutorial vom arunca o privire rapidă asupra modului exact în care funcționează.

Cum functioneaza?

Folosind doar CSS putem crea niște efecte destul de complexe. Ele pot fi aplicate atât imaginilor, cât și elementelor HTML. Proprietatea care este folosită pentru a controla toate aceste efecte este filtru.

filtru: filtru(valoare) ;

După cum v-ați putea aștepta, această proprietate necesită utilizarea unui prefix de browser. Dar deocamdată, numai -webkit-(Chrome și Safari) sunt singurele motoare de browser care acceptă această proprietate.

Webkit-filter: filtru(valoare) ;
-moz-filter: filtru(valoare) ;
-o-filtru: filtru(valoare) ;
-ms-filter: filtru(valoare) ;

Filtrare

Există o serie de filtre, așa că pentru a înțelege mai bine fiecare dintre ele, să le analizăm individual. Mai multe filtre pot fi aplicate unui element (separate printr-un spațiu), de exemplu, luminozitateaȘi estompa:

filtru: estompare(5px) luminozitate(0,5);

Există câteva filtre care nu vor fi acoperite mai jos, dar pot fi implementate cu ușurință cu CSS existent (transparență și umbre). Iată imaginea originală pe care o vom folosi pentru a demonstra cum funcționează filtrele:

Voi afișa o fotografie cu filtrul aplicat (prima fotografie) și rezultatul filtrului sub forma unei imagini statice (a doua fotografie), dacă utilizați un browser care nu acceptă filtre și nu poate vedea rezultatul.

Estompa

Ai vrut vreodată să faci o estompare gaussiană pe o imagine sau text folosind doar CSS? Cu filtre o poți face! Neclaritatea este măsurată în pixeli, așa că ați putea face ceva de genul acesta:

filtru: blur(5px );
// Specific browser
-webkit-filter: blur(5px) ;
-moz-filter: blur(5px ) ;
-o-filter: blur(5px ) ;
-ms-filter: blur(5px ) ;

Luminozitate

Luminozitatea este măsurată de la zero la unu, 1 fiind luminozitatea completă (alb) și 0 fiind luminozitatea originală.

filtru: luminozitate(0,2);
// Specific browser
-webkit-filter: luminozitate(0,2 ) ;
-moz-filter: luminozitate(0,2 ) ;
-o-filtru: luminozitate(0,2 ) ;
-ms-filter: luminozitate(0,2 ) ;

Saturare

Saturația este măsurată ca procent.

filtru: saturat(50%) ;
// Specific browser
-webkit-filtru: saturate(50% ) ;
-moz-filter: saturate(50% ) ;
-o-filtru: saturat(50% );
-ms-filter: saturate(50% ) ;

Rotația tonului

Acest filtru vă permite să schimbați tonul prin rotirea acestuia (gândiți-vă la o roată de culori pe care apoi o rotiți). Se măsoară în grade.

filtru: hue-rotate(20deg);
// Specific browser
-webkit-filter: hue-rotate(20deg) ;
-moz-filter: hue-rotate(20deg);
-o-filtru: hue-rotate(20deg) ;
-ms-filter: hue-rotate(20deg) ;

Contrast

Contrastul, din nou, este măsurat ca procent. 100% este valoarea implicită, 0% va crea o imagine complet neagră. Orice lucru mai mare de 100% adaugă contrast!

filtru: contrast(150% );
// Specific browser
-webkit-filter: contrast(150% ) ;
-moz-filter: contrast(150% ) ;
-o-filtru: contrast(150% ) ;
-ms-filter: contrast(150% ) ;

Inversiunea

Măsurată și ca procent. Valorile disponibile variază de la 0% la 100%. Destul de ciudat, în acest moment, webkit-ul nu acceptă inversiuni dacă acestea sunt mai mici de 100%.

filtru: invers (100%) ;
// Specific browser
-webkit-filter: invers (100%) ;
-moz-filter: invers (100%) ;
-o-filtru: invers (100% ) ;
-ms-filter: inversare (100% ) ;

Albire

Din nou, introduceți procentul după care doriți să desaturați imaginea. Valorile disponibile variază de la 0% la 100%.

filtru: tonuri de gri(100%);
// Specific browser
-webkit-filter: tonuri de gri(100% );
-moz-filter: tonuri de gri(100% );
-o-filtru: tonuri de gri(100% );
-ms-filter: tonuri de gri(100% );

Sepia

Presupun că este foarte util dacă vrei să postezi ceva pe Instagram. Deși presupun că nu vei folosi CSS pentru asta. În orice caz, aceste nuanțe de gri și negative, în total, vă vor permite să adăugați sepia imaginii. 100% va fi o sepia completă, 0% va fi imaginea originală.

filtru: sepia(100% );
// Specific browser
-webkit-filtru: sepia(100% ) ;
-moz-filter: sepia(100% );
-o-filtru: sepia(100% );
-ms-filter: sepia(100% ) ;

Suport pentru browser

Dacă aveți întrebări, vă recomandăm să utilizați