Linear-gradient(): gradient liniar în fundal. Gradient liniar

Ultima actualizare: 21.04.2016

Gradienele reprezintă o tranziție lină 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) */

Deci, o utilizare completă a gradientului va arăta astfel:

Pentru a seta începutul gradientului, puteți utiliza următoarele valori: stânga (de la stânga la dreapta), la 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 la stânga și se deplasează la dreapta, în timp ce 45deg înseamnă că începe din stânga jos și se mișcă la un unghi de 45° spre 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 din stânga a elementului cu o bandă de culoare gri (#ccc) de 20 de pixeli lățime, apoi până la 30 de pixeli trece la roșu, iar apoi până la 40 de pixeli revine 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 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ă.

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Gradient liniar pentru Paragraf

În cel mai simplu caz cu două culori, demonstrat în exemplul 1, se scrie 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ă conecteze două puncte de colț diagonal opuse.

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. Puteți utiliza o culoare transparentă (cheie cheie transparent), precum și o culoare semi-transparentă folosind formatul 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; 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

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 codul dvs., vă recomand site-ul www.colorzilla.com/gradient-editor, ceea ce ușurează configurarea gradientelor și obținerea imediată a codului dorit. Există șabloane gata făcute (Presets), vizualizarea rezultatului (Preview), ajustarea culorilor (Adjustments), cod final (CSS) care acceptă IE prin filtre. Pentru cei care au lucrat în Photoshop sau alt editor grafic, crearea de degrade va părea o simplă simplă, dar pentru alții nu va fi greu să-și dea seama rapid. În general, îl recomand cu căldură.

A! 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 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 determină poziția 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 doar 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; aceasta poate fi modificată. 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%;
• dreapta centru - dreapta centru - 100% 50%;
• Centru jos - jos - 50% 100%;
• În colțul din stânga jos - stânga jos - 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:

Dimensiunea 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% ); /* pentru Opera */
imagine de fundal : gradient liniar (sus , #FF5A00 0% , #FFAE00 100% ); /* sintaxa standard */
}

div(
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

Gradient - umplerea unei zone selectate cu o secvență de nuanțe de culoare cu tranziții netede între ele. Un gradient este utilizat pentru a afișa o tranziție lină între două sau mai multe nuanțe de culoare specificate. Exemplu de gradient:

Anterior, imaginile de fundal erau folosite pentru a crea un efect de gradient. Acum puteți folosi CSS3 pentru a crea un fundal gradient. Elementele cu gradienți CSS3 arată mai bine atunci când sunt mărite decât omologii lor de imagine de fundal din plug-in, deoarece gradientul este generat de browser direct în zona specificată.

Rețineți că gradientul CSS este o imagine de fundal generată de browser, nu o culoare de fundal, deci este definită ca o valoare proprietățile imaginii de fundal. Aceasta înseamnă că gradientul poate fi specificat nu numai ca valoare a proprietății imagine de fundal, ci și oriunde puteți insera o imagine de fundal, de exemplu în listă-stil-imagineȘi fundal.

CSS3 definește două tipuri de gradienți:

• Gradient liniar(Gradient liniar) - o tranziție lină de la culoare la culoare într-o linie dreaptă.
• Gradient radial(Gradient radial) - o tranziție lină de la culoare la culoare dintr-un punct în toate direcțiile.

Gradient liniar

Un gradient liniar se extinde într-o linie dreaptă, arătând o tranziție lină de la o nuanță de culoare la alta. Un gradient liniar este creat folosind funcția linear-gradient(). Funcția creează o imagine care este un gradient liniar între nuanțele specificate de culori. Mărimea gradientului corespunde mărimii elementului căruia i se aplică.

Funcția linear-gradient() preia următoarele argumente separate prin virgulă:

• Primul argument este gradul unghiului sau cuvintelor cheie care definesc unghiul de direcție al liniei de gradient. Argument opțional.
• O listă separată prin virgulă de două sau mai multe culori, fiecare dintre acestea putând fi urmată de o poziție de oprire.

Cel mai simplu gradient liniar necesită doar două argumente care specifică culorile de început și de sfârșit:

Div ( imagine de fundal: gradient liniar (negru, alb); lățime: 200 px; înălțime: 200 px; ) Încerca "

Dacă treceți două argumente funcției, se stabilește un gradient vertical cu punctul de plecare în partea de sus.

Direcția liniei de gradient poate fi determinată în două moduri:

Utilizarea grade Ca prim argument, puteți trece gradul unghiului liniei de gradient, care determină direcția gradientului, deci, de exemplu, unghiul 0deg (prescurtare de la grad - grad) definește linia de gradient de la marginea de jos a elementului spre vârf, unghiul de 90 de grade definește linia de gradient de la stânga la dreapta și etc. Mai simplu spus, unghiurile pozitive reprezintă rotația în sensul acelor de ceasornic, unghiurile negative reprezintă rotația în sens invers acelor de ceasornic. Utilizarea cuvintelor cheie Cuvintele cheie „în sus”, „la dreapta”, „în jos” sau „la stânga” pot fi de asemenea trecute ca prim argument, acestea reprezintă unghiurile liniilor de gradient „0deg” „90deg” „180deg” „ respectiv 270 de grade".

Unghiul poate fi setat și folosind două cuvinte cheie, de exemplu, în dreapta sus - linia de gradient este îndreptată spre colțul din dreapta sus.

Un exemplu de gradient specificat în diferite direcții:

Div ( margine: 10 px; lățime: 200 px; înălțime: 200 px; float: stânga; ) # one ( imagine de fundal: gradient liniar (la stânga, negru, roșu); ) # doi ( imagine de fundal: gradient liniar( în stânga sus, negru, roșu); ) #trei ( imagine de fundal: gradient liniar (65 de grade, negru, galben); ) Încerca "

După cum sa menționat, un gradient liniar poate include o listă de mai mult de două culori, separate prin virgulă, iar browserul le va distribui uniform pe întreaga zonă disponibilă:

Div (margine: 10px; lățime: 200px; înălțime: 200px; float: stânga; ) #unu (imagine de fundal: gradient liniar (la dreapta, roșu, albastru, galben); ) #două (imagine de fundal: liniar- gradient (în stânga sus, albastru, alb, albastru); ) Încerca "

După o culoare, puteți specifica o poziție de oprire pentru aceasta, care determină locația culorii (unde o culoare începe să treacă în alta) în raport cu punctele de început și de sfârșit ale gradientului. Poziția de oprire este specificată folosind unități sau procente acceptate CSS. Când se utilizează procente, poziția de oprire a poziției este calculată în funcție de lungimea liniei de gradient. O valoare de 0% este punctul de pornire al gradientului, 100% este punctul final.

Div (marja: 10px; lățime: 200px; înălțime: 200px; float: stânga; ) #unu (imagine de fundal: gradient liniar (în dreapta sus, albastru, alb 70%, albastru); ) #două (imagine de fundal: : gradient liniar (în dreapta jos, galben 10%, alb, roșu, negru 90%);) #trei (imagine de fundal: gradient liniar (în dreapta, negru 10%, galben, negru 90%); ) Încerca "

Valoarea culorii poate fi specificată în diferite moduri, de exemplu: specificați numele culorii, utilizați valori hexazecimale(HEX), folosind sintaxa RGB(RGBA) sau HSL(HSLA). De exemplu, utilizarea unui gradient cu transparență poate fi utilizată în combinație cu o culoare de fundal sau o imagine de sub gradient pentru a crea efecte vizuale interesante:

Div ( margine: 10px; lățime: 300px; înălțime: 100px; fundal-culoare: verde; ) #one ( fundal: liniar-gradient(la stânga, rgb(255,255,0), rgba(255,255,0,0)); ) #două ( fundal: gradient liniar(rgb(255,255,255), rgba(255,255,255,0)); )