Umplere de fundal cu gradient cu trei culori CSS. CSS: gradient liniar pentru fundal. Exemplu linear-gradient() gradient liniar

Traducere

Lucrările privind traducerea despre proiectul singlediv.com au arătat că unii 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 fost gradientul liniar, 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. Ești aici acum? Apoi, să ne uităm la câteva lucruri despre cum funcționează de fapt gradienții liniari. Mai întâi, să revizuim sintaxa care poate fi utilizată în funcția de gradient liniar:

gradient-liniar ([din<угла>| inainte de<стороны-или-угла>]?, );
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

Imaginea gradient nu are dimensiuni, este infinită spre deosebire de alte imagini de fundal. Dimensiunile vizibile îi sunt date de câmpul gradient, adică. zona în care este afișat.

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 culoare de fundal).

Cu toate acestea, 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

Într-un câmp de gradient, linia care trece prin centru și de-a lungul căreia sunt distribuite culorile se numește linie de gradient. Această linie poate fi descrisă mai simplu prin explicarea unghiului de gradient, așa că acest lucru va fi discutat mai detaliat în secțiunea următoare.

Unghi de gradient

Destul de evident, unghiul unui gradient liniar este folosit pentru a determina în ce direcție va merge gradientul. Dar să ne uităm la acest aspect mai detaliat.

Dacă C este punctul central al câmpului gradient, atunci A este unghiul dintre linie verticala, care trece prin C, și o linie de gradient, care trece și prin C și 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 sus în dreapta(dreapta sus), stânga sus (stânga sus), spre dreapta-jos(jos dreapta), la stânga jos(stanga jos);
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):

Pe asta și mai departe următoarele imagini caseta de gradient este delimitată de un dreptunghi, iar linia de gradient este linia groasă de culoare gri care trece prin centrul de-a lungul căruia apar culorile.

Î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:

O alta punct important, care merită luat în considerare atunci când utilizați cuvinte cheie unghi - acela în dreapta sus (dreapta sus), de exemplu, (sau orice alt cuvânt cheie unghi) depinde de dimensiunea câmpului 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 acel element ar trebui să fie exact albastru în colțul din dreapta sus și Violetîn mijlocul gradientului ar trebui să se formeze în jurul unei linii care merge 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 modul în care linia de gradient se mișcă pe măsură ce unghiul se schimbă cu următoarea animație:

În această animație, unghiul se înclină de la 0 la 360 de grade în trepte de 10 grade. Rezolutie scazuta GIF-ul vă oferă chiar o privire mai bună asupra cum diverse culori sunt afișate ca „linii” care sunt întotdeauna perpendiculare pe linia de gradient.

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.
Valoarea standard a unghiului, dacă nu este specificată, este în jos, care este de 180 de grade.
Cuvintele cheie unghi depind de dimensiunea câmpului gradient.

Lungimea liniei de gradient

Înainte de a putea vedea cum sunt distribuite culorile de-a lungul unei linii de gradient, trebuie să explicăm un lucru. Este posibil să fi observat în animația anterioară că culorile sunt uneori plasate în afara casetei de gradient, ceea ce poate părea puțin ciudat la prima vedere, dar are sens dacă știi motivul.

Uita-te la exemplu:

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 Culoarea albastră ocupa cea mai mare parte a terenului, iar gradientul nu s-ar fi extins 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

Culorile reprezintă o listă separată prin virgulă în care fiecare element poate fi definit după cum urmează:
<цвет> [<процентное соотношение> | <длина>]?

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

Niciuna dintre culori nu are propria poziție, așa că browserul însuși le-a determinat pozițiile.

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ția 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:

În imaginea de mai sus sunt 7 culori ș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 corespunzător față de 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 ordine crescătoare. 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) 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

Toate capturile de ecran din acest articol sunt dintr-un instrument simplu pe care l-am făcut pe codepen, care vă permite să introduceți o funcție de gradient liniar și să vedeți caseta de gradient, linia de gradient, unghiul și informațiile de culoare deasupra elementului.

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
liniar-gradient

Adaugă etichete

Î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 start 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 de a reduce numărul 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 liniar-gradient).
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.

Ultima actualizare: 21.04.2016

Gradienele reprezintă tranzitie lina de la o culoare la alta. CSS3 are o serie de gradienți încorporați pe care îi puteți folosi pentru a crea fundalul unui element.

Gradienele în CSS nu reprezintă nicio proprietate specială. Ei creează doar o valoare care este atribuită proprietății imagine de fundal.

Un gradient liniar se extinde în linie dreaptă de la un capăt la celălalt al unui element, creând o tranziție lină de la o culoare la alta.

Pentru a crea un gradient, trebuie să specificați începutul acestuia și mai multe culori, de exemplu:

Imagine de fundal: gradient liniar (stânga, negru, alb);

În acest caz, începutul gradientului va fi marginea din stânga a elementului, care este indicată de valoarea left . Culori gradiente: alb-negru. Adică, pornind de la marginea din stânga a elementului spre dreapta va avea loc o tranziție lină de la negru la alb.

Există un dezavantaj în utilizarea gradienților - varietatea de browsere vă obligă să utilizați prefixul de furnizor:

Webkit- /* Pentru Google Chrome Safari Microsoft Edge, Opera peste versiunea 15 */ -moz- /* Pentru Mozilla Firefox */ -o- /* Pentru Opera peste versiunea 15 (Opera 12) */

Asa de, utilizare deplină Gradientul va arăta astfel:

Tabelele de stil în CSS3

Gradient liniar alb-negru

