gradient de fundal pe css fără imagini (gradient de fundal pe css3)

Curând, foarte curând, site-urile vor fi mai ușor pentru a încărca, și să le facă va fi posibil, la toate fără imagini.

Deja în browserele moderne pot face un gradient de fundal de orice complexitate folosind CSS, și este complet fără imagini.

Crearea CSS-gradienti fără imagini

Să presupunem că vrem să facem trecerea la fondul gradient de gri la negru. Pentru a face acest lucru, W3 Corporation a propus să utilizeze o specială directivă CSS3 liniar gradient.

Astfel, în conformitate cu versiunea W3, în scopul de a face gradient de fundal este suficient pentru a scrie în unitatea de selectare:

Și browser-ul le Desenați un gradient de fundal în bloc.

Evident, culori și puncte de control în gradientul poate fi de multe. încep parametru indică în ce direcție ar trebui să acopere gradientul - aceasta poate fi fie de sus a gradientului vertical direcționat sau spre stânga pentru direcțională orizontală.

Nu toate browserele suporta acest cip, atât timp cât există o serie de trucuri. Pentru browserele foarte vechi au nevoie pentru a specifica fie unele de culoare de fond medie (gradientul nu va fi deloc, dar fundalul nu este alb), sau prin specificarea unei imagini cu un gradient (deși în cazul în care scopul utilizării liniare gradient pe CSS - este reducerea numărului de imagini descărcate, atunci bespolenzno-l, pentru că în toate browserele imaginea oricum pentru a încărca, deși, și va fi apoi înlocuit cu un liniar gradient).
Pentru browserele IE-ca puteți utiliza gradienți bazate pe filtre și browsere de pe WebKit (Safari, Chrome) și Gecko (Mozilla), există întotdeauna o alternativă: -webkit-gradientului și -moz-liniar gradient, care ia parametri similari . Cum toți ar trebui să funcționeze, consultați următorul bloc de cod:

După redare, se pare ca acest lucru:

Generarea de gradienți în CSS

În practică, astfel de cazuri se ocupe cu desigur posibil, dar nu foarte convenabil, mult mai convenabil pentru a crea în mod automat astfel de blocuri de cod. Pentru a face acest lucru, există un număr destul de generatoare, dar cel mai mult mi-a placut generatorul de la ColorZilla

  • gradient de fundal pe css fără imagini (gradient de fundal pe css3)
    Cum sa se intinda CSS fundal
  • gradient de fundal pe css fără imagini (gradient de fundal pe css3)
    Decolorate, CSS și imagine CSS3 ...
  • gradient de fundal pe css fără imagini (gradient de fundal pe css3)
    Adăugarea unui stil CSS pentru substituentul