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.
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:
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:
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ă:
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:
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.
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.
Î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%):
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:
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ă.
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+
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
Trimiteți-le prietenilor: