Share
Luați în considerare o situație în care trebuie să aveți versiuni cu contrast ridicat, estompate sau mai luminoase ale anumitor imagini pe site-ul dvs. web. Înainte de filtrele CSS, singurele opțiuni au fost să încărcați versiuni diferite ale acestor imagini sau să manipulați imaginile cu JavaScript.
Dacă nu doriți să manipulați pixelii din imaginea originală, filtrele CSS oferă o cale ușoară de ieșire. Să începem acest tutorial cu o scurtă discuție despre toate filtrele disponibile.
Acest filtru va aplica o imagine neclară gaussiană în imaginile dvs. Va trebui să furnizați o valoare de lungime care va determina câte pixeli trebuie să se amestece între ei. Aceasta implică faptul că o valoare mai mare va oferi o imagine mai neclară. Rețineți că nu puteți utiliza procentajul pentru a determina raza de estompare. Dacă nu specificați un parametru, se va folosi valoarea 0. Sintaxa corectă pentru utilizarea acestui filtru este:
filtru: estompare ()
estompa() filtrul nu acceptă valori negative.
Acest filtru va aplica un multiplicator liniar imaginilor dvs., făcându-le mai luminoase sau mai luminoase în comparație cu imaginile originale. Acceptă un număr, precum și o valoare procentuală. La 0% veți obține o imagine complet neagră. La 100% obțineți imaginea originală fără modificări. Valorile mai mari vor avea ca rezultat imagini mai strălucitoare. O valoare suficient de mare va transforma imaginea cea mai mare parte albă. Sintaxa adecvată pentru utilizarea acestui filtru este:
filtru: luminozitate ([| ])
Acest filtru nu acceptă nici o valoare negativă.
Acest filtru modifică contrastul imaginilor. La fel ca filtrul de luminozitate, acesta acceptă un număr precum și valori procentuale. O valoare de 0% va duce la o imagine complet gri. Setarea valorii la 100% nu are efect. Valorile mai mari de 100% vor produce imagini cu contrast ridicat. Nu vi se permite să utilizați valori negative cu contrast() filtru. Sintaxa adecvată pentru utilizarea acestui filtru este:
filtru: contrast ([| ])
Aproape fiecare dintre voi ar fi folosit cel puțin o dată umbrele de box. Problema cu umbrele de pe cutie este că acestea sunt neplacute. Nu le puteți folosi pentru a crea umbre de forme neregulate. Pe de altă parte, umbra filtrul creează umbre în jurul limitei unei imagini. Este o versiune neclară a măștii alfa a imaginii de intrare. Sintaxa adecvată de utilizat umbra este:
filtru: umbră (2,3 ? )
Primele două valori ale lungimii sunt obligatorii și setează offsetul orizontal și vertical al umbrei. Al treilea
Acest filtru va face imaginile dvs. în tonuri de gri. O valoare de 0% va lăsa imaginea neschimbată, în timp ce o valoare de 100% va face ca imaginea să fie complet în tonuri de gri. Orice valoare între aceste două efecte va fi un multiplicator liniar în acest sens. Nu puteți utiliza valori negative cu alb-negru() filtru. Sintaxa adecvată pentru utilizarea acestui filtru este:
filtru: tonuri de gri ([| ])
Acest filtru va aplica o rotire în culorile imaginilor. Parametrul (trecut ca un unghi) va determina numărul de grade în jurul cercului de culoare pe care vor fi ajustate imaginile. Cu o valoare 0deg imaginea finală va fi neschimbată. Dacă specificați o valoare care depășește 360deg, filtrul doar înfășoară. Sintaxa adecvată pentru utilizarea acestui filtru este:
filtru: hue-rotate ()
Acest filtru va inversa imaginile. Valoarea inversării depinde de valoarea parametrului pe care l-ați trecut. O inversiune de 0% nu va avea nici un efect asupra imaginii. Pe de altă parte, o valoare de 100% va inversa complet imaginea. O valoare de 50% va produce o imagine complet gri. Orice valoare între extreme va fi un multiplicator liniar al efectului. Acest filtru nu acceptă valori negative. Sintaxa potrivita pentru a utiliza inversa() filtrul este:
filtru: invers ([| ])
Filtrul de opacitate aplică transparența imaginii de intrare. O valoare de 0% implică faptul că doriți 0% opacitate, ceea ce duce la transparență completă. În mod similar, o valoare de 100% are ca rezultat o imagine complet opacă.
Filtrul este similar cu proprietatea de opacitate din CSS. Singura diferență este că, în acest caz, unele browsere pot oferi accelerare hardware pentru o performanță îmbunătățită. Sintaxa adecvată pentru utilizarea acestui filtru este:
filtru: opacitate ([| ]);
Acest filtru determină saturația imaginilor. Saturația în sine depinde de valoarea parametrului. Nu puteți utiliza valori negative cu acest filtru. La 0%, valoarea minimă posibilă, imaginea va fi complet nesaturată. Cu o valoare de saturație de 100%, imaginea rămâne neschimbată. Pentru a obține imagini super-saturate, va trebui să utilizați valori de peste 100%. Sintaxa adecvată pentru utilizarea acestui filtru este:
filtru: saturați ([| ])
Acest filtru va transforma imaginile originale în sepia. La valoarea de 100% veți obține o sepia completă, iar valoarea 0% nu va avea niciun efect asupra imaginii. Toate celelalte valori care se află între ele vor fi multiplicatori liniari ai acestui filtru. Nu aveți permisiunea de a utiliza valori negative cu acest filtru. Sintaxa potrivita pentru a utiliza sepia () filtrul este:
filtru: sepia ([| ])
S-ar putea să existe situații în care doriți să utilizați propriile filtre pe imagini. URL-ul filtrul va lua locația unui fișier XML care specifică un filtru SVG. De asemenea, acceptă o ancoră pentru un element de filtrare specific. Iată un exemplu care are ca rezultat posterizarea imaginii noastre:
// Filtrul // CSS necesar pentru a aplica acest filtru filtru: url (#posterize);
Rezultatul final după aplicarea filtrului ar arăta similar cu următoarea imagine:
Dacă nu sunteți mulțumit de rezultatul unui filtru individual, puteți aplica o combinație a acestora pe o singură imagine. Ordinea în care aplicați filtrele poate produce rezultate puțin diferite. Filtrele multiple pot fi aplicate în modul următor:
filtru: sepia (0,8) contrast (2); filtru: saturate (0,5) luminozitatea culorii (90deg) (1,8);
Când utilizați mai multe filtre împreună, prima funcție de filtrare din listă este aplicată imaginii originale. Filtrele ulterioare sunt aplicate la ieșirea filtrelor anterioare. Această demonstrație arată alte două combinații de filtre în acțiune.
În anumite circumstanțe speciale, ordinea filtrelor poate produce rezultate complet diferite. De exemplu, folosind sepia () după alb-negru() va produce o ieșire sepia și folosind alb-negru() după sepia () va duce la o ieșire în tonuri de gri.
Proprietatea filtrului poate fi animată. Cu combinația potrivită de imagine și filtre, puteți exploata această caracteristică pentru a crea unele efecte uimitoare. Luați în considerare fragmentul de cod de mai jos:
@ cadre cheie zi-noapte 0% filtru: hue-rotate (0deg) luminozitate (120%); 10% filtru: luminozitate roșie (0deg) (120%); 20% luminozitate filtru: hue-rotate (0deg) (150%); 90% filtru: luminozitatea nuantei rotative (180deg) (10%); Luminozitate 100% filtru: hue-rotate (180deg) (5%);
Eu folosesc nuanță-rotate () și luminozitate () filtrați împreună pentru a crea iluzia zilei și a nopții. Imaginea originală are o nuanță portocalie. Pentru până la 20% din animație, măresc gradul de strălucire treptat și păstrez rotația nuanță. Aceasta creează efectul unei zile însorite. Până când se termină animația, rotesc nuanța cu 180 de grade. Aceasta are ca rezultat o nuanță albastră. Combinând acest lucru cu o luminozitate foarte scăzută creează efectul nocturn.
Pe lângă cele 11 filtre discutate mai sus, există, de asemenea, personalizat() filtru. Acesta vă permite să creați diferite tipuri de efecte folosind shadere. Există câteva probleme cu personalizat() filtre care și-au oprit dezvoltarea. Adobe lucrează activ pentru a găsi soluții la problemele care apar atunci când se utilizează personalizat() Filtre. Sperăm că vor fi în curând disponibile dezvoltatorilor pentru a le utiliza în proiectele lor.
Acum, să ne întoarcem la drum. Filtrele sunt aplicate pe toate părțile elementului țintă, inclusiv orice text, fundal și frontiere. Iată un demo de bază pentru a încerca o combinație de filtre pe diverse imagini.
După cum ați văzut în ultimele două secțiuni, filtrele CSS pot schimba complet imaginile la care sunt aplicate. Cu toate acestea, uneori acest lucru nu este suficient. În următoarea parte a acestei serii, voi discuta cum să folosiți modurile de amestecare pentru a edita imagini.
Accentsconagua