Cauta rapid aici ↑

CSS 3 -- BACKGROUND GRADIENT

Inainte de noul standard CSS 3 trebuia sa folosesti o imagine pentru a crea un efect de gradient pe fundalul unui element. Marele minus era acela ca daca intre timp iti doreai sa maresti acel element, trebuia sa schimbi si poza. O solutie de compromis pentru moment o reprezenta proprietatea background-size careia puteai sa ii dai ca valoare 100% si in acest mod browserul iti afisa imaginea de fundal pe intreaga latime a elementului. Aceasta metoda avea doua neajunsuri. Prima consta in modul in care iti era aratata imaginea gradient in browser pe inaltime, nu intotdeauna "incapea" in totalitate in noua dimensiune a elementului sau daca incapea in element, sigur ramanea si spatiu sub poza in element. Cel de al doilea neajuns era tocmai ca fiind vorba de o poza, atunci se crestea si timpul de incarcare al documentului HTML.

Standard-ul CSS 3 a rezolvat aceste probleme si iti ofera acum inca doua valorii pe care sa le folosesti la proprietatea background pentru a crea un fundal de gradient . Dupa cum stim exista doua tipuri de gradient :

  • gradient liniar
  • gradient radial

Valorile pentru fiecare tip de gradient sunt:

  • linear-gradient
  • radial-gradient

Pentru o compatibilitate maxima intre browsere si afisarea gradientului in toate browserele este necesar sa folositi urmatoarele prefixe:

  • INTERNET EXPLORER -ms-
  • CHROME -webkit-
  • MOZILLA FIREFOX -moz-
  • SAFARI -webkit-
  • OPERA -o-

CSS 3 -- VALOAREA linear-gradient

Pentru definirea unui gradient trebuiesc definite optional directia sau unghiul acestuia si cel putin doua culori asezate intre paranteze. Prima culoare reprezinta culoarea de plecare , iar ultima culoare reprezinta culoarea de sfarsit . Browserul va face tranzitia de la o culoare la alta, pe verticala, in intreg spatiul in care este declarat acest gradient si chiar daca vom micsora sau mari pe viitor, pe latime sau inaltime elementul, gradientul va ocupa intreg spatiul pe ambele laturi cu aceeasi tranzitie de la o culoare la alta, doar ca de aceasta data in noua dimensiune.

Spuneam mai sus ca este optional sa declari directia sau unghiul gradientului. Setarea default este de zero grade si de sus in jos. Putem sa ii setam gradientului unghiul din care sa inceapa si pentru asta trebuie sa adaugam intre cele doua paranteze, inainte de culorii, unghiul din care sa inceapa gradientul urmat de cuvantul deg (lb.engl. degrees).

CSS 3 -- VALOAREA radial-gradient

La fel ca si la gradientul liniar, trebuiesc declarate minim doua culori si in acest caz locul de unde sa plece gradientul. Setarea de baza este ca gradientul sa plece din centru insa noi putem modifica asta prin urmatoarele cuvinte si nu mai este nevoie de traducere.

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Aceste cuvinte trebuiesc asezate intre paranteze si inainte de culorii. Inaintea acestor cuvinte trebuiesc declarate procentajul pe axele X si Y de unde sa inceapa gradientul, separate doar de un spatiu liber.

Pentru exemplificare voi folosi setarea de baza.