Până acum, majoritatea programatorilor rezolvă problema afișării unui fundal gradient prin "alunecarea" unei imagini pe fundal și repetând-o vertical sau orizontal, în funcție de efectul dorit.
În ciuda faptului că posibilitatea de a obține o imagine de fundal gradient utilizând CSS a apărut destul de mult timp, această opțiune nu este încă foarte populară. De fapt, foarte puțini oameni doresc, în special în ceea ce privește proiectele comerciale, să-și gîndească problemele inutile pe capul lor, cu un layout cross-browser. Mai mult, până de curând, de exemplu, Opera nu a sprijinit gradientul CSS.
Astăzi, să examinăm un exemplu de cod CSS care vă permite să afișați un gradient vertical cu două culori. Apropo, Opera de la versiunea 11.10 acum susține, de asemenea, fundaluri gradient cu CSS.
Codul de mai jos funcționează în cele mai frecvente browsere: IE, FireFox, Opera, Chrome, Safari.
Adăugați codul în foaia de stil:
Acum, să ne uităm la ce este în el:
Cu prima linie, totul este clar. Aceasta este pentru browserele care nu acceptă funcționalitatea de umplere a gradientului.
Browserele Chrome și Safari funcționează pe platforma Webkit. Gradientul pentru acestea este descris de gradientul -webkit (tipul gradientului, punctul de început, punctul final, culoarea inițială, culoarea finală).
În Firefox, totul este la fel de simplu ca "trei ruble". Parametrii gradientului liniar sunt descriși de construcție: -moz-linear-gradient (punctul de plecare, culoarea inițială, culoarea finală).
Cu Opera, povestea este aceeași ca și cu Firefox, designul este diferit cu o singură literă: -o-gradient linear (punct de pornire, culoare de început, culoare finală).
Microsoft sa distins întotdeauna cu IE! Aici parametrii de umplere a gradientului sunt specificați prin filtru. Și mențiunea de gradientType mai mult despre batjocură este ca, pentru că în plus față de gradientType = 0 nu mai lucrează. Cel puțin era la momentul acestei scrieri:
Acest cod ar trebui să afișeze în mod normal un gradient vertical în toate browserele moderne.
Articole similare
Articole similare
Trimiteți-le prietenilor: