###
  • Programe
  • Siguranță
  • Știri
  • Interesant
  • Sfat
  • Știri
  • Recenzii

    • Gradient circular css. Lecții CSS Gradients pentru academia începătorilor. Folosind mai multe opriri de culoare

    16.01.2021 Recenzii

    gradient CSS reprezintă trecerea de la o culoare la alta.

    Gradienele sunt create folosind funcțiile linear-gradient() și radial-gradient().

    Fundalul gradient poate fi setat în proprietățile de fundal, imagine de fundal, imagine de chenar și imagine de stil listă.

    Cum se face un gradient în CSS

    Suport pentru browser

    IE: 10.0
    Firefox: 16, 3,6 -moz-
    Crom: 26.0, 10.0 -webkit-
    Safari: 6.1, 5.1 -webkit-
    Operă: 12.1, 11.1 -o-
    iOS Safari: 7.1
    Opera mini: —
    Browser Android: 4.4, 4.1 -webkit-
    Crom pentru Android: 44

    1. Gradient liniar gradient-liniar()


    Orez. 1. Linie de gradient, puncte de început și de sfârșit și unghi de gradient

    Gradient liniar creat folosind două sau mai multe culori care au o direcție specificată sau linie de gradient.

    Dacă direcția nu este specificată, se utilizează valoarea implicită - de sus în jos.

    În mod implicit, culorile gradient sunt distribuite uniform într-o direcție perpendiculară pe linia de gradient.

    Fundal: gradient liniar (unghi/latură sau înclinare după cuvânt cheie (pereche de cuvinte cheie), prima culoare, a doua culoare etc.);

    Direcţie gradientul poate fi specificat în două moduri:
    folosind unghiul de înclinareîn grade grade, a căror valoare determină unghiul de înclinare a liniei în interiorul elementului.

    Div (înălțime: 200 px; fundal: liniar-gradient (45deg, #EECFBA, #C5DDE8); )

    folosind cuvinte cheie sus, la dreapta, jos, la stânga care corespund unui unghi de gradient de 0°, 90°, 180° și, respectiv, 270°.

    Div (înălțime: 200 px; fundal: gradient liniar (la dreapta, #F6EFD2, #CEAD78); )

    Dacă direcția este specificată de o pereche de cuvinte cheie, de exemplu, în stânga sus, atunci punctul de pornire al gradientului va fi situat în direcția opusă, în acest caz dreapta jos.

    Div (înălțime: 200 px; fundal: gradient liniar (în stânga sus, albastru pudră, roz); )

    Pentru o distribuție neuniformă a culorilor, poziția de pornire a fiecărei culori este indicată prin punctele de oprire ale gradientului, așa-numitele culoarea se oprește. Puncte de întrerupere sunt specificate în %, unde 0% este punctul de pornire, 100% este punctul final, de exemplu:

    Div (înălțime: 200 px; fundal: gradient liniar (în sus, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); )

    Pentru o distribuție clară a dungilor de culoare, fiecare culoare ulterioară trebuie să înceapă de la punctul de oprire al culorii anterioare:

    Div (înălțime: 200 px; fundal: gradient liniar (la dreapta, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); )

    2. Gradient radial radial-gradient()

    Gradient radial diferă de liniar prin faptul că culorile provin dintr-un punct (centrul gradientului) și sunt distribuite uniform spre exterior, desenând forma unui cerc sau elipsă.

    Fundal: radial-gradient (forma/dimensiunea gradientului/pozitia centrala, prima culoare, a doua culoare etc.);

    Forma gradient definit de cuvintele cheie cerc sau elipsă . Dacă nu este specificată nicio formă, gradientul radial este implicit la o formă de elipsă.

    Div (înălțime: 200 px; fundal: radial-gradient (alb, #FFA9A1); )

    Poziția centrală specificat folosind cuvintele cheie utilizate în proprietatea background-position, urmate de prefixul at. Dacă nu este specificată poziția centrală, se utilizează valoarea implicită la centru.

    Div (înălțime: 200 px; fundal: radial-gradient (în partea de sus, #FEFFFF, #A7CECC); )

    O pereche de valori, specificate în unități de lungime % , em sau px, poate controla dimensiunea gradientului eliptic. Prima valoare specifică lățimea elipsei, a doua – înălțimea.

    Div (înălțime: 200 px; fundal: radial-gradient(40% 50%, #FAECD5, #CAE4D8); )

    Dimensiunea gradientului specificate folosind cuvinte cheie. Valoarea implicită este cel mai îndepărtat colț.

    div ( înălțime: 200 px; fundal: radial-gradient (cercul cel mai îndepărtat-colț la 100px 50px, #FBF2EB, #352A3B); )

    Folosind un gradient radial, puteți crea forme tridimensionale realiste, cum ar fi bile și nasturi.

    Minge

    div ( lățime: 200 px; înălțime: 200 px; chenar-radius: 50%; margine: 0 automat; fundal: radial-gradient (cerc la 65% 15%, aqua, albastru închis); )

    Buton

    .wrap (înălțime: 200px; umplutură: 50px 0; fundal: #cccccc; ) .button ( lățime: 100px; înălțime: 100px; chenar-rază: 50%; margine: 0 automat; fundal: radial-gradient (partea cea mai îndepărtată) elipsă în stânga sus, alb, #aaaaaa); umbră casetă: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5); )

    Timbru poștal


    Folosind culoarea transparentă în degrade, puteți crea efecte ca acesta.

    Jpg">

    .container ( fundal: #B7D1D8; umplutură: 25px; ) .wrap ( fundal: gradient radial (transparent, transparent 4px, alb 4px,alb); umplutură: 10px; lățime: 300px; înălțime: 220px; dimensiunea fundal: 20px 20px; fundal-position: -10px -10px; /*decupează modelul de-a lungul marginii*/ margine: 0 auto; ) img ( lățime: 100%; )

    3. Repetare gradient

    În plus față de gradienții liniari și radiali, există repetarea gradientului, care este specificată folosind funcțiile repeating-linear-gradient() și, respectiv, repeating-radial-gradient(). Un fundal de degrade care se repetă arată dezordonat, așa că este recomandat să începeți următoarea culoare acolo unde s-a oprit cea anterioară, creând astfel modele în dungi.

    Div ( înălțime: 200 px; fundal: repetare-liniar-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); ) div (înălțime: 200px; fundal: repetare-radial-gradient (cerc, #) B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px); )

    4. Gradient între browsere

    Pentru a afișa corect gradienții în toate browserele, trebuie să adăugați o intrare între browsere.

    Gradient liniar

    Ms-filter: „progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)”; /* IE 8-9 */ fundal: -webkit-linear-gradient(stânga, roșu, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ fundal: -moz-linear-gradient(stânga, roșu, #f06d06); /* Firefox 3.6-15 */ fundal: -o-linear-gradient(stânga, roșu, #f06d06); /* Opera 11.1-12 */ fundal: gradient liniar (la dreapta, roșu, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

    Repetați gradientul liniar

    Fundal: -webkit-repeating-linear-gradient(rosu, galben 10%, verde 20%); /* Safari 5.1 - 6.0 */ fundal: -o-repeating-linear-gradient(rosu, galben 10%, verde 20%); /* Opera 11.1-12.0 */ fundal: -moz-repeating-linear-gradient(rosu, galben 10%, verde 20%); /* Firefox 3.6-15 */ fundal: repetare-liniar-gradient (roșu, galben 10%, verde 20%); /* Sintaxa standard */

    Gradient radial

    Fundal: -webkit-radial-gradient(rosu, galben, verde); /* Safari 5.1-6.0 */ fundal: -o-radial-gradient(rosu, galben, verde); /* Opera 11.6-12.0 */ fundal: -moz-radial-gradient(rosu, galben, verde); /* Firefox 3.6-15 */ fundal: radial-gradient (roșu, galben, verde); /* Sintaxă standard */ fundal: -webkit-radial-gradient(60% 55%, partea cea mai îndepărtată, roșu, galben, negru); /* Safari 5.1-6.0 */ fundal: -o-radial-gradient(60% 55%, partea cea mai îndepărtată, roșu, galben, negru); /* Opera 11.6-12.0 */ fundal: -moz-radial-gradient(60% 55%, partea cea mai îndepărtată, roșu, galben, negru); /* Firefox 3.6-15 */ fundal: gradient radial (partea cea mai îndepărtată la 60% 55%, roșu, galben, negru); /* Sintaxa standard */

    Repetarea gradientului radial

    Background: -webkit-repeating-radial-gradient(rosu, galben 10%, verde 15%); /* Safari 5.1-6.0 */ fundal: -o-repeating-radial-gradient(rosu, galben 10%, verde 15%); /* Opera 11.6-12.0 */ fundal: -moz-repeating-radial-gradient(rosu, galben 10%, verde 15%); /* Firefox 3.6-15 */ fundal: repetarea-gradient-radial (roșu, galben 10%, verde 15%); /* Sintaxa standard */

    5. Combinație de degrade și imagine de fundal

    Combinând un gradient și o imagine, puteți crea efecte interesante. Pentru un gradient, trebuie să utilizați culori translucide, astfel încât imaginea să rămână vizibilă.

    div ( înălțime: 453px; fundal: gradient liniar(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, ..jpg); dimensiunea fundal: coperta; )

    Gradienții radiali sunt redați diferit față de cei liniari. Dacă culorile liniare sunt situate perpendicular pe linia care stabilește direcția, atunci culorile radiale diverg de la un centru dat, iar gradientul poate lua forma unui cerc sau elipsă.

    Pentru cel mai simplu gradient, este suficient să setați doar culorile:

    Fundal: radial-gradient (auriu, portocaliu rosu);

    În mod implicit, centrul gradientului este în centru, gradientul are forma unei elipse:

    Pe lângă culori, puteți seta forma, poziția și dimensiunea gradientului. Parametrii sunt combinați și se comportă mai complex decât în ​​gradienții liniari.

    Formă(forma finală a gradientului) poate fi un cerc sau o elipsă. Implicit este o elipsă, gradientul tinde să ocupe tot spațiul liber al elementului, întinzându-se dacă este necesar.

    Pentru ca gradientul să aibă forma unui cerc, acest lucru trebuie specificat în mod explicit folosind cuvântul cheie cerc.

    Dacă forma nu este specificată, dar dimensiunea este specificată, o valoare specifică raza cercului; dacă există două valori, gradientul ia forma unei elipse. Dacă sunt prezente dimensiuni, specificarea explicită a formei gradientului este ignorată.

    Poziţie determină locul unde va fi amplasat centru gradient. Sunt folosite aceleași cuvinte cheie ca și pentru gradient liniar, dar cu prefixul la: sus , dreapta , jos , stânga și centru sunt valorile implicite.

    Ele pot fi, de asemenea, combinate pentru a poziționa gradientul pe o parte dată, de exemplu: în dreapta sus - în colțul din dreapta sus.

    Mai jos puteți vedea cum funcționează diferitele poziții:

    Primul cod pătrat:

    Fundal: radial-gradient (stânga sus, violet, purpuriu, portocaliu, auriu);

    De asemenea, puteți seta poziția exactă a gradientului, de exemplu la 20% 50% sau la 10px 150px .

    mărimea determină dimensiunile formei finale a gradientului. Pentru gradienții eliptici, valorile pot fi specificate ca procente, dar pentru cele circulare - nu.

    Dacă este specificată o valoare, aceasta este considerată raza gradientului circular. Dacă sunt specificate două valori, prima este considerată raza orizontală a elipsei, a doua este considerată raza verticală.

    Mai jos sunt exemple de gradienți circulari și eliptici. Forma figurii este determinată de dimensiunile date:

    De asemenea, puteți utiliza cuvinte cheie:

    partea apropiată - gradientul se termină la marginea elementului cel mai apropiat de centrul gradientului. Dacă este o elipsă, gradientul atinge toate marginile elementului. partea cea mai îndepărtată - gradientul se termină la marginea îndepărtată a elementului. Dacă este o elipsă, gradientul atinge toate marginile elementului. closest-corner - Forma finală este întinsă astfel încât să treacă prin colțul elementului cel mai apropiat de centrul gradientului. Dacă forma finală este o elipsă, gradientul este întins pe întreaga formă. Cu acest parametru, gradientul umple întreaga formă, extinzându-se parțial dincolo de limitele sale. cel mai îndepărtat colț - similar cu cel mai apropiat colț , doar forma de capăt trece prin colțul cel mai îndepărtat de centrul gradientului. Valoare implicită.

    S-a adăugat o poziție de jos la unele degrade pentru a face acțiunea codului mai ușor de văzut:

    Un gradient radial poate fi de asemenea repetat - acesta este repetarea-radial-gradient .

    Cod simplu:

    Fundal: repetare-radial-gradient (cerc, darkkhaki, darkkhaki .5em, transparent .5em, transparent 1.5em);

    Ca și în cazul unui gradient liniar, un gradient care se repetă nu se redă foarte bine.

    Combinând mai multe fundaluri cu parametri diferiți Puteți obține lucruri uimitoare:

    Dacă folosiți unități relative (em, %) mai degrabă decât absolute (px) atunci când creați modele, dimensiunea modelelor rezultate poate fi apoi ajustată cu ușurință prin schimbarea doar a dimensiunii fontului.

    Sursa pentru acest exemplu interactiv este stocată într-un depozit GitHub. Dacă doriți să contribuiți la proiectul de exemple interactive, vă rugăm să clonați https://github.com/mdn/interactive-examples și să ne trimiteți o cerere de extragere.

    Compoziția unui gradient radial

    Un gradient radial este definit de a punctul central,un forma finală, și două sau mai multe puncte de oprire a culorii.

    Pentru a crea un gradient neted, funcția radial-gradient() desenează o serie de forme concentrice care iradiază din centru spre forma finală(și posibil mai departe). Forma finală poate fi fie un cerc, fie o elipsă.

    Punctele de oprire a culorii sunt poziționate pe a rază de gradient virtuală care se extinde orizontal de la centru spre dreapta. Pozițiile de oprire a culorii bazate pe procente sunt relativ la intersecția dintre forma finală și această rază de gradient, care reprezintă 100% . Fiecare formă este o singură culoare determinată de culoarea de pe raza de gradient pe care o intersectează.

    Sintaxă

    /* Un gradient în centrul containerului său, începând cu roșu, trecând în albastru și terminând cu verde */ radial-gradient (cerc în centru, roșu 0, albastru, verde 100%)

    Valori

    (sau ) Tipul de date CSS denotă o coordonată bidimensională utilizată pentru a seta o locație în raport cu o casetă de element. Este folosit în proprietățile de poziție de fundal și de ancoră offset."> Poziția gradientului, interpretată în același mod ca fundal-poziție sau transformare-origine . Dacă nu este specificat, este implicit la centru . Forma gradientului. Valoarea poate fi cerc (înseamnă că forma gradientului este un cerc cu rază constantă) sau elipsă (înseamnă că forma este o elipsă aliniată pe axă). Dacă nu este specificat, este implicit elipse . Un cuvânt cheie care descrie cât de mare trebuie să fie forma finală. Valorile posibile sunt:
    Cuvânt cheie Descriere
    partea cea mai apropiată Forma de sfârșit a gradientului se întâlnește cu latura cutiei cea mai apropiată de centru (pentru cercuri) sau întâlnește atât laturile verticale, cât și cele orizontale cele mai apropiate de centru (pentru elipse).
    cel mai apropiat colț Forma de sfârșit a gradientului este dimensionată astfel încât să întâlnească exact colțul cel mai apropiat al casetei din centrul acesteia.
    partea cea mai îndepărtată Similar cu cea mai apropiată latură , cu excepția faptului că forma finală este dimensionată astfel încât să se întâlnească cu partea cea mai îndepărtată a cutiei de centru (sau laturile verticale și orizontale).
    cel mai îndepărtat-colț Valoarea implicită, forma de sfârșit a gradientului este dimensionată astfel încât să întâlnească exact colțul cel mai îndepărtat al casetei de centrul acesteia.

    Notă: Implementările timpurii ale acestei funcții au inclus și alte cuvinte cheie (acoperă și conține) ca sinonime ale colțului cel mai îndepărtat și, respectiv, celei mai apropiate. Utilizați numai cuvintele cheie standard, deoarece unele implementări au renunțat deja la acele variante mai vechi.

    Tipul de date CSS al unui color-stop reprezintă o culoare în spațiul de culoare sRGB. A poate include, de asemenea, o valoare de transparență a canalului alfa, care indică modul în care culoarea ar trebui să fie compusă cu fundalul."> valoare, urmată de una sau două poziții opționale de oprire (fie un tip de date CSS reprezintă o valoare procentuală. Este adesea folosit pentru a defini o dimensiune în raport cu obiectul părinte al unui element. numeroase proprietăți pot folosi procente, cum ar fi marginea lățimii înălțimii umplutură și dimensiunea fontului.> sau un tip de date CSS reprezintă o valoare de distanță. Lungimile pot fi folosite în numeroase proprietăți CSS, cum ar fi lățime, înălțime, margine, umplutură, lățime chenar, dimensiune font și umbră text."> de-a lungul axei gradientului). Un procent de 0% sau o lungime de 0 reprezintă centrul gradientului; valoarea 100% reprezintă intersecția formei de sfârșit cu raza gradientului virtual. Valori procentuale între sunt poziționate liniar pe raza de gradient.Includerea a două poziții de oprire echivalează cu declararea a două opriri de culoare cu aceeași culoare la cele două poziții. Al doilea indiciu de culoare este un indiciu de interpolare care definește modul în care gradientul progresează între opriri de culoare adiacente. Lungimea definește în ce punct dintre două opriri de culoare culoarea gradientului ar trebui să atingă punctul de mijloc al tranziției de culoare. Dacă este omis, punctul de mijloc al tranziției de culoare este punctul de mijloc dintre două opriri de culoare.

    Sintaxă formală

    gradient-radial([ [ cerc || ] [ la ]? , | [elipsa || [ | ](2) ] [ la ]? , | [[ cerc | elipsa ] || ] ? , | la , ]? [ , ]+) unde = cel mai apropiat colț | partea cea mai apropiată | cel mai îndepărtat-colț | partea cea mai îndepărtată și = [ [, ? ]? ]#, și = [ ]? și = [ | ](1,2) și = [ | ]

    Rețineți că negativ „Nu sunt permise, totuși browserele au implementat lungimi negative, care sunt acum eliminate. Consultați nota de compatibilitate a site-ului Firefox.

    Exemple

    Gradient simplu

    Gradient radial (imagine de fundal: gradient radial (cian 0%, transparent 20%, somon 40%); )

    Gradient necentrat

    .radial-gradient ( latime: 240px; inaltime: 120px; )

    Gradient radial ( imagine de fundal: gradient radial (cel mai îndepărtat colț la 40px 40px, #f35 0%, #43e 100%); )

    Specificații

    Specificație stare cometariu
    Modulul Imagini CSS Nivelul 3
    Definiția „gradienților radiali()” din specificația respectivă.    		 Recomandarea candidatului Definiție inițială.

    Compatibilitate browser

    Tabelul de compatibilitate din această pagină este generat din date structurate. Dacă doriți să contribuiți la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere.

    Actualizați datele de compatibilitate pe GitHub

    DesktopMobil
    CromMargineFirefoxInternet Explorer OperăSafariVizualizare web AndroidChrome pentru AndroidFirefox pentru AndroidOpera pentru AndroidSafari pe iOSSamsung Internet
    gradient radial()Chrome Asistență deplină 26 Asistență deplină 26 Asistență deplină 13

    Prefixate

    Prefixate     		Edge Suport complet 12Firefox Suport complet 16

    Note

    Sprijin deplin 16

    Note

    Note Înainte de Firefox 36, gradienții nu erau aplicați pe spațiul de culoare pre-multiplicat, ceea ce duce la apariția neașteptată a nuanțelor de gri atunci când sunt utilizate cu transparență. Suport complet 3.6

    Prefixate Note

    Prefixate

    Prefixate

    Prefixate

    Prefixate Dezactivat

    Prefixate     		IE Suport complet 10

    Note

    Suport total 10

    Note

    Note Gradienți acceptați prin Internet Explorer 5.5 până la 9.0 printr-un filtru proprietar: .    		Opera Suport complet 12.1 Suport complet 12.1 Fără suport 11.6 - 15

    Prefixate

    Prefixate Sprijin deplin 15

    Prefixate

    Prefixate Implementat cu prefixul de furnizor: -webkit-    		Safari Suport deplin 6.1 Suport deplin 6.1 Suport deplin 5.1

    Prefixate Note

    Prefixate -webkit-gradient(radial,...)    		WebView Android Suport complet ≤37 Suport complet ≤37 Suport complet ≤37

    Prefixate

    Prefixate Implementat cu prefixul de furnizor: -webkit-    		Chrome Android Suport complet 26 Suport complet 26 Suport complet 18

    Prefixate

    Prefixate Implementat cu prefixul de furnizor: -webkit-    		Firefox Android Suport complet 16

    Note

    Sprijin deplin 16

    Note

    Note Înainte de Firefox 36, degradeurile nu erau aplicate pe spațiul de culoare pre-multiplicat, ceea ce duce la apariția neașteptată a nuanțelor de gri atunci când sunt utilizate cu transparență. Suport complet 4

    Prefixate Note

    Prefixate Implementat cu prefixul de furnizor: -moz- Note Începând cu Firefox 42, versiunea prefixată a gradienților poate fi dezactivată setând layout.css.prefixes.gradients la false . Suport complet 49

    Prefixate

    Prefixate Implementat cu prefixul furnizorului: -webkit- Suport complet 44

    Prefixate Dezactivat

    Prefixate Implementat cu prefixul furnizorului: -webkit- Dezactivat Din versiunea 44: această caracteristică se află în spatele preferinței layout.css.prefixes.webkit (trebuie setată la true). Pentru a schimba preferințele în Firefox, vizitați about:config.    		Opera Android Suport complet 12.1 Suport complet 12.1 Fără suport 12 - 14

    Prefixate

    Prefixate Implementat cu prefixul furnizorului: -o- Suport complet 14

    Prefixate

    Prefixate Implementat cu prefixul de furnizor: -webkit-    		Safari iOS Suport deplin 6.1 Suport deplin 6.1 Suport deplin 6

    Prefixate Note

    Prefixate Implementat cu prefixul furnizorului: -webkit- Note Safari 4 suporta o funcție experimentală -webkit-gradient(radial,...). Această veche sintaxă învechită este încă acceptată din motive de compatibilitate.    		Samsung Internet Android Suport complet 1.5 Suport complet 1.5 Suport complet 1.0

    Prefixate

    Prefixate Implementat cu prefixul de furnizor: -webkit-
    la sintaxăSuport complet Chrome 26Edge Suport complet 12Firefox Suport complet 16

    Note

    Sprijin deplin 16

    Note

    Note Înainte de Firefox 36, gradienții nu erau aplicați pe spațiul de culoare pre-multiplicat, ceea ce duce la apariția neașteptată a nuanțelor de gri atunci când sunt utilizate cu transparență. Suport complet 10

    Prefixate Note

    Prefixate Implementat cu prefixul de furnizor: -moz- Note Începând cu Firefox 42, versiunea prefixată a gradienților poate fi dezactivată setând layout.css.prefixes.gradients la false . Suport complet 49

    Prefixate

    Prefixate Implementat cu prefixul furnizorului: -webkit- Suport complet 44

    Prefixate Dezactivat

    Prefixate Implementat cu prefixul furnizorului: -webkit- Dezactivat Din versiunea 44: această caracteristică se află în spatele preferinței layout.css.prefixes.webkit (trebuie setată la true). Pentru a schimba preferințele în Firefox, vizitați about:config.    		IE Suport complet 10Opera Suport complet 15 Asistență completă 15 Fără suport 11.6 - 15

    Prefixate

    Prefixate Implementat cu prefixul de furnizor: -o-    		Safari Fără suport NrWebView Android Suport complet ≤37Chrome Android Suport complet 26Firefox Android Suport complet 16 Suport complet 16 Suport complet 10

    Prefixate

    Prefixate Implementat cu prefixul de furnizor: -moz-    		Opera Android Suport complet 14 Suport complet 14 Fără suport 12 - 14

    Prefixate

    Prefixate Implementat cu prefixul de furnizor: -o-    		Safari iOS Fără suport NrSamsung Internet Android Suport complet 1.5
    Oprire de culoare cu două pozițiiSuport complet Chrome 71Edge Suport complet 79Firefox Suport complet 64IE Fără suport NrOpera Suport complet 58Safari Suport complet 12.1WebView Android Suport complet 71Chrome Android Suport complet 71Firefox Android Suport complet 64Opera Android Suport complet 50Safari iOS Suport complet 12.2Samsung Internet Android Suport complet 10.0
    Sugestii de interpolare / Puncte de mijloc gradientSuport complet Chrome 40Edge Suport complet 79Firefox Suport complet 36IE Fără suport NrOpera Suport complet 27Safari Suport complet 6.1WebView Android Suport complet 40Chrome Android Suport complet 40Firefox Android Suport complet 36Opera Android Suport complet 27Safari iOS Suport complet 6.1Samsung Internet Android Suport complet 4.0

    Legendă

    Sprijin deplin Sprijin deplin Fără suport Fără suport Vedeți notele de implementare. Vezi notele de implementare. Utilizatorul trebuie să activeze în mod explicit această funcție. Utilizatorul trebuie să activeze în mod explicit această funcție. Necesită un prefix de furnizor sau un nume diferit pentru utilizare.

    Note CSS cuantice

    Gecko obișnuia să aibă o eroare de lungă durată prin care gradienții radiali precum gradientul radial (cerc auriu, roșu) ar funcționa, chiar dacă nu ar trebui din cauza virgulei lipsă între cerc și aur . De asemenea,

    Fundal degradat

    Gradienții CSS vă permit să afișați tranziții netede între două sau mai multe culori specificate.

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

    • Gradienți liniari (merg în jos/sus/stânga/dreapta/diagonală)
    • Gradienți radiali (definiți de centrul lor)

    Gradienți liniari CSS

    Pentru a crea un gradient liniar, trebuie să definiți cel puțin două opriri de culoare. Opririle de culoare sunt culorile între care doriți să aveți tranziții line. De asemenea, puteți specifica un punct de pornire și o direcție (sau unghi) împreună cu un efect de gradient.

    Sintaxă

    fundal: gradient liniar( direcţie, culoare-stop1, color-stop2,...);

    Gradient liniar - de sus în jos (implicit)

    Următorul exemplu arată un gradient liniar care începe din partea de sus. Începe roșu, trecând la galben:

    Exemplu

    #grad (
    fundal: liniar-gradient (rosu, galben);
    }

    Gradient liniar - de la stânga la dreapta

    Următorul exemplu arată un gradient liniar pornind de la stânga. Începe roșu, trecând la galben:

    Exemplu

    #grad (
    fundal: liniar-gradient (la dreapta, rosu, galben);
    }

    Gradient liniar-Diagonală

    Puteți realiza un gradient diagonal specificând pozițiile de pornire orizontale și verticale.

    Următorul exemplu arată un gradient liniar care începe în stânga sus (și merge în dreapta jos). Începe roșu, trecând la galben:

    Exemplu

    #grad (
    fundal: liniar-gradient (în dreapta jos, roșu, galben);
    }

    Utilizarea unghiurilor

    Dacă doriți mai mult control asupra direcției gradientului, puteți defini un unghi mai degrabă decât direcții predefinite (jos, sus, dreapta, stânga, jos dreapta etc.).

    Sintaxă

    fundal: gradient liniar( unghi, culoare-stop1, culoare-stop2);

    Unghiul este specificat ca unghi între linie orizontalăși o linie de gradient.

    Următorul exemplu arată cum să utilizați unghiurile pe gradienți liniari:

    Exemplu

    #grad (
    fundal: liniar-gradient(-90deg, rosu, galben);
    }

    Folosind mai multe opriri de culoare

    Următorul exemplu arată un gradient liniar (de sus în jos) cu mai multe opriri de culoare:

    Exemplu

    #grad (
    fundal: liniar-gradient (rosu, galben, verde);
    }

    Următorul exemplu arată cum să creați un gradient liniar (de la stânga la dreapta) cu o culoare curcubeu și ceva text:

    Fundal degradat

    Exemplu

    #grad (
    fundal: gradient liniar (la dreapta, rosu, portocaliu, galben, verde, albastru, indigo, violet);
    }

    Notă: Internet Explorer 9 și versiunile anterioare nu acceptă gradienți.

    „/> Vezi demonstrația în editor

    Folosind transparența

    Gradienții CSS acceptă și transparența, care poate fi folosită pentru a crea efecte de estompare.

    Pentru a adăuga transparență, folosim funcția RGBA() pentru a defini opririle de culoare. Ultimul parametru din funcția RGBA() poate fi o valoare între 0 și 1 și determină transparența culorii: 0 indică transparență completă, 1 indică culoare completă (fără transparență).

    Următorul exemplu arată un gradient liniar pornind de la stânga. Începe complet transparent, trecând la o culoare roșie completă:

    Exemplu

    #grad (
    fundal: gradient-liniar(la dreapta, rgba(255,0,0,0), rgba(255,0,0,1));
    }

    Repetați gradientul liniar

    Funcția repeat-linear-gradient() este utilizată pentru a repeta gradienții liniari:

    Exemplu

    Gradient liniar care se repetă:

    #grad (
    fundal: repetare-liniar-gradient (roșu, galben 10%, verde 20%);
    }

    Gradienți radiali CSS

    Gradientul radial este definit de centrul său.

    Pentru a crea un gradient radial, trebuie să definiți și cel puțin două opriri de culoare.

    Sintaxă

    fundal: gradient radial( dimensiunea formei la poziție, culoarea de început, ..., culoarea finală);

    În mod implicit, forma este o elipsă, dimensiunea este colțul cel mai îndepărtat, iar poziția este centrul.

    Gradient radial - Spațiere uniformă între opriri de culori (implicit)

    Următorul exemplu arată un gradient radial cu opriri de culoare răspândite uniform.

    Funcții CSS

    Definiție și aplicare

    Funcția CSS radial-gradient() este poziționată de-a lungul razei sale, extinzându-se spre exterior din centrul elementului într-o formă circulară sau eliptică, cu culorile gradientului distribuite uniform în spațiul elementului.

    Principiul creării degradelor radiali este similar cu crearea degradeurilor liniare (linear-gradient()), pentru aceasta trebuie doar să specificați culoarea de pornire - aceasta va fi situată în mijlocul gradientului și culoarea finală, care va fi localizată la sfârșitul gradientului.

    Puteți afla mai multe despre lucrul cu gradienți în articolele „” și „”. Vă rugăm să rețineți că articolele evidențiază nuanțele lucrului cu browsere vechi și oferă numeroase exemple.

    Suport pentru browser

    Funcţie
    Operă
    IExplorer
    Margine
    gradient radial()26.0
    10.0
    -webkit-    		16.0
    3.6
    -moz-    		12.1
    11.1
    -o-    		6.1
    5.1
    -webkit-    		10.0 12.0

    Sintaxa CSS:

    imagine de fundal / fundal: gradient radial ([forma (sau dimensiunea cuvântului cheie)] la poziția axa x axa y , culoarea 1 – stop 1, . . . , culoare n – stop n);

    Formă

    Forma eliptică este definită de valoarea elipsei, care este implicită (nu este nevoie să o specificați), iar forma circulară este definită de valoarea cercului.

    Cuvânt cheie

    Gradientul este calculat pe baza distanței până la partea apropiată/depărtată, sau cel mai apropiat / cel mai îndepărtat colț element.

    SensDescriere
    partea cea mai apropiatăGradientul este calculat pe baza distanței până la cea mai apropiată parte a elementului față de centrul său pentru degrade rotunji ( axa x sau axa y) și celor mai apropiate părți ( axa xȘi axa y) dacă gradientul este sub formă de elipsă. imagine de fundal: gradient radial (cerc cu partea cea mai apropiată la 60% 60%, prune, negru, portocaliu); imagine de fundal: gradient radial (elipsa cea mai apropiată la 60% 60%, prune, negru, portocaliu);
    cel mai apropiat colțGradientul este întins astfel încât să treacă prin colțul elementului cel mai apropiat de centru (dimensiunea este calculată pe baza distanței până la cel mai apropiat colț al elementului). imagine de fundal: gradient radial (cercul cel mai apropiat colț la 60% 50%, prune, negru, portocaliu); imagine de fundal: gradient radial (elipsa cel mai apropiat colț la 60% 50%, prune, negru, portocaliu);
    partea cea mai îndepărtatăGradientul este calculat pe baza distanței până la partea îndepărtată a elementului față de centrul său pentru degrade rotunji ( axa x sau axa y) și celor mai apropiate părți ( axa xȘi axa y) dacă gradientul este sub formă de elipsă. imagine de fundal: gradient radial (cercul din partea cea mai îndepărtată la 100% 50%, prune, negru, portocaliu); imagine de fundal: gradient radial (elipsa cea mai îndepărtată la 100% 50%, prune, negru, portocaliu);
    cel mai îndepărtat-colțGradientul este întins astfel încât să treacă prin colțurile elementului cel mai îndepărtat de centru (dimensiunea este calculată în funcție de distanța până la colțul îndepărtat al elementului). Aceasta este valoarea implicită. imagine de fundal: gradient radial (cercul cel mai îndepărtat colț la 60% 60%, prune, negru, portocaliu); imagine de fundal: gradient radial (elipsa cel mai îndepărtat colț la 60% 60%, prune, negru, portocaliu);

    mărimea

    Setează dimensiunea formei gradientului. Nu este nevoie să specificați valorile cercului sau elipsei, Este interzisă utilizarea cuvintelor cheie dacă dimensiunea este specificată. Dacă specificați o singură valoare, atunci acesta va fi considerat de browser ca . Dacă specificați două sensuri, Acea prima valoare va fi considerat de browser ca raza orizontală, A al doilea sens Cum raza verticală pentru elementul eliptic .

    Vă atrag atenția asupra faptului că Nu aveți voie să utilizați valori procentuale dacă specificați o singură valoare(raza pentru elementul rotund), atunci când este utilizat două sensuri(pentru gradient eliptic) Este permisă indicarea acestor valori sub formă de procente.

    Poziţie

    Poziția de pornire a gradientului radial este determinată de cuvântul cheie -center, dar poate fi modificată folosind unități de lungime(De exemplu: px sau ei), valori procentualeȘi Cuvinte cheie, care sunt folosite în proprietate CSS background-position , este responsabil pentru poziția (poziția) imaginii de fundal.

    SensDescriere
    Stânga sus
    centru stânga
    stânga jos
    dreapta sus
    dreapta centru
    dreapta jos
    centru de sus
    centru centru
    jos central         		Setează poziția imaginii. Prima valoare este poziția orizontală, iar a doua valoare este poziția verticală. Dacă specificați doar unul cuvânt cheie, cealaltă valoare ar fi „centru”
    X y% 0% 0% (aceasta este valoarea implicită). În colțul din dreapta jos 100% 100%. Dacă este specificată o singură valoare, atunci cealaltă valoare va fi 50%.
    X ySetează poziția imaginii. Prima valoare este poziția orizontală, iar a doua valoare este poziția verticală. Colțul din stânga sus are 0 0. Valorile pot fi în pixeli sau în alte unități CSS. Dacă este specificată o singură valoare, atunci cealaltă valoare va fi 50%. Puteți partaja interesȘi unitati.

    Culoare

    Este permisă utilizarea nu numai „Culori predefinite”, ci și orice „” - hexazecimal (HEX), Valori de culoare RGB/-A și HSL/-A .

    Stop

    Valori puncte de oprire (culoarea se oprește ) sunt specificate în unități de lungime(De exemplu - px sau ei) si in valori procentuale. Punctul de întrerupere îi spune browser-ului că gradientul razei ar trebui să atingă culoarea dată cu valoarea dată și să treacă fără probleme la următoarea culoare, dacă există.

    Exemplu de utilizare

    Să ne uităm la gradienții radiali ai formelor circulare și eliptice și să vedem care este diferența lor în următorul exemplu practic:

    Exemplu de utilizare a gradienților radiali



    ÎN în acest exemplu Am creat patru blocuri și le-am dat gradienți radiali. Blocurile superioare au formă eliptică, și blocurile inferioare forma rotunda.

    Să ne uităm la un exemplu de poziționare a unui gradient radial.

    Exemplu de poziționare a gradienților radiali
    la 5px 45px
    clasa = "test2" > la 50% maxim
    clasa = "test3" >în stânga sus

    la 0% jos
    clasa = "test5" >în centru jos
    clasa = "test6" > la 100% 100%


    În acest exemplu am creat șase blocuri cu diferite forme de gradienți (circulare și eliptice) și poziționat diferit gradientul pentru fiecare bloc, indicând valorile în pixeli, la sută si folosind Cuvinte cheie.

    Vă rugăm să rețineți că dacă un gradient radial este poziționat implicit în centru, iar elementul are formă pătrată, atunci nu veți vedea diferența dintre un gradient circular și un gradient în formă de elipsă.

    Să ne uităm la un exemplu de utilizare a punctelor de oprire a gradientului radial:




    În acest exemplu am creat șase blocuri: trei blocuri de sus diferă de trei mai jos doar prin formă de gradient, punctele cheie sunt aceleași:

    • Primul și al patrulea bloc – gradient de două culori culoare rosie, care se transformă lin în verde, ocupând restul elementului.
    • Blocul al doilea și al cincilea – gradient de trei culori, în care este ocupat 10% din centru culoare rosie, care se transformă lin în verde, cu un punct de oprire de 50%, la rândul său trece fără probleme la albastru, care ocupă restul elementului.
    • Blocul al treilea și al șaselea – gradient de trei culori, în care este ocupat 50% din centru culoare rosie, care se transformă lin în verde, cu un punct de oprire de 85%, la rândul său trece fără probleme în albastru, care ocupă întreaga mică parte rămasă a elementului.

    Să ne uităm la cum să controlăm dimensiunea unui gradient radial în CSS.

    Exemplu de dimensionare pentru gradienți radiali


    În acest exemplu, am creat trei blocuri:

    Primul bloc– am indicat noi o singură valoare 50px , care a fost interpretat de browser ca raza pentru gradient circular. Specificat pentru gradient 7 culori. Observați că culoarea cea mai exterioară umple zona rămasă.

    Al doilea bloc– am indicat noi două sensuri in procente: prima valoare - raza orizontală, A al doilea sens - raza verticală pentru un gradient eliptic. Specificat pentru gradient 8 culori. Vă rugăm să rețineți că am specificat albul ca culoare finală, care a umplut zona rămasă(o opțiune este să lăsați doar forma gradientului).

    Al treilea bloc– am indicat noi două sensuri în unităţi de lungime (pxȘi ei): prima valoare - raza orizontală, A al doilea sens - raza verticală pentru un element eliptic. Specificat pentru gradient 7 culori.