Css 3 filtre de imagine

Css 3 filtre de imagine

Filtrul este o proprietate în CSS3 care vă poate modifica imaginile. Aplicați neclaritatea, măriți contrastul și luminozitatea, adăugați o umbră, schimbați culorile și mult, mult mai mult.

Exemplu de pagină creată în lecție:

Descărcarea fișierului este posibilă prin acest link.

Atenție vă rog! Proprietatea filtrelor se află acum la etapa de testare și este acceptată numai de browserul Firefox în întregime. Și browser-ul Chrome și altele bazate pe motorul Webkit, această proprietate funcționează numai atunci când adaugă prefixe. Am afișat prefixele de la sfârșitul lecției, așa că vă recomandăm să parcurgeți mai întâi cea mai recentă versiune de Firefox.

10 efecte de filtrare în CSS3

Vă atrag atenția că toate efectele din imaginile de mai jos, sunt puse în aplicare numai prin CSS3, astfel încât acestea nu vor fi vizibile în browsere mai vechi.

1. Filtru blur - estompare

Dacă trebuie să vorbești într-un limbaj simplu, atunci aceasta este obișnuita estompare a imaginii. Filtrul este potrivit dacă trebuie să faceți margini mai moi. Prin estompare, se creează o senzație de fundal care nu se concentrează.

Să încercăm să aplicăm filtrul pe un chanter, înregistrând aici un astfel de cod:

În stânga, pentru claritate, am pus imaginea obișnuită, dar pe dreapta aceeași imagine, modificată doar cu CSS3.

Css 3 filtre de imagine

Css 3 filtre de imagine

Un filtru cu o valoare neclare este specificat în pixeli. Mai mult, cu cât această valoare este mai mare, cu atât este mai neclară imaginea.

Filtru de strălucire

Acest filtru se aseamănă cu luminozitatea ecranului TV. În acest caz, culoarea dintre culoarea neagră și cea originală este reglată pe măsură ce sunt adăugați parametrii.

Și aici este cobaiul nostru:

Css 3 filtre de imagine

Css 3 filtre de imagine

Puteți ajusta de la 0% sau mai mult. La 0%, imaginea va fi negru, la 100% - originală și la 200% - va fi mai strălucitoare decât de două ori. Acesta este un efect foarte bun, în special pentru imaginile întunecate.

Filtrul de luminozitate poate fi setat în 3 moduri:

Și, în principiu, nu există restricții. În exemplu, am setat valoarea la 2 și am crescut luminozitatea imaginii noastre de 2 ori sau cu 200%.

3. Filtru contrast - contrast

Acest filtru vă va permite să măriți contrastul imaginii ajustând diferența dintre tonurile luminoase și întunecate ale imaginii. Aici, valorile sunt, de asemenea, specificate în trei moduri: întregi, numere fracționare și procente. Astfel, 100% este valoarea implicită. 0% este o imagine neagră. Și tot ce este mai mult de 100%, vă adaugă contrastul.

De data aceasta vom bate pisica. Adăugați-l la + 50% contrast:

Css 3 filtre de imagine

Css 3 filtre de imagine

După cum puteți vedea, acum nici nu putem folosi Photoshop pentru a crea contrast și blur. Corect în CSS facem și schimbăm imagini, așa cum dorește inima noastră.

4. Filtru de saturație - saturați

Acesta este un efect foarte rece, care vă va face imaginile mai vii și mai bogate. Valorile sunt indicate în trei variante: numere întregi și fracționare și, de asemenea, procente. Vom indica valoarea - 200%. Măriți saturația kartinochki noastre de 2 ori.

Marea a devenit evident mai plăcută:

Css 3 filtre de imagine

Css 3 filtre de imagine

Uită-te cât de suculentă a ieșit imaginea. Prin efectul meu foarte rece! Să mergem.

5. Transparența filtrului - opacitatea

Setează transparența. Valorile acestui filtru sunt supuse anumitor restricții:

  • numere întregi și fracționare: 0 la 1
  • procent: 0% la 100

Să încercăm să reducem transparența cu 50% la următoarea fotografie.

Uite ce sa întâmplat:

Css 3 filtre de imagine

Css 3 filtre de imagine

6. Inversare filtru - invers

Acesta vă permite să "răsturnați" culorile. Valorile acestui filtru sunt, de asemenea, constrânse:

  • numere întregi și fracționare: 0 la 1
  • procent: 0% la 100

În cazul nostru, setați valoarea maximă - 100%:

Și o mașină sport frumoasă se transformă într-o mișcare ușoară a mâinii.

Css 3 filtre de imagine

Css 3 filtre de imagine

Acest filtru ne-a ajutat să creăm un efect negativ asupra imaginii în sine.

