Filtrele CSS3 (filtru) sunt un instrument puternic care vă permite să obțineți efecte vizuale uimitoare, de exemplu pentru imagini. Mai ales poate fi util pentru crearea de efecte (elemente) de hover. Filtrele ne oferă o modalitate de a modifica redarea elementului DOM principal. Ele vă permit să faceți lucruri cum ar fi estomparea. modificați contrastul. chiar schimba culoarea articolului.
Crearea de filtre
Când mă gândesc la filtrele grafice, primul lucru care vine în minte este un filtru alb-negru. Luând o imagine plină, transformă-o într-o versiune monocromă. Acesta este primul filtru la care trebuie să ne uităm.
Pentru a utiliza acest filtru CSS3, trebuie doar să scrieți următoarele:
După cum puteți vedea, acum este necesar să folosiți prefixul -webkit - (această funcție este disponibilă până acum numai în browserele WebKit), filtrul de cuvinte cheie. și apoi puteți specifica alte filtre separate prin virgule.
În acest caz, se selectează tonurile de gri (1). astfel încât elementul a devenit complet alb-negru, dar aș putea să-l la 0.5 și imaginea să fie apoi colorată cu o saturație de 50%.
Ceea ce arată întotdeauna frumos în imagine este neclaritatea, deci adăugați-o.
După cum puteți vedea, folosirea mai multor filtre este ușor. Dacă bifați acest lucru în browser, veți vedea că ambele filtre sunt aplicate corect imaginii. Până acum, totul era simplu, nu-i așa? Dar dacă doriți filtre ca în Photoshop. CSS poate face și asta pentru dvs. Să începem cu contrastul.
Aplicați contrastul imaginii este la fel de simplu:
În caz de contrast, ar trebui să vă gândiți la 100% ca punct de plecare. Dacă setați valoarea la 100%, imaginea nu se va schimba. Dacă este mai mică decât această valoare, de exemplu, 50%, atunci contrastul va scădea. Dacă mai mult de 100%, de exemplu, 150%, atunci aceasta va face imaginea mai viu.
Un alt filtru foarte interesant pe care-l avem la dispoziție este o nuanță-rotire. Funcționează foarte mult ca panoul Hue / Saturation din Photoshop.
Pentru acest filtru, trebuie să utilizați grade pentru a seta valoarea. Acest lucru poate părea puțin complicat la prima vedere, dar pentru a înțelege ce face acest filtru, este suficient să determinați valoarea de culoare a fiecărui pixel din imagine și să o rotiți în roata de culoare. De exemplu, dacă pixelul dvs. este albastru, atunci când rotiți nuanța cu 180 de grade, acesta va deveni portocaliu.
De asemenea, avem saturați, un alt efect utilizat pe scară largă în Photoshop. Cu acest filtru, cu o valoare peste 100%, puteți face culorile elementului dvs. mai vii, deoarece acest filtru utilizează de asemenea și 100% ca punct de plecare:
Și, bineînțeles, avem și alte filtre, cum ar fi sepia, care funcționează în același mod, în gradații precum filtrul în tonuri de gri, unde introduceți o valoare de la 0 la 1:
De asemenea, avem o opacitate și acest filtru funcționează și cu valori cuprinse între 0 și 1:
Un alt filtru CSS3 pe care îl avem este cel inversat, atrage culorile pixelilor pe element astfel încât, dacă setați valoarea la 100%, ieșirea va arăta ca negativul fotografiei. Valorile variază de la 0% la 100%.
Unul dintre filtrele care au deja funcționalitate este un filtru de umbră. Este nevoie de aceleași valori ca și umbra cutie în CSS. Principala diferență este că atunci când se aplică unui fișier PNG cu fundal transparent, umbra va fi suprapusă în jurul pixelilor, nu în jurul conturului fișierului PNG. Versiunea de filtru CSS este, de asemenea, accelerată hardware.
În cele din urmă, avem strălucire (luminozitate) și acest lucru este, de asemenea, exact ceea ce ați folosit probabil în Photoshop înainte. Acest filtru este considerat 100% drept valoare inițială. Dacă setați 100%, atunci nimic din element nu se va schimba, dar valoarea 0% transformă elementul dvs. în negru, iar valoarea de 200% îl va face de două ori mai luminos:
concluzie
Filtrele CSS3 sunt o modalitate foarte puternică de a vă schimba elementele în zbor, fără a fi necesară implicarea unor imagini suplimentare. Toate acestea se fac folosind CSS. Acest lucru ne oferă posibilități nelimitate când vine vorba de procesarea vizuală a evenimentelor utilizatorilor. Este păcat că până acum numai în WebKit.