CSS3 continuă să promoveze maselor, și acum, în plus față de utilizarea border-radius și box-shadow, este deja posibil să se utilizeze un gradient umple fără utilizarea imaginilor externe.
Cum să faci asta, împărtășește cu amabilitate cu noi Robert Nyman.
Acum putem crea gradient umple direct din codul CSS, fără să folosim nicio imagine.
Diferențe între sintaxa și suportul browserului
Vestea bună este că lista browser-ul, gradienți suport CSS constau Firefox, Safari, Google Chrome și Internet Explorer ( «corect» Opera din nou, așa cum sa spus în articolul precedent, este pe drum). Vestea proastă este că implementarea acestei posibilități pentru fiecare browser este diferită. În cazul IE, o abordare antică își are originea în IE 5.5. Pentru browsere bazate pe WebKit (Safari și Google Chrome), care a introdus pentru prima dată sprijin pentru gradienți și utilizate pentru această pânză, Grupul de lucru CSS a introdus alte dialecte, sintaxa, care este implementat în Firefox (și cred că atunci el a venit și suport pentru browsere WebKit ovskih ).
Deci, avem suport CSS gradient pentru:
- Firefox 3.6
- Safari 4
- Google Chrome
- Internet Explorer 5.5
Să examinăm exemplul de cod:
Gradient linear, de sus în jos
Eu, - un gradient de sus în jos, și nu o imagine!
Gradient linear, de la stânga la dreapta
Acest gradient curge de la stânga la dreapta, 70% din lățimea elementului. Culoarea finală, după 70% nu va funcționa corect în Internet Explorer; Opțiunile FinishX și GradientSize nu se aplică la filtrul de gradient ...
Eu, - gradient de la stânga la dreapta, și nu o imagine!
Radiusul radial
Puteți să vă distrați și să faceți un gradient radial! Dar, din păcate, acest tip de gradient nu este acceptat în Internet Explorer.
Sunt un gradient radial!
Pentru gradientele liniare simple, această soluție este potrivită pentru a fi utilizată pur și simplu din CSS. Din păcate, capacitățile limitate ale Internet Explorer nu vă permit să vă bucurați la maxim de toate tipurile de gradienți.
Trimiteți-le prietenilor: