Fundal cu gradient HTML. Gradient liniar
Gradient - umplerea unei zone selectate cu o secvență de nuanțe de culoare cu tranziții netede între ele. Gradientul este folosit pentru afișare tranzitie linaî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 culoare de fundal deci este definită ca valoarea proprietății imagine de fundal. Aceasta înseamnă că gradientul poate fi specificat nu numai ca valoare a proprietății imagine de fundal, ci și oriunde poate fi inserată o imagine de fundal, cum ar fi în list-style-image și background .
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ți »
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 (imagine de fundal: gradient liniar (65deg, negru, galben); ) Încercați »
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ți »
După o culoare, este posibil să se specifice o poziție de oprire pentru aceasta, care determină locația culorii (unde o culoare începe să treacă în alta) în raport cu inițial și punctul final gradient. 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ți »
Valoarea culorii poate fi specificată căi diferite, 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)); )
Gradienții CSS vă permit să creați un fundal de două sau mai multe culori care trece ușor de la una la alta. Sunt cu noi de mult timp și au un suport destul de bun pentru browser. Majoritatea browserelor moderne le înțeleg fără prefixe, pentru IE9 și mai vechi există un Filtru Gradient, iar pentru IE9 poți folosi SVG.
Gradienele pot fi folosite oriunde sunt folosite imagini: în fundal, ca marcatori de listă, pot fi specificate în conținut sau imagine-chenar.
Liniar-gradient
Gradienții liniari sunt destul de ușor de utilizat. Pentru cel mai elementar gradient, setați doar culorile de început și de sfârșit:
Fundal: gradient liniar (portocaliu, auriu);
Pot exista orice număr de culori mai mult de două. De asemenea, puteți controla direcția gradientului și limitele (punctele de oprire) ale culorilor.
Direcția poate fi specificată în grade sau cuvinte cheie.
Cuvinte cheie:în sus = 0deg ; la dreapta = 90deg; în jos = 180deg - valoare implicită; la stânga = 270deg.
Cuvintele cheie pot fi combinate pentru a crea un gradient diagonal, cum ar fi în stânga sus.
Mai jos puteți vedea cum funcționează diferite direcții în întinderea de la liliac la galben:
Iată codul pentru primul pătrat, de exemplu:
Stânga sus ( fundal: gradient liniar (în stânga sus, violet, purpuriu, portocaliu, auriu); )
Un lucru de reținut este că în dreapta sus nu este același lucru cu 45 de grade. Culorile gradientului sunt perpendiculare pe linia de direcție a gradientului. Cu în dreapta sus, linia merge din stânga jos în colțul din dreapta sus, cu 45deg - este situată strict în acest unghi, indiferent de dimensiunea figurii.
Diferența este clar vizibilă în figurile dreptunghiulare:
De asemenea, puteți seta puncte de oprire pentru culorile gradientului, valorile sunt specificate în unități sau procente și pot fi mai mari de 100% și mai mici de 0%.
Exemple de setare a valorilor în %, în em și a valorilor care depășesc limitele elementului:
Cu cât punctele de oprire ale culorilor învecinate sunt mai apropiate, cu atât va fi mai clară granița dintre ele. În acest fel, puteți face cu ușurință fundaluri în dungi:
Iată cum puteți crea, de exemplu, un fundal pentru o coloană laterală, întins pe toată înălțimea elementului părinte:
Dungile de pe fundalul barei laterale sunt un alt gradient constând în alternarea transparenței complete și alb cu transparență 30%. Gradientele cu culori translucide sunt convenabile deoarece pot fi aplicate pe un fundal de orice culoare.
Gradientul din exemplu este setat în cod complex, lung, deoarece dungile ar trebui să fie plasate doar deasupra fundalului pentru bara laterală. Dacă nu încercați să faceți totul în fundal pentru un singur bloc, puteți rezolva problema folosind un pseudo-element.
Dacă nu există restricții, codul poate fi mult mai scurt:
Lumină ( fundal: peachpuff liniar-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) centru centru / 2em; .întuneric ( fundal: steelblue gradient liniar(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) centru centru / 100% 1em)
În prima linie am stabilit culoare de fundal element, tip și direcție (culoarea și direcția pot fi omise), în al doilea - determinăm culorile gradientului și chenarul dintre ele, în al treilea - setăm poziția și dimensiunea imaginii rezultate. Cel mai o parte importantă- mărimea. În mod implicit, fundalul este repetat, astfel încât modelul rezultat va umple fundalul elementului. Foarte usor si de inteles :)
Întreaga intrare poate fi făcută într-o singură linie, dar pentru lizibilitate este mai convenabil să scrieți în mai multe, mai ales pentru degrade complexe.
De asemenea, este important să știți că cuvânt cheie transparent înseamnă negru transparent, nu alb transparent, așa că dacă îl folosești în Firefox, s-ar putea să ajungi la ceva de genul acesta:
Pentru a evita acest lucru, utilizați complet culori transparente nuanța dorită, de exemplu, alb: rgba(255, 255, 255, 0) sau negru rgba(0, 0, 0, 0) . Despre căi diferite Puteți citi culorile de setat.
Pentru a afla notația rgb a unei anumite culori, puteți utiliza CSS.coloratum, un instrument de la Lea Verou.
În plus față de gradientul liniar obișnuit, puteți crea un gradient liniar care se repetă - un gradient care se repetă
Exemplu de cod:
Fundal: repetare-liniar-gradient (verde, verde .5em, transparent .5em, transparent 1em);
Din păcate, gradienții care se repetă se comportă întâmplător și sunt potriviti doar pentru modelele cărora nu le pasă de precizie. Dacă aveți nevoie de precizie, utilizați liniar-gradient în combinație cu background-size și background-repeat .
Degradeurile au aceeași limitare ca umbra-cutie: nu li se pot da culori sau direcție individuale. Acest lucru duce la duplicarea codului și la o nevoie urgentă de a utiliza preprocesoare atunci când se creează gradienți complexe.
O altă limitare este că gradienții nu sunt animați, ceea ce, totuși, poate fi rezolvat într-o oarecare măsură.
Pentru creație rapidă Există o mulțime de gradienți între browsere instrument la îndemână: colorzilla.com/gradient-editor/. Pe lângă codul pentru browserele moderne, va oferi cod pentru IE mai vechi și SVG pentru 9th.
Atunci când sunt combinate cu controalele de bază ale imaginii de fundal, degradeurile oferă cele mai largi oportunități pentru a crea fundaluri de diferite grade de complexitate, fără a utiliza deloc imagini. Puteți folosi degrade pentru a crea modele complexe și interesante, dar acesta este un subiect complet diferit.
Un gradient de culoare este o tranziție lină de la unul culoarea specificată la alta prin culori intermediare. Într-un gradient liniar, tranziția are loc în linie dreaptă, de la punct A până la punctul B. Gradientul poate avea mai mult de două puncte de referință - atunci tranziția se face de la punct A până la punctul B, apoi de la punct B până la punctul Cși așa mai departe.
Cum să faci un gradient liniar de fundal în CSS
În CSS3, puteți adăuga un fundal gradient la elemente prin proprietatea deja cunoscută imagine de fundal. Valoarea este cuvântul cheie linear-gradient(), unde în paranteze trebuie să specificați punctul de pornire al gradientului, culoarea de început și culoarea de sfârșit.
De exemplu, să facem un gradient liniar de fundal cu o tranziție de la Violet spre roșu. În acest caz, dorim ca punctul de plecare să fie Violet a fost cu partea dreapta, iar vectorul gradient a fost îndreptat spre stânga. Să scriem codul:
Imagine de fundal: gradient liniar (la stânga, violet, roșu); Degradat de fundal pe bloc
Culorile punctului de gradient pot fi scrise în orice format disponibil în CSS, fie el cod hexazecimal, format RGB sau altul. Direcția gradientului este specificată folosind prefixul to și apoi cuvintele cheie stânga , dreapta , sus și jos , care pot fi combinate pentru a schimba panta. De exemplu:
Imagine de fundal: gradient liniar (în dreapta jos, #ee82ee, #ff0000); 
În plus, puteți indica direct unghiul de înclinare folosind un număr pozitiv sau negativ cu prefixul deg (fără spațiu). La unghi dat Linia de gradient de 0º sau 360º va merge de jos în sus. Pe măsură ce unghiul de înclinare crește, vectorul se mișcă în sensul acelor de ceasornic (folosirea unei valori negative inversează mișcarea). Exemplu de introducere a codului:
Imagine de fundal: gradient liniar (-110deg, #ee82ee, #ff0000); 
Puncte de ancorare multiple
După cum am spus deja, un gradient poate avea mai mult de două puncte de ancorare. În acest caz, fundalul va trece ușor de la prima culoare la a doua, de la a doua la a treia, de la a treia la a patra și așa mai departe până când ajunge la punctul de referință final. Dacă doriți să creșteți numărul acestor puncte în gradient, adăugați-le separate prin virgule. De exemplu:
Imagine de fundal: gradient liniar (145deg, #ee82ee, slateblue, #ffd86a, violet); 
În exemplul nostru, sunt indicate patru puncte de culoare de referință, dar puteți adăuga oricâte dintre ele doriți și în orice formate de culoare disponibile.
Lungimea tranziției
În mod implicit, browserul plasează puncte distanta egala, prin urmare gradația este uniformă. Dar această distanță poate fi controlată folosind unități Dimensiuni CSS. Să ne uităm la următorul exemplu:
Imagine de fundal: gradient liniar (#92009b 20%, #f5e944 90%, #00ffa2); 
În codul nostru, după culoarea #92009b este indicată valoarea 20%. Deoarece este aproape de primul punct de ancorare, aceasta înseamnă că 20% din lungimea elementului va fi vopsită cu culoarea specificată. După care începe gradientul: o valoare de 90% îi spune browserului să atingă culoarea #f5e944 cu 90% din lungimea elementului (începând de la 20%). După care începe trecerea la a treia culoare în spațiul rămas - #00ffa2.
Acest subiect necesită și practică. Încercați să creați un fundal gradient cu mai multe puncte de ancorare (mai mult de două), jucați-vă cu valorile distanței și urmăriți schimbarea gradientului în browser.
Prefixe de furnizor
Pentru a asigura compatibilitatea între browsere, unele proprietăți CSS târzii trebuie adăugate cu prefixe de furnizor - prefixe speciale adăugate de dezvoltatorii de browser:
- -webkit- - prefix pentru Chrome, Safari, Android;
- -moz- este un prefix pentru Firefox;
- -o- este prefixul pentru Opera.
Fundalul gradient necesită, de asemenea, utilizarea acestor prefixe dacă este nevoie de suport cantitate maxima browsere. Pentru a face acest lucru, adaptați codul după cum urmează:
Imagine de fundal: -webkit-linear-gradient(stânga, violet, roșu); imagine de fundal: -moz-linear-gradient(stânga, violet, roșu); imagine de fundal: -o-linear-gradient(stânga, violet, roșu); imagine de fundal: gradient liniar (la stânga, violet, roșu);
Adăugarea unui prefix necesită crearea unui anunț separat. De asemenea, după cum probabil ați observat, proprietăți cu prefixe de furnizor Nu necesită utilizarea prefixului to atunci când se indică direcția gradientului.
Suport pentru Internet Explorer
Din păcate, fundalul gradient funcționează doar în IE10+. Versiuni anterioare nu-l inteleg si il va ignora. Pentru a asigura cel puțin fundal normalîn browserele mai vechi, puteți crea un așa-numit. „stub”: selectați o nuanță potrivită și scrieți proprietatea culoarea de fundal de mai sus proprietate cu un gradient. Prin urmare, browser vechi va aplica o culoare de fundal „de rezervă” și va omite proprietăți necunoscute, în timp ce în mai multe browser modern fundalul gradient se va suprapune și va acoperi fundalul solid.
Dacă aveți un set de gradient semi-transparent (de exemplu, folosind formatul de culoare RGBA) și nu doriți ca substituentul de fundal să fie afișat, setați gradientul folosind proprietatea scurtă de fundal în loc de imagine de fundal . Apoi valoarea culorii de fundal va fi suprascrisă în transparent .
Mai departe în tutorial: repeating-linear-gradient() - gradient liniar care se repetă.
Când vorbim despre gradienți în CSS, vorbim despre gradiente de culoare.
Există două tipuri de gradienți în CSS:
- liniar: culorile merg dintr-un punct în altul, conform 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); )
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; )
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; )
Adăugarea mai multor 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; )
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:
- portocaliu nu are nicio poziție de culoare specificată, 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; )
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; )
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)
Marime fixa
În loc să setați pozițiile de început și de sfârșit, puteți seta pur și simplu dimensiuni specifice:
Div ( imagine de fundal: gradient radial (20px 10px la 75% 50%, violet închis, roz); umplutură: 1rem; lățime: 300px; )
Gradientele în CSS sunt puternice date număr infinit Opțiuni.
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 la descărcare imagine 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 pentru ei proprietăți speciale. Și anunțul folosește proprietatea imagine de fundal.
În general, sintaxa gradientului (liniară) arată astfel:
1 | div( |
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 poziția inițială. 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:
div( |
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:
div( |
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:
div( |
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:
div( |
Rezultatul, după cum se spune, este evident. Mărimea este calculată de la distanță până la părțile îndepărtate.
Atât în gradienții radiali cât și liniari, pozițiile de oprire pot fi folosite pentru culoare. De asemenea, aș dori să remarc că, dacă trebuie să obțineți transparență a culorii, ar trebui să utilizați rgba.
div( |
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.
div( |
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.
div( |
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