Pentru a seta începutul gradientului, puteți utiliza următoarele valori: stânga (de la stânga la dreapta), dreapta ( de la dreapta la stânga), de sus (de sus în jos) sau de jos (de jos în sus). De exemplu, un gradient vertical ar arăta astfel:

Imagine de fundal: gradient liniar (jos, negru, alb);

De asemenea, puteți seta direcția diagonalei folosind două valori:

Imagine de fundal: gradient liniar (stânga sus, negru, alb);

Pe lângă valorile specifice, cum ar fi sus sau stânga, puteți specifica și un unghi de la 0 la 360, care va determina direcția gradientului:

Imagine de fundal: gradient liniar (30 de grade, negru, alb);

După valoarea unghiurilor este indicat cuvântul deg.

De exemplu, 0deg înseamnă că gradientul începe pe partea stângă și se mută la partea dreapta, iar când specificați 45 de grade, acesta începe în colțul din stânga jos și se deplasează la un unghi de 45 ° în colțul din dreapta sus.

După definirea începutului gradientului, puteți specifica culorile sau punctele de referință de aplicat. Nu trebuie să existe două culori, pot fi mai multe:

Imagine de fundal: gradient liniar (sus, roșu, #ccc, albastru);

Toate culorile aplicate sunt distribuite uniform. Cu toate acestea, puteți specifica și locații specifice de fundal pentru punctele de culoare. Pentru a face acest lucru, se adaugă o a doua valoare după culoare, care determină poziția punctului.

Imagine de fundal: gradient liniar (stânga, #ccc, roșu 20%, roșu 80%, #ccc);

Gradient care se repetă

Folosind repetarea-linear-gradient puteți crea degrade liniari care se repetă. De exemplu:

Imagine de fundal: repetare-liniar-gradient(stânga, #ccc 20px, roșu 30px, rgba(0, 0, 126, .5) 40px); imagine de fundal: -moz-repeating-linear-gradient(stânga, #ccc 20px, roșu 30px, rgba(0, 0, 126, .5) 40px); imagine de fundal: -webkit-repeating-linear-gradient(stânga, #ccc 20px, roșu 30px, rgba(0, 0, 126, .5) 40px);

În acest caz, gradientul începe de la marginea stângă a elementului cu o dungă gri(#ccc) 20 pixeli lățime, apoi până la 30 pixeli trece la roșu și apoi până la 40 pixeli tranziție inversă la albastru deschis (rgba(0, 0, 126, .5)). Browserul repetă apoi gradientul până ce umple întreaga suprafață a elementului.

Vlad Merjevici

Un gradient este o tranziție lină de la o culoare la alta și pot exista mai multe culori ș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 luat în considerare 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

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 Paragraf

Î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.

Masa 1. Tipuri de gradient

Poziţie		Descriere
sus	0°	Jos sus.
spre stanga	270 de grade	De la dreapta la stânga.
spre fund	180 de grade	De sus în jos.
la dreapta	90 de grade	De la stanga la dreapta.
în stânga sus		Din colțul din dreapta jos până în stânga sus.
în dreapta sus		Din stânga jos până în dreapta sus.
în stânga jos		Din dreapta colțul de susîn stânga jos.
în dreapta jos		De la stânga sus la dreapta jos.

Î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 valoarea din stânga sus și altele similare, unghiul liniei de gradient este calculat pe baza dimensiunii elementului, astfel încât să conecteze două puncte de colț opuse diagonal.

Pentru a crea degrade complexe, două culori nu vor mai fi suficiente; sintaxa vă permite să adăugați un număr nelimitat dintre ele, listând culorile separate prin virgule. Î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

Gradient

Geneza versului liber, în ciuda influențelor externe, respinge metalimbajul verbal.

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; acestea sunt presupuse implicit. 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

Buton

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

Dungi orizontale

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 alții nu vor avea probleme să-și dea seama rapid. În general, îl recomand cu căldură.

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 Drept linii;
radial: culorile merg de la centrul cercului până la marginile acestuia, în toata lumea directii.

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.);
in care direcţie ar trebui să existe un gradient.

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

Div ( imagine de fundal: gradient liniar (roșu, albastru); )

Graent de fundal vertical simplu.

Mod implicit:

direcție verticală, de sus în jos;
primul colorează în început(sus);
al doilea colorează în Sfârşit(în partea de 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ă inainte de culoare:

Div ( imagine de fundal: gradient liniar (în dreapta jos, galben, violet); lățime: 200px; )

Gradient diagonal de la stânga sus la dreapta jos.

Daca vrei sa intrebi unghi specific, apoi puteți folosi valoarea în grade:

0deg - de jos în sus;
20deg - ușor în diagonală, mergând în sensul acelor de ceasornic;
90deg - ca la ora 15, de la stânga la dreapta;
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

Puteți introduce câte culori doriți. Ei vor distribuite uniform de-a lungul axei:

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; )

Un gradient destul de urat, dar ideea este importantă aici.

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; )

De asemenea, un gradient urât, dar ideea este importantă aici.

Î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, cu 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 start: 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; )

Seamănă mult cu soarele, nu-i așa?

Mod implicit:

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 seta prin cuvântul cheie at.

Div ( imagine de fundal: gradient radial (în dreapta sus, negru, gri deschis); umplutură: 1 rem; lățime: 300 px; )

Zi posomorâtă.

Poziția finală

În mod implicit, formularul se termină la colţul cel mai îndepărtat. Tu poti alege:

partea cea mai apropiată
cel mai apropiat colț
partea cea mai îndepărtată
cel mai îndepărtat-colț

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.