Filtrele CSS sunt un instrument puternic pe care autorii îl pot folosi pentru a obține diferite efecte vizuale (cum ar fi filtrele Photoshop pentru browser). Proprietatea CSS filteroferă acces la efecte precum estomparea sau schimbarea culorii pe randarea unui element înainte ca elementul să fie afișat. Filtrele sunt utilizate în mod obișnuit pentru a regla redarea unei imagini, a unui fundal sau a unui chenar.
Sintaxa este:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Există o serie de funcții de utilizat pentru valoare:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- pentru aplicarea filtrelor SVGcustom()- "in curand"
Pot fi folosite mai multe funcții, spațiu separat.
.do-more-things ( filter: blur(20px) grayscale(20%); )Funcții de filtrare
Pentru a utiliza proprietatea filtrului CSS, specificați o valoare pentru una dintre următoarele funcții enumerate mai sus. Dacă valoarea este nevalidă, funcția returnează „none”. Cu excepția cazului în care se menționează, funcțiile care iau o valoare exprimată cu un semn procentual (ca la 34%) acceptă, de asemenea, valoarea exprimată ca zecimal (ca la 0,34).
Iată o demonstrație care vă permite să jucați puțin cu filtre individuale:
scara tonurilor de gri()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Convertește imaginea de intrare în tonuri de gri. Valoarea „sumă” definește proporția conversiei. O valoare de 100% este complet în tonuri de gri. O valoare de 0% lasă intrarea neschimbată. Valorile cuprinse între 0% și 100% sunt multiplicatori lineari ai efectului. Dacă parametrul „sumă” lipsește, se folosește o valoare de 100%. Valorile negative nu sunt permise.
sepia ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Convertește imaginea de intrare în sepia. Valoarea „sumă” definește proporția conversiei. O valoare de 100% este complet sepia. O valoare 0 lasă intrarea neschimbată. Valorile cuprinse între 0% și 100% sunt multiplicatori lineari ai efectului. Dacă parametrul „sumă” lipsește, se folosește o valoare de 100%. Valorile negative nu sunt permise.
satura()
filter: saturate(2); /* same as… */ filter: sature(200%);Saturează imaginea de intrare. Valoarea „sumă” definește proporția conversiei. O valoare de 0% este complet nesaturată. O valoare de 100% lasă intrarea neschimbată. Alte valori sunt multiplicatori lineari ai efectului. Sunt permise valori de peste 100%, oferind rezultate super-saturate. Dacă parametrul „sumă” lipsește, se folosește o valoare de 100%. Valorile negative nu sunt permise.
nuanță-rotire ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Aplică o rotație de nuanță pe imaginea de intrare. Valoarea „unghiului” definește numărul de grade din jurul cercului de culoare, probele de intrare vor fi ajustate. O valoare de 0 grade lasă intrarea neschimbată. Dacă parametrul „unghi” lipsește, 0degse folosește o valoare de . Valoarea maximă este 360deg.
inversa()
filter: invert(100%);Inversează mostrele din imaginea de intrare. Valoarea „sumă” definește proporția conversiei. O valoare de 100% este complet inversată. O valoare de 0% lasă intrarea neschimbată. Valorile cuprinse între 0% și 100% sunt multiplicatori lineari ai efectului. Dacă parametrul „sumă” lipsește, se folosește o valoare de 100%. Valorile negative nu sunt permise.
opacitate()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Aplică transparență eșantioanelor din imaginea de intrare. Valoarea „sumă” definește proporția conversiei. O valoare de 0% este complet transparentă. O valoare de 100% lasă intrarea neschimbată. Valorile cuprinse între 0% și 100% sunt multiplicatori lineari ai efectului. Acest lucru este echivalent cu înmulțirea probelor de imagine de intrare cu suma. Dacă parametrul „sumă” lipsește, se folosește o valoare de 100%. Această funcție este similară cu proprietatea de opacitate mai stabilită; diferența este că, cu filtrele, unele browsere oferă accelerare hardware pentru performanțe mai bune. Valorile negative nu sunt permise.
luminozitate ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Aplică un multiplicator liniar pentru imaginea de intrare, făcând-o să pară mai mult sau mai puțin strălucitoare. O valoare de 0% va crea o imagine complet neagră. O valoare de 100% lasă intrarea neschimbată. Alte valori sunt multiplicatori lineari ai efectului. Sunt permise valori de peste 100%, oferind rezultate mai luminoase. Dacă parametrul „sumă” lipsește, se folosește o valoare de 100%.
contrast()
filter: contrast(4); /* same as… */ filter: contrast(400%);Reglează contrastul intrării. O valoare de 0% va crea o imagine complet neagră. O valoare de 100% lasă intrarea neschimbată. Sunt permise valori peste suma de peste 100%, oferind rezultate cu un contrast mai mic. Dacă parametrul „sumă” lipsește, se folosește o valoare de 100%.
estompa()
filter: blur(5px); filter: blur(1rem);Aplică o estompare gaussiană pentru imaginea de intrare. Valoarea „razei” definește valoarea deviației standard față de funcția Gaussiană sau câți pixeli de pe ecran se amestecă unul cu celălalt, astfel încât o valoare mai mare va crea mai multă estompare. Dacă nu este furnizat niciun parametru, atunci se utilizează o valoare 0. Parametrul este specificat ca lungime CSS, dar nu acceptă valori procentuale.
umbra()
filter: drop-shadow((2,3) ?)Aplică un efect de umbră pentru imaginea de intrare. O umbră este efectiv o versiune estompată, decalată, a măștii alfa a imaginii de intrare desenată într-o anumită culoare, compusă sub imagine. Funcția acceptă un parametru de tip (definit în fundalurile CSS3), cu excepția faptului că cuvântul cheie „inset” nu este permis.
Această funcție este similară cu proprietatea box-shadow mai stabilită; diferența este că, cu filtrele, unele browsere oferă accelerare hardware pentru performanțe mai bune.
Drop-shadow imită, de asemenea, conturul obiectelor intenționate în mod natural, spre deosebire de box-shadowfaptul că tratează doar cutia ca pe calea sa.
La fel ca în cazul text-shadow, nu există parametru „spread” pentru a crea o umbră solidă mai mare decât obiectul.
url ()
filter: url()url()Funcția ia locația unui fișier XML care specifică un filtru SVG, și poate include o ancoră pentru un element de filtru specific. Iată un tutorial care funcționează ca o introducere drăguță a filtrelor SVG cu o demonstrație distractivă.
Filtre animate
Deoarece filtrele sunt animabile, poate deschide ușile pentru o mulțime de distracție.
Note
Puteți combina orice număr de funcții pentru a manipula redarea, dar ordinea încă contează (adică, utilizarea grayscale()după sepia()va avea ca rezultat complet gri).
O valoare calculată diferită de „none” are ca rezultat crearea unui context de stivuire la fel ca opacitatea CSS. Proprietatea filtrului nu are niciun efect asupra geometriei modelului de casetă al elementului țintă, chiar dacă filtrele pot provoca vopsirea în afara casetei de margine a unui element. Orice părți ale elementului țintă sunt afectate de funcțiile de filtrare. Aceasta include orice conținut, fundal, margini, decorarea textului, conturul și mecanismul de derulare vizibil al elementului la care se aplică filtrul și pe cele ale descendenților acestuia. Filtrele pot fi, de asemenea, aplicate pentru conținutul în linie, cum ar fi extensiile de text individuale.
Specificația introduce, de asemenea, o filter(image-URL, filter-functions)funcție de împachetare pentru o imagine. Vă va permite să filtrați orice imagine în momentul în care o utilizați în CSS. De exemplu, puteți estompa o imagine de fundal fără a estompa textul. Această funcție de filtrare nu este încă acceptată în browsere. Între timp, puteți aplica atât fundalul, cât și filtrul unui pseudo-element pentru a crea un efect similar.
Lucrurile de filtrare proprietare IE
De asemenea, a folosit filterproprietatea, cum ar fi:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Utilizat în principal pentru opacitate atunci când trebuia să susțineți IE 8 și versiunea inferioară.
Mai multe informatii
- Specificația efectelor filtrului W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galeria de filtre a lui Bennett Feely
- Documente MDN
- Pot folosi
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Înțelegerea efectelor de filtrare CSS
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 18 * | 35 | Nu | 79 | 6 * |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4 * | 6.0-6.1 * |