7. Filtru de sepia - sepia

Vă va permite să modificați culoarea adăugând un ton sepia. Asta înseamnă că ai imitat o fotografie veche. Valorile filtrului de restricție sunt aceleași ca în cele două.

  • numere întregi și fracționare: 0 la 1
  • procent: 0% la 100

Ei bine, ce? Să încercăm?

La dracu-tibidoh! O ușoară mișcare de mână, vom imbatrani este fotografia pentru un cuplu de zeci de ani, cred că am fugit în jos pe acoperiș cu aceste exemple.

Css 3 filtre de imagine

Css 3 filtre de imagine

În cazul nostru, am indicat o valoare fracționată de 0,5. Dar poți experimenta cum îți dorește inima!

8. Se filtrează nuanțele de gri de gri

Acest filtru ne permite să transformăm culorile în nuanțe de gri. Valorile filtru sunt, de asemenea, constrânse:

  • numere întregi și fracționare: 0 la 1
  • procent: 0% la 100

Astfel, la 100%, întreaga imagine va fi în tonuri de gri, iar la 0% va rămâne neschimbată. 0 este egal cu 0% și 1,0 - până la 100%.

Setați valoarea la 0.7 (sau 70%):

Css 3 filtre de imagine

Css 3 filtre de imagine

9. Filtrați nuanța nuanței de lumină - nuanță

În opinia mea, acesta este un filtru foarte cool, cu care poți face lucruri interesante cu o imagine. De exemplu, schimbați culoarea imaginii originale schimbând unghiul de iluminare.

Am setat valoarea la 300 de grade:

Css 3 filtre de imagine

Css 3 filtre de imagine

Ei bine, cine a spus aici că nu sunt maimuțe roz?

10. Filtrați umbra - umbra de cădere

Filtrul este setat simultan cu mai multe valori. În primul rând, am stabilit valoarea axa X, apoi - pe axa Y. Din moment ce vom nota umbra de offset de-a lungul axei X și Y. Apoi, specificați raza umbrelor noastre și ultimul atribut - culoarea sa.

În cazul nostru, indicăm schimbarea umbrei cu 3 pixeli, dimensiunea este de 5 și culoarea este gri închis.

Fiți atenți, din cauza umbrei, se pare că a doua imagine este ridicată.

Css 3 filtre de imagine

Css 3 filtre de imagine

PS: Prieteni, dacă vrei să studiezi pe deplin HTML5 și CSS3 și să înveți cum să faci site-uri grozave - să te înscrii la cursuri Noi facem 5+

Css 3 filtre de imagine

Acolo așteptați multe chipsuri și secrete interesante pentru a crea site-uri. Va fi interesant!

Apoi am decis să verific filtrul în diferite browsere.

Iepurii experimentali au fost:

Luna veche (versiunea 25.2.1 (x64))

Comodo Dragon (versiunea 36.1.1.21)

Opera (versiunea 27.0)

Vivaldi (versiunea 1.0.83.38)

și Internet Explorer (versiunea 11 nu a fost actualizată cu mult timp în urmă).

Dezamăgit iubita mea Lună Pale. În plus față de umbră, nici o singură imagine nu a funcționat. Și apoi fără a umfla o umbră. Și acest lucru se datorează faptului că Pale Luna este dezvoltat pe baza FireFox. Poate cu setările am ceva greșit?

Comodo Dragon a arătat totul așa cum ar fi trebuit - ceea ce ma mulțumit.

Opera a strălucit, de asemenea. Totul este absolut liber de critici.

Vivaldi surprins. Imaginile (toate) au dispărut pentru prima oară, apoi au apărut deja cu efectul final (aproximativ o secundă mai târziu). Cred că prin îndepărtarea de la Opera. Vivaldi scrie cu ceva pribabah despre care nu știu. Ei bine, bine. Nu este vorba de browsere.

Internet Explorer a lucrat complet la Lună Pale - dar într-un mod similar. Ie aproape nici un fel.

Concluzia mea modestă: dezvoltatorii a lungul timpului, browser-ul va lansa o nouă versiune în cazul în care totul va funcționa, dar folosim efecte de filtru la maxim.

Pentru aceasta, permiteți-mi să-mi termin postul.

Mulțumesc lui Seryoga. În timpul meu cu tine, am avut foarte mult conținut util. Dar, cel mai important, că în timpurile noastre care se mișcă rapid, cu o mulțime de informații, utile pentru noutatea și vazhnostyu.Esli sale vă propune să se bazeze pe, care este punctul central, atunci este cel mai modern excepție tendentsiya.Ne studiază RED-5, iar CSS-3 Vă mulțumesc.

Articole similare