Gradient css gri. Gradient liniar

o! Gradientul este un instrument excelent pentru manipularea culorii CSS3. În loc să folosiți o imagine pentru a crea un efect de gradient pe o pagină web, ar fi mai benefic de utilizat gradient CSS3și astfel „luminează” site-ul. Deoarece utilizatorul nu va trebui să piardă timp și trafic încărcând imaginea de fundal. Există două tipuri principale de gradient: radial și liniar. Postarea de azi va fi despre ei.

Gradient liniar

După cum spune clasificarea, gradienți în CSS3 sunt imagini. Nu există proprietăți speciale pentru ei. Și anunțul folosește proprietatea imagine de fundal.

ÎN caz general Sintaxa gradientului (liniară) arată astfel:

Deci, să vorbim despre totul în ordine.

În primul rând, un gradient liniar este declarat de funcția linear-gradient(). Funcția are trei semnificații principale. Prima valoare defineste pozitia de pornire. Exemplul indică partea de sus, adică pozitia de pornire de sus. De asemenea, puteți utiliza jos, stânga și dreapta;

Dacă unghiul este negativ, poziția se va schimba din colțul din stânga jos în stânga sus.

A doua valoare a funcției este culoarea de pornire și poziția sa de oprire, care este indicată ca procent. Declararea acestei poziții nu este necesară; browserul va fi implicit la 0% pentru prima culoare.

Ultima valoare este a doua culoare și poziția sa de oprire. Implicit la 100%. Aceste valori extreme înseamnă că prima culoare începe imediat să treacă în a doua. Cu toate acestea, dacă setăm prima culoare la 50%, atunci va începe abia să treacă la a doua de la mijlocul înălțimii disponibile. Iată cum arată codul:

Obținem benzi de înălțime egală. Cu o margine clară, nu va exista nicio tranziție de culoare. Pentru a înțelege mai bine cum funcționează, experimentați cu valorile.

Un gradient radial, la fel ca unul liniar, este declarat ca o funcție, doar radial-gradient() . Există și valori de bază: aceasta este forma gradientului radial (cerc - cerc sau elipsă - elipsă), culoarea inițială și finală. Sintaxa este următoarea:

Dacă nu specificați o formă, atunci implicit va fi o elipsă.

De asemenea, poziția centrală a gradientului este setată implicit; Poziția poate fi specificată folosind comenzi (sus, jos, stânga, dreapta și centru), precum și combinațiile acestora, sau specificate în procente sau pixeli.

Combinații de comenzi:

• Centru în partea de sus - sus - 50% 0%;
• În colțul din stânga sus - stânga sus - 0% 0%;
• În colțul din dreapta sus - dreapta sus - 100% 0%;
• În centru - centru - 50% 50%;
• Centru stânga - centru stânga - 0% 50%;
• Centru dreapta - centru dreapta - 100% 50%;
• Centru jos - jos - 50% 100%;
• În colțul din stânga jos - jos din stânga - 0% 100%;
• În colțul din dreapta jos - din dreapta jos - 100% 100%.

Iată un exemplu cu procente:

Valoarea primei axe X secunda in U.

De asemenea, puteți seta dimensiunea gradientului radial. Mărimea este indicată cu un spațiu după forma gradientului. Aplicați implicit cel mai îndepărtat-colț(până la colțul îndepărtat). Calculul se efectuează din punctul central al gradientului la:

Pentru a înțelege mai bine acest lucru, să ne uităm la un exemplu. Un gradient de formă eliptică cu o culoare de început albă și de sfârșit albastru:

Mărimea este calculată de la distanța la părțile apropiate, este evident că partea de sus este mai aproape de-a lungul axei Yși stânga de-a lungul axei X.

Și acum spre părțile îndepărtate:

Rezultatul, după cum se spune, este evident. Mărimea este calculată de la distanță până la părțile îndepărtate.

În gradienți radiali, precum și liniari, pozițiile de oprire pot fi utilizate pentru culoare. De asemenea, aș dori să remarc că, dacă trebuie să obțineți transparență a culorii, ar trebui să utilizați rgba.

Canalul alfa, ultimul și egal cu 0,2, indică faptul că se folosește doar 20% din 100% din culoare.

În ambele tipuri gradient CSS3 Puteți folosi nu două, ci mai multe culori.

Pentru ambele tipuri, pot fi folosite culori repetate. Adică din aceste valori se formează un ciclu. Funcții de gradient repetat, repetare-linear-gradient() pentru liniar și repetare-radial-gradient() pentru radial.

0% , #FFAE00 100% );
/* pentru Firefox */
imagine-de-fond: -ms-linear-gradient(sus , #FF5A00 0% , #FFAE00 100% );
/* pentru IE 10+ */ imagine-de-fond: -o-linear-gradient(sus , #FF5A00 0% , #FFAE00 100% );
}

div(
/* pentru Opera */
}

imagine de fundal : gradient liniar (sus , #FF5A00 0% , #FFAE00 100% );

/* sintaxa standard */

filtru : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 ) ;

Unde 33 imediat după hash este procentul de saturație a culorii. Sper că articolul v-a fost de folos și că subiectul discutat a fost acoperit pe deplin..

Pentru a fi la curent cu cele mai recente articole și lecții, abonați-vă la

• Când vorbim despre gradienți în CSS, vorbim despre gradiente colorate Există două tipuri de gradienți în CSS: liniar
• : culorile merg de la un punct la altul, de-a lungul direct linii; radial

: culorile merg de la centrul cercului până la marginile acestuia, în toată lumea direcții.

Se ia în considerare gradientul

imagine de fundal

• și trebuie utilizat cu proprietatea corespunzătoare. liniar-gradient;
• Sintaxa pentru gradienții liniari este destul de complexă, dar ideea de bază este următoarea: determina dorit culorile
• unde ar trebui să apară aceste culori de-a lungul axei(la început, mijloc, sfârșit etc.);

în care

direcţie

Să începem cu un gradient simplu de două culori:

• Div ( imagine de fundal: gradient liniar (roșu, albastru); ) Gradent de fundal vertical simplu.
• Implicit: direcție verticală , de sus în jos; primul
• colorează în direcție verticală început(Sus);

doilea

Sfârşit

• (jos). Schimbarea direcției Dacă direcția de sus în jos nu vă convine, o puteți schimba la una dintre opțiuni:
• defini atribuirea gradientului, folosind cuvinte cheie precum la stânga sus ;

determina specifice colţîn grade, ca 45 de grade.

Această direcție trebuie stabilită

Graent diagonal de la stânga colțul de susîn colțul din dreapta jos. Daca vrei sa intrebi:

• unghi specific
• , apoi puteți utiliza valoarea în
• grade
• 0deg - de jos în sus;

20deg - ușor în diagonală, mergând în sensul acelor de ceasornic;

180deg este implicit, de sus în jos.

Div ( imagine de fundal: gradient liniar (20 de grade, verde, albastru); lățime: 150 px; ) Gradient diagonal cu un unghi de 20 de grade. Adăugând mai multe culori

• doua culori: 0% și 100%
• trei culori: 0%, 50% și 100%
• patru culori: 0%, 33%, 67% și 100%

Div ( imagine de fundal: gradient liniar (portocaliu, gri, galben); lățime: 150 px; )

Definirea anumitor puncte de culoare

Dacă nu doriți ca culoarea să fie distribuită uniform, puteți seta anumite poziții de culoare folosind fie procente (%), fie pixeli (px):

Div ( imagine de fundal: gradient liniar (portocaliu, gri 10%, galben 50%); lățime: 150px; )

În acești parametri:

• la culori portocalii nu a fost specificată nicio poziție de culoare, deci valoarea implicită este 0%;
• culoarea gri este mai aproape de vârf, 10% în loc de 50%;
• Culoarea galbenă ocupă jumătate din gradient, de la 50% până la sfârșitul 100%.

radial-gradient

În timp ce gradienții liniari urmează o singură axă, gradienti radiali răspândit în toate direcțiile. Sintaxa lor este foarte asemănătoare cu gradienții liniari, deoarece ambele au puncte de culoare. Dar în loc să specificați o direcție, trebuie să specificați:

• formă: cerc sau elipsă;
• punct de plecare: care va fi centrul unui cerc sau elipse;
• punctul final: unde va fi marginea cercului sau elipsei.

Div (imagine de fundal: gradient radial (roșu, galben); umplutură: 1rem; lățime: 300px; )

Să începem cu un gradient simplu de două culori:

• gradientul este elipsă;
• prima culoare începe la centru;
• ultima culoare se termină în colţul cel mai îndepărtat.

Poziția de pornire

Poziția de pornire funcționează ca poziție de fundal. Îl puteți instala prin cuvânt cheie la.

Div ( imagine de fundal: gradient radial (at dreapta sus, negru, gri deschis);

latime: 300px; )

Zi mohorâtă. colţul cel mai îndepărtat Poziția finală

• În mod implicit, formularul se termină la
• . Puteți alege:
• partea cea mai apropiată
• cel mai apropiat colț

partea cea mai îndepărtată

Div ( imagine de fundal: gradient radial(cel mai apropiat colț la 20px 20px, verde, albastru); padding: 1rem; lățime: 300px; ) div:hover (imagine de fundal: gradient radial (partea cea mai îndepărtată la 20px 20px, verde, albastru)

Treceți mouse-ul peste această stea verde de pe cer pentru a vedea cum se extinde. Dimensiune fixă:

În loc să setați pozițiile de început și de sfârșit, puteți seta pur și simplu

Div ( imagine de fundal: gradient radial (20px 10px la 75% 50%, violet închis, roz); umplutură: 1rem; lățime: 300px; ) Un mic disc violet într-o mare roz. Gradientele în CSS sunt puternice date

• număr infinit

opțiuni. instrumente CSS au o aplicație mai largă decât credeam. Dar pentru a putea găsi această aplicație, este necesar să înțelegeți clar caracteristicile proprietății. Un exemplu izbitor a devenit liniar-gradient, pe care Lynn Fisher l-a folosit cu măiestrie în lucrările sale.

Vrei să-l faci drăguț fundal gradient pe site-ul dvs.? imagine de fundal: gradient liniar (roșu, albastru); gata! Da, e puțin plictisitor. Așa că dacă vrei ceva mai mult, îți recomand această pagină cu sfaturi css și MDN. mai esti aici? Apoi, să ne uităm la câteva puncte despre cum funcționează de fapt gradienții liniari. Mai întâi, să ne amintim sintaxa care poate fi utilizată în funcția de gradient liniar:

gradient-liniar ([din<угла>| la<стороны-или-угла>]?, );
Funcția primește un prim argument opțional care specifică unghiul gradientului, care poate fi exprimat folosind o unitate de măsură (grad, rază, grade, revoluție) sau ca un cuvânt cheie (latură sau unghi).

Funcția acceptă apoi o listă de culori.

Câmp gradient

De obicei, atunci când aplicați o imagine de fundal cu gradient liniar unui element DOM, acea zonă este chenarul elementului (care este chiar zona în care culoarea de fundal).

Mai mult decât atât, dacă folosiți și proprietatea CSS background-size și o setați la, de exemplu, 200px * 200px, atunci câmpul gradient va avea această dimensiune și va fi, implicit, plasat în colțul din stânga sus al elementului DOM, cu excepția cazului în care setați și poziția de fundal.

Așadar, pe măsură ce citiți următoarele secțiuni, amintiți-vă că caseta cu gradient nu este întotdeauna poziționată sau dimensionată la fel ca elementul DOM la care aplicați gradientul.

Linie de gradient

Unghi de gradient

Dacă C este punctul central al câmpului de gradient, atunci A este unghiul dintre linia verticală prin C și linia de gradient care trece și ea prin C, de-a lungul căreia sunt distribuite culorile de oprire ale gradientului.

Acest unghi poate fi determinat în două moduri:

Folosind unul dintre cuvintele cheie: sus (sus), jos (jos), la stânga (stânga), la dreapta (dreapta), la dreapta sus (sus dreapta), la stânga sus (sus stânga), la dreapta jos ( jos dreapta), jos stânga (jos stânga);
Sau prin definirea unui unghi cu un număr și o unitate de măsură, de exemplu 45deg (45 grade), 1turn (1 turn);

Dacă unghiul nu este specificat, atunci în mod implicit este îndreptat în jos (adică este de 180 de grade sau 0,5 spire):

În exemplul de mai sus, nu este specificat niciun unghi, astfel încât gradientul alb spre roșu se deplasează de sus în jos, corespunzător cuvântului cheie în jos, după cum se arată mai jos:

Și, așa cum se arată în următoarele 2 imagini, în sus corespunde unui unghi de zero grade:

Altul punct important Ceva demn de luat în considerare atunci când utilizați cuvinte cheie unghi - că în dreapta sus, de exemplu, (sau orice alt cuvânt cheie unghi) depinde de dimensiunile casetei de gradient.

Logica este că, dacă doriți să faceți un gradient de la roșu la albastru spre colțul din dreapta sus al unui element, atunci elementul ar avea albastru în colțul din dreapta sus, iar culoarea violet din mijlocul gradientului s-ar forma în jurul unui linie care se extinde din colțul din stânga sus până în colțul din dreapta jos. Iată cum arată în imagine:

Deci, în dreapta sus, nu înseamnă că linia de gradient trece prin colțul din dreapta sus și nici măcar nu înseamnă că unghiul de gradient este de 45 de grade!

Să aruncăm o privire la cum se mișcă linia de gradient pe măsură ce unghiul se schimbă cu următoarea animație:

Să ne amintim ce știm despre unghiurile de gradient:

Unghiul este măsurat între linia de gradient și linia care părăsește centrul câmpului de gradient și se mișcă în sus.
Prin urmare, 0 grade înseamnă sus.
Valoare standard unghiul, dacă nu este specificat, este în jos, care este egal cu 180 de grade.
Cuvintele cheie unghi depind de dimensiunea câmpului gradient.

Lungimea liniei de gradient

Uită-te la exemplul:

Dorim un gradient roșu spre albastru la un unghi de 45 de grade și, datorită raportului de aspect al câmpului de gradient, linia de gradient nu poate trece prin colțul din dreapta sus.

Dar browserul vrea (adică specificațiile îl forțează) să facă colțul din dreapta sus de culoare albastru pur. Dacă am făcut ca linia de gradient să înceapă și să se termine la marginile câmpului, atunci albastru luat majoritatea câmpuri, iar gradientul nu s-ar estompa atât de mult.

Deci, pentru a face acest lucru, linia de gradient trebuie să se extindă uneori dincolo de caseta de gradient. În același timp, este destul de ușor să afli unde începe și unde se termină. Pur și simplu trageți o linie care trece prin colțul cel mai apropiat și este perpendiculară pe linia de gradient. Punctul în care această linie intersectează linia de gradient este locația de început/sfârșit.

De fapt, dacă specificați lățimea câmpului de gradient W, înălțimea H și unghiul gradientului, atunci lungimea liniei de gradient este:

Abs(W * sin(A)) + abs(H * cos(A))

Culori

Prin urmare, nu este necesar să specificați unde trebuie plasate culorile de-a lungul liniei de gradient. De exemplu:

De fapt exemplu simplu cu doar 2 culori, culoarea 1 va fi plasată la 0% (la începutul liniei de gradient) și culoarea 2 va fi plasată la 100% (la sfârșitul liniei de gradient).

Apoi, dacă adăugați o a treia culoare, veți avea în continuare culoarea 1 la 0%, culoarea 2 la 50% și culoarea 3 la 100% și așa mai departe.

În exemplul de mai sus, au fost date 5 culori de oprire, iar browserul a calculat poziția lor relativă ca 0%, 25%, 50%, 75%, 100%. Motivul pentru aceasta este distribuție uniformă de-a lungul câmpului de gradient.

Poziția unei culori poate fi exprimată fie prin procent(față de dimensiunea liniei de gradient) sau ca lungime CSS (unde este validă orice unitate Dimensiuni CSS).

Iată un exemplu:

După cum puteți vedea, fiecare dintre cele 5 culori stop are propria sa poziție, specificată în pixeli. Aceste poziții sunt calculate de la începutul liniei de gradient.

Folosind astfel de poziții, puteți obține mai multe efecte interesante. De exemplu, puteți folosi un gradient pentru a nu desena gradientul în sine, ci pentru a lăsa câteva culori:

Există 7 culori în imaginea de mai sus și sunt setate astfel încât următoarea culoare să înceapă exact în aceeași poziție cu ultima, ceea ce înseamnă că browserul nu trebuie să umple spațiul dintre cele două culori de oprire cu un gradient.

Sigur, totul este drăguț și amuzant, dar ce se întâmplă când amesteci culorile poziționate cu cele nepoziționate? Apoi, vei forța browserul să lucreze mai mult și îi vei cere să distribuie automat culorile pentru care nu ai specificat o poziție:

În acest exemplu simplu, a doua culoare (portocalie) nu are nicio poziție, așa că browserul o determină și găsește un loc potrivit între culoarea specificată anterior și următoarea culoare. Aici este foarte simplu, din moment ce vecinii imediati ai celei de-a doua culori au propria poziție, dar dacă doar unele culori au poziții, sau dacă culorile anterioare sau următoare nu au o poziție, lucrurile se complică.

Să ne uităm la câteva exemple:

În exemplul de mai sus, doar a treia culoare (galben) este poziționată la 30%. Deci, pentru a distribui mai bine pe toate celelalte, prima este plasată la 0%, ultima la 100%, iar culorile rămase sunt distribuite între ele (astfel încât portocaliul ajunge direct între 0% și 30%, iar roșu între 30% și 100%).

În exemplul de mai sus, prima și ultima culoare sunt poziționate, astfel încât restul sunt distribuite uniform între aceste două.

Desigur, ar fi prea simplu dacă 0% și 100% ar fi limite rigide care nu pot fi depășite. Dar după cum puteți vedea din exemplul anterior, ultima culoare este situată la 120% și, prin urmare, toate celelalte culori trebuie să fie distribuite în mod corespunzător în raport cu această poziție (punctul de pornire implicit în acest caz rămâne 0%).

Și dacă vrei să-ți faci browserul să funcționeze și mai greu, de ce să nu specifici ordinea pozițiilor?

De fapt, culorile ar trebui să fie în ordine, dar nimic nu te împiedică să faci asta și nimic groaznic nu se va întâmpla dacă nu o faci. Browserul dvs. va remedia totul, așa cum se arată mai jos:

Să începem cu prima culoare (roșu), situată la 30%. Apoi, a doua culoare este situată la 10%, ceea ce este deja incorect, deoarece, așa cum sa menționat mai sus, culorile ar trebui să fie indicate în poziție ascendentă. Deci aici browserul corectează poziția celei de-a doua culori și o setează în aceeași poziție cu culoarea anterioară (30%). Urmează a treia culoare (galben) situată la 60%, ceea ce este corect, dar este urmată de o a patra (albastru) la 40%. Din nou, poziția este ajustată și setată la aceeași valoare ca și culoarea poziționată anterior.

În cele din urmă, așa cum se arată în exemplul de mai sus, ultima culoare (albastru) este poziționată incorect și browser-ul își face poziția la aceeași cu culoarea anterioară, care în în acest caz, nu este nici vecinul său imediat (galben), nici vecinul cu culoarea care îi vine înainte (portocaliu), deci trebuie să revină la prima culoare (roșu). În acest fel, toate culorile dintre roșu și albastru sunt setate la 30% și, prin urmare, sunt invizibile.

Instrumente

Instrumentul are tot felul de erori și limitări (vezi comentariile javascript), așa că nu vă așteptați la mare lucru de la el.

Etichete:

• CSS
• Se ia în considerare gradientul

Vlad Merjevici

Se numește gradientul tranziție lină de la o culoare la alta și pot exista mai multe culori în sine și tranziții între ele. Cu ajutorul gradienturilor se creează cele mai bizare efecte de web design, de exemplu, pseudo-tridimensionalitate, strălucire, fundal etc. De asemenea, cu un gradient, elementele arată mai atractiv decât cele monocromatice.

Nu există nicio proprietate separată pentru adăugarea unui gradient, deoarece este considerată o imagine de fundal, deci este adăugată prin proprietatea background-image sau prin proprietatea generică de fundal, așa cum se arată în exemplul 1.

Exemplul 1: Gradient

Aici idiomul obscen începe în mod tradițional imaginea prozaică, dar jocul de limbaj nu duce la o înțelegere dialogică activă.

Rezultat acest exemplu prezentată în fig. 1.

Orez. 1. Gradient liniar pentru paragraful

În chiar caz simplu cu două culori demonstrate în exemplul 1, scrieți mai întâi poziția din care va începe gradientul, apoi culorile de început și de sfârșit.

Pentru a înregistra o poziție, scrieți mai întâi la , apoi adăugați cuvintele cheie sus , jos și stânga , dreapta , precum și combinațiile acestora. Ordinea cuvintelor nu este importantă, puteți scrie în stânga sus sau în stânga sus. În tabel 1 prezintă diferite poziții și tipul de gradient obținut pentru culorile #000 și #fff, altfel de la negru la alb.

În loc de un cuvânt cheie, puteți specifica panta liniei de gradient, care arată direcția gradientului. Mai întâi se scrie valoarea pozitivă sau negativă a unghiului, apoi se adaugă grade.

Zero grade (sau 360º) corespunde gradientului de jos în sus, apoi numărătoarea inversă este în sensul acelor de ceasornic. Unghiul de pantă al liniei de gradient este prezentat mai jos.

Pentru valorile din stânga sus și similare, unghiul de înclinare al liniei de gradient este calculat pe baza dimensiunilor elementului, astfel încât să se conecteze două puncte de colț diagonal opuse.

Pentru a crea degrade complexe, două culori nu vor mai fi suficiente; În acest caz, puteți utiliza culoare transparentă(cuvânt cheie transparent) și, de asemenea, folosind translucid format RGBA, așa cum se arată în exemplul 2.

Exemplul 2: Culori translucide

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Gradient cu culori translucide

Pentru a poziționa cu precizie culorile într-un gradient, valoarea culorii este urmată de poziția sa în procente, pixeli sau alte unități. De exemplu, înregistrați roșu 0%, portocaliu 50%, galben 100%înseamnă că gradientul începe cu roșu, apoi 50% portocaliu și apoi până la capăt galben. Pentru simplitate, unitățile extreme precum 0% și 100% pot fi omise; Exemplul 3 arată cum să creați un buton gradient în care poziția celei de-a doua culori din trei este setată la 36%.

Exemplul 3: Butonul Gradient

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Apăsați-mă ușor

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Butonul gradient

Prin setarea poziției culorii, puteți obține tranziții clare între culori, ceea ce oferă în cele din urmă un set de dungi monocromatice. Deci, pentru două culori trebuie să specificați patru culori, primele două culori sunt aceleași și încep de la 0% la 50%, culorile rămase sunt, de asemenea, aceleași și continuă de la 50% la 100%. În exemplu, 4 dungi sunt adăugate ca fundal al paginii web. Datorită faptului că valorile extreme sunt înlocuite automat, acestea nu pot fi specificate, așa că este suficient să scrieți doar două culori.

Exemplul 4. Dungi simple

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Burghezia și respectabilitatea tipică europeană sunt ilustrate elegant de limba oficială.

Rezultatul acestui exemplu este prezentat în Fig. 4. Rețineți că una dintre culorile gradientului este setată la transparentă, deci se schimbă indirect prin culoarea de fundal a paginii web.

Orez. 4. Fundal de dungi orizontale

Gradientele sunt destul de populare printre designerii web, dar adăugarea lor este complicată de proprietăți diferite pentru fiecare browser și de specificarea mai multor culori. Pentru a vă fi mai ușor să creați degrade și să le inserați în cod, vă recomand site-ul www.colorzilla.com/gradient-editor cu ajutorul căruia puteți configura cu ușurință degrade și obțineți imediat codul necesar. Disponibil șabloane gata făcute(Presetări), vizualizarea rezultatului (Preview), ajustarea culorilor (Adjustments), cod final (CSS) care acceptă IE prin filtre. Pentru cei care au lucrat în Photoshop sau altele editor grafic, crearea de degrade va părea o bucată de tort, dar pentru alții nu va fi dificil să-și dea seama rapid. In general, il recomand cu caldura.

În curând, foarte curând, site-urile web se vor încărca mai ușor și pot fi făcute deloc fără imagini.

Deja acum in browsere moderne puteți face un fundal gradient de orice complexitate cu Ajutor CSS, și în același timp complet fără imagini.

Crearea degrade CSS fără imagini

Să presupunem că vrem să facem o tranziție gradient în fundal de la gri la negru. Pentru a realiza acest lucru, W3 Corporation a propus utilizarea unei directive speciale de gradient liniar în CSS3.

Deci, conform versiunii W3, pentru a face un fundal gradient, trebuie doar să scrieți în selectorul de bloc:

Fundal: liniar-gradient(start, culoare1 poziție1, culoare2 poziție2,...,culoareN pozițieN);

Și browserul va desena automat un fundal gradient în bloc.

Este evident că florile şi puncte de control pot fi multe în gradient. Parametru început specifică în ce direcție ar trebui să se propage gradientul - poate fi fie top pentru un gradient direcţional vertical sau stânga pentru direcțional orizontal.

Nu toate browserele acceptă această funcție, așa că deocamdată există o serie de trucuri. Pentru browserele foarte vechi, trebuie fie să specificați o culoare medie de fundal (nu va exista deloc gradient, dar fundalul nu va fi alb), fie să specificați o imagine cu un gradient (cu toate acestea, dacă scopul utilizării gradientului liniar). în CSS este reducerea numărului de imagini încărcate, atunci acest lucru este inutil, deoarece în toate browserele imaginea va fi încă încărcată, deși ulterior va fi înlocuită cu gradient liniar).
Pentru browserele similare IE, puteți utiliza gradienți bazați pe filtre, iar pentru browserele webkit (Safari, Chrome) și gecko (Mozilla), ca întotdeauna, există o alternativă: -webkit-gradient și -moz-linear-gradient, care accepta parametri similari. Vedeți următorul bloc de cod pentru a afla cum ar trebui să funcționeze toate acestea:

Fundal: #999; filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la(#ccc), la(#000)); fundal: -moz-linear-gradient(sus, #ccc, #000);

După randare arată așa.