Sfat rapid Înțelegerea gradientilor CSS3

Crearea unei imagini doar în scopul afișării unui gradient este inflexibilă și devine rapid o practică proastă. Din nefericire, în momentul acestei scrieri, ar putea fi totuși necesare, dar sperăm că nu pentru mult timp. Mulțumită Firefox și Safari / Chrome, acum putem crea gradienți puternici cu un efort minim. În acest sfat rapid, vom examina câteva dintre diferențele în sintaxă atunci când lucrăm cu prefixele furnizorilor -moz și -webkit.

Abonați-vă la pagina noastră YouTube pentru a viziona toate tutorialele video!

Webkit

În timp ce Mozilla și Webkit adoptă în general aceeași sintaxă pentru proprietățile CSS3, din păcate, nu sunt destul de de acord cu privire la declivități. Webkit a fost primul care a îmbrățișat declivitățile și folosește următoarea structură:

 / * Sintaxă, luată de la: http://webkit.org/blog/175/introducing-css-gradients/ * / -webkit-gradient (,  [, ]?,  [, ]? [, ] *) / * În practică ... * / fundal: -webkit-gradient (liniar, 0 0, 0 100%, de la (roșu) la (albastru));

Nu vă faceți griji dacă ochii vă strălucesc la acea sintaxă; a mea a făcut prea! Rețineți că avem nevoie de o listă de parametri separați prin virgulă.

Ce tip de gradient? (liniar)
Coordonatele axei X și Y de unde să înceapă. (0 0 - sau colțul din stânga sus)
Coordonatele axelor X și Y de unde să încheie (0 100% - sau colțul din stânga jos)
La ce culoare trebuie să începem? (De la (roșu))
Ce culoare să închei? (Până la (albastru))

Mozilla

Firefox, care a implementat suport pentru gradienți cu versiunea 3.6, preferă o sintaxă ușor diferită.

 / * Sintaxă, luată de la: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ * / -moz-linear-gradient ([ || ,]? ,  [, ] *) / * În practică * / fundal: -moz-linear-gradient (top, roșu, albastru);

Rețineți modul în care am plasat tipul de gradient, liniar, în cadrul extensiei furnizorului.
Unde ar trebui să înceapă gradientul? (deasupra - am putea trece, de asemenea, în grade, ca în -45deg)
Ce culoare să începem? (roșu)
Ce culoare să închei? (albastru)

Color-Opriri

Dacă nu aveți nevoie de un gradient de 100% de la o culoare la alta? Acesta este locul în care se pun în joc opririle culorilor. O tehnică comună de proiectare este aplicarea unui gradient scurt și subtil, cum ar fi:

Observați gradientul subtil alb-alb la partea de sus.

În trecut, implementarea standard a fost să creeze o imagine, să o stabilească ca fundal al unui element și să-l setați să se repete orizontal. Cu toate acestea, cu CSS3, acesta este un cinch.

 fundal: alb; / * backback pentru browserele mai vechi / nesuportante * / background: -moz-linear-gradient (top, #dedede, alb 8%); fundal: -webkit-gradient (liniar, 0 0, 0 8%, de la (#dedede) la (alb)); vârful frontal: 1 pix solid alb;

De data aceasta, am setat gradientul pentru a încheia la 8%, mai degrabă decât 100%, care este implicit. Rețineți că aplicăm, de asemenea, un top de frontieră pentru a adăuga contrast; acest lucru este foarte comun.

Dacă dorim să adăugăm o a treia (sau a n-a) culoare, putem face:

 fundal: alb; / * backback pentru browserele mai vechi / nesuportante * / background: -moz-linear-gradient (top, #dedede, alb 8%, roșu 20%); fundal: -webkit-gradient (liniar, 0 0, 0 100%, de la (#dedede), stop color (8%, alb), stop color (20%, roșu);

Cu versiunea -moz, desemnăm că, la 20% din înălțimea elementului, ar trebui să avem acum culoarea roșie.
Pentru -webkit, folosim oprirea culorilor și treceți în două parametri: unde ar trebui să se întâmple oprirea și ce ar trebui să fie culoarea.

Note importante despre gradienti CSS

Foloseste-le cat de mult poti. Dacă este bine să lăsați utilizatorii IE să vadă o culoare solidă, vă încurajez să utilizați această metodă.
IE6 / 7/8, Opera, Safari 3 și Firefox 3 nu pot face gradienți CSS3. Utilizatorii Firefox și Safari, în general, fac upgrade de multe ori, deci nu este la fel de mare ca o afacere.
Aplicați întotdeauna un background prestabilit, de culoare solidă pentru browsere care nu vor înțelege prefixele furnizorilor.
Nu utilizați niciodată un gradient roșu-albastru, așa cum am făcut pentru exemple.
Paginile web nu trebuie să arate la fel în fiecare browser! :)

Vă mulțumim pentru citire / vizionare!

Cod