10 filtre CSS3 Explicate | Editează-ți imaginile direct din CSS3

10-filtre-css-jungla-online-baboon

Ne plac filtrele pentru imagini? Sigur că da!
Majoritatea tinerilor nu postează nici o imagine fără să-i pună unul sau mai multe filtre de culoare folosind diferite aplicații mobile sau PC. Până la urmă dacă ceva poate fi îmbunătățit de că să nu o facem?

Filtrele CSS oferă posibilitatea editării într-un timp real a elementelor de pe o pagină web.
De ce am specificat elemente și nu imagini? Pentru că aceste filtre pot fi aplicate oricărui tag, div, id sau selector pe lângă imagini. Sună interesant, așa-i ?

În continuare vor discuta despre 10 filtre CSS cu care ai posibilitatea să ajustezi culorile,
să estompezi (blur), să ascuți (sharp) și multe altele:

BLUR

Acest filtru aplică un efect de Gaussian Blur care dă senzația de ceață și neclaritate.
Tehnic vorbim Gaussian Blur-ul reduce zgomotul și detaliile estompând imaginea.
Valorile folosite sunt de la (1px) la (10px).

Vezi CSS-ul atribuit tagului “img”, iar după vezi și “Result” în următorul editor:

GRAYSCALE

Acesta este cel mai ușor mod de a desatura sau de a atribui un efect de alb-negru unui element sau imagine.
Valorile folosite sunt de la (0.1) la (1) sau de la (0%) la (100%).

DROP-SHADOW

Acest filtru oferă posibilitatea adăugării unei umbre. Pe de altă parte permite chiar și setarea poziției orizontale, poziției verticale, mărimii cât și a culorii.

Valorile folosite sunt împărțite în patru secțiuni cum ar fi:
“drop-shadow(40px 40px 20px black)” adică “drop-shadow(‘poziție’ ‘poziție’ ‘mărime’ ‘culoare’)”

SEPIA

Sepia este un filtru de culoare roșu-brun cu ajutorul căruia poți oferi un look Vintage imaginilor tale.

Valorile folosite sunt de la (0.1) la (1) sau de la (0%) la (100%).

BRIGHTNESS

Acest filtru îți permite să ajustezi luminozitatea cu o varietate foarte mare de valori.

Valorile folosite sunt de la (0.1) la peste (1) sau de la (0%) la peste (100%), chiar și (1000%) pentru a transforma totul în alb.

CONTRANST

Contrastul este diferența dintre extremele luminozității dintr-o imagine.
Acest filtru îți permite să ajustezi contrastul cu o varietate foarte mare de valori.

Valorile folosite sunt de la (0.1) la peste (1) sau de la (0%) la peste (100%), chiar și (1000%) pentru a avea un contur coarte definit.

HUE-ROTATE

Oferă posibilitatea rotirii nuanțelor de 4 ori în cerc rezultând 1440 de grade.

Valorile folosite sunt de la (0deg) la (1440deg), dar de obicei e bine să nu trecem peste (360deg).

INVERT

Acesta este efectul de negativ care practic inversează valorile culorilor prezente.

Valorile folosite sunt de la (0.1) la (1) sau de la (0%) la (100%).

SATURATE

Acest filtru poate sătura culorile dintr-o imagine chiar și de 10 ori față de normal.

Valorile folosite sunt de la (0.1) la peste (1) sau de la (0%) la peste (100%), chiar și (1000%) obținând astfel un contrast foarte mare și culori deranjant de puternice.

OPACITY

Acest filtru oferă posibilitatea de a afișa o imagine doar pe jumătate vizibilă, adăugându-i transparență.

Valorile folosite sunt de la (0.1) la (1) sau de la (0%) la (100%).

Sper că te-am ajutat să înțelegi cum să editezi imaginile folosind filtre CSS și mulțumesc pentru timpul acordat! ^_^

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

error: Content is protected !!