CSS3 Gradients Linear [CSS3 Sfaturi]
Gradient este o extraordinară caracteristică de culoare în CSS3. Mai degrabă decât să adăugăm o singură culoare, acum putem adăuga mai multe combinații de culori într-un bloc de declarații fără a se baza pe imagini, ceea ce ar putea reduce cererea HTTP din site-ul nostru, permițând încărcarea mai rapidă a site-ului.
Dacă ați jucat în jur cu gradiente în CSS3, probabil că sunteți familiarizat cu cele două metode: gradientul radial și liniar. Postul de astăzi va fi despre cel din urmă.
Crearea înclinărilor
După cum spune spec gradients în CSS3 este o imagine, ea nu are nici o proprietate specială ca alte adăugarea de noi caracteristici, deci este declarat folosind imagine de fundal proprietate în loc.
Dacă aruncăm o privire la sintaxa completă pentru gradient, pare puțin overstuffed, ceea ce ar putea duce la confuzie pentru unii oameni.
div fundal-imagine: -webkit-gradient linear (top, # FF5A00 0%, # FFAE00 100%); fundal-imagine: -moz-linear-gradient (sus, # FF5A00 0%, # FFAE00 100%); fundal-imagine: -ms-linear-gradient (sus, # FF5A00 0%, # FFAE00 100%); fundal-imagine: -o-linear-gradient (top, # FF5A00 0%, # FFAE00 100%); fundal-imagine: gradient liniar (top, # FF5A00 0%, # FFAE00 100%);
Deci, să săpăm fiecare parte a sintaxei unul câte unul pentru a face lucrurile mai clare.
În primul rând, gradientul liniar este declarat cu liniar gradient () funcţie. Funcția are trei valori primare. Prima valoare definește poziția de pornire a gradientului. Puteți utiliza un cuvânt cheie descriptiv, cum ar fi top pentru a porni gradientul care curge din top;
div fundal-imagine: gradient linear (top, # FF5A00, # FFAE00);
Fragmentul de mai sus este versiunea oficială a W3C pentru a crea gradienți. Este de fapt mai simplu și destul de auto-explicativ și va crea, de asemenea, următorul gradient.
Puteți utiliza, de asemenea fund pentru a face opusul, sau altceva dreapta și stânga.
De asemenea, putem crea un gradient diagonal folosind unghi grad ca poziție de pornire a gradientului. Iată un exemplu:
div fundal-imagine: gradient linear (45deg, #FF5A00, #FFAE00);
Fragmentul de mai sus va crea următorul gradient de culoare:
A doua valoare a funcției va spune prima culoare informații și informații oprire care este indicat în procente. Poziția de oprire este de fapt opțională; browserul este destul de inteligent pentru a determina poziția corectă, astfel încât atunci când nu specificăm oprirea primei culori pe care o va face browserul 0% ca implicit.
Și, următoarea valoare este a doua culoare combinaţie. Funcționează ca valoarea precedentă, doar dacă este ultima culoare aplicată și nu specificăm oprire, o valoare de 100% va fi considerată implicită. Acum, să examinăm exemplul de mai jos:
div fundal-imagine: gradient liniar (top, # FF5A00 0%, # FFAE00 100%);
Fragmentul de mai sus va crea un gradient ca cel pe care l-am văzut mai devreme (nu există nicio diferență), dar acum specificăm poziția de oprire a culorii;
Acum hai să schimbăm oprirea culorii, și de data aceasta vom specifica 50% pentru prima culoare și 51% pentru cea de-a doua culoare și să vedem cum se pare;
div fundal-imagine: gradient liniar (top, # FF5A00 50%, # FFAE00 51%);
Transparenţă
Crearea de transparenţă în gradient este de asemenea posibil. Pentru a crea efectul trebuie să traducem culoarea hex în RGBA mod și să coborâți canalul alfa.
div fundal-imagine: gradient liniar (top, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Fragmentul de mai sus va reduce intensitatea culorii prin 20%, iar gradientul se va manifesta astfel:
Culori multiple
Dacă doriți să adăugați mai multe culori, trebuie doar să adăugați culorile de lângă alta cu un delimitator de virgule și să lăsați browserul să determine fiecare poziție de oprire a culorii.
div fundal-imagine: gradient liniar (top, roșu, portocaliu, galben, verde, albastru, indigo, violet);
Fragmentul de mai sus va crea următorul curcubeu.
Compatibilitatea browserului
Din păcate, la momentul acestei scrieri, toate browserele actuale nu au încă de suportat sintaxa standard. Ei au încă nevoie de prefixul furnizorului (-WebKit-, -Moz-, -Domnișoară- și -o-). Din acest motiv, sintaxa completă apare astfel:
div fundal-imagine: -webkit-gradient linear (top, # FF5A00 0%, # FFAE00 100%); fundal-imagine: -moz-linear-gradient (sus, # FF5A00 0%, # FFAE00 100%); fundal-imagine: -ms-linear-gradient (sus, # FF5A00 0%, # FFAE00 100%); fundal-imagine: -o-linear-gradient (top, # FF5A00 0%, # FFAE00 100%); fundal-imagine: gradient liniar (top, # FF5A00 0%, # FFAE00 100%);
Pe de altă parte, Internet Explorer, în special versiunea 9 și versiunea inferioară, este departe de standard. Gradientul din IE9 și mai jos este declarat cu filtru, dacă vrem să adăugăm un gradient pe acele browsere, trebuie să scriem ceva de genul acesta;
div filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = #FF5A00, endColorstr = # FFAE00);
filtru are limitările sale: în primul rând, nu permite mai mult de trei culori adăugate, iar crearea efectului de transparență este, de asemenea, un pic dificil - nu permite RGBA, dar IE filtru utilizări #ARGB;
div filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Iată un instrument care vă ajută să vă convertiți RGBA la #ARGB.
- Demo
- Descărcați sursa
Scrierea sintaxei mai rapid
După cum puteți vedea mai sus, pentru a menține compatibilitatea cu gradiente în browsere, trebuie să adăugăm încă cinci linii de coduri care sunt ineficiente.
Există multe modalități pe care le putem face pentru a simplifica sarcina; cum ar fi utilizarea Prefix-free, Prefixr, LESS sau Sass pentru a ajuta la compilarea codurilor, dar mai presus de toate, vă recomandăm să utilizați acest instrument, ColorZilla Gradient. Acest instrument va genera pur și simplu toate codurile necesare pentru ca gradienții să funcționeze în toate browserele.
Cuvintele finale
Astăzi am discutat destul de mult despre crearea de gradienți, am analizat fiecare parte a sintaxei, creând efecte transparente și păstrând compatibilitatea browser-ului. Deci, în acest moment, sperăm că aveți deja o înțelegere mai bună asupra subiectului.
Mai sunt încă multe lucruri pe care intenționăm să le explorăm Gradienți CSS3 în postările noastre viitoare, deci stați pe ton pe Hongkiat.com. În cele din urmă, vă mulțumesc pentru că ați citit acest post, sperăm că v-ați bucurat.
Citirea în continuare
- Bullet Proof Cross Browser Backgrounds RGBA - Lea Verou
- Imagine CSS3 - W3.org
- Când pot folosi gradientele CSS3 - CanIUse.com
