Toți cei care ar putea fi interesați de CSS3 l-au văzut și au încercat. Putem genera atât colțuri rotunjite, cât și umbre căzătoare fără prea mult efort.
Dar acesta este doar un nivel superficial. A trebuit să mă ocup de noile capabilități ale browserelor mai detaliat pentru a răspunde la întrebările care au apărut precum: cum sunt gradienții încrucișați cu multe tranziții de culoare, unde și cum poți aplica simultan mai multe umbre unui bloc, pentru care sunt aplicate prefixe de proprietate specifice browserelor etc.
De asemenea, am fost interesat de suportul CSS3 pe platforme mobile, caracteristicile neexplorate ale CSS3 și generatoarele care generează coduri între browsere. Am încercat să umplu câteva goluri și să adun Informatii utile pentru cei care tocmai se pregătesc să se scufunde.
Browserele care acceptă proprietățile sunt listate ca comentarii CSS. Generatoarele și instrumentele pot îndeplini cel mai adesea mai multe funcții simultan, așa că în astfel de cazuri le enumerez doar acolo unde cred că fac cel mai bine.
Liniar-gradient
De fapt, există mai multe tipuri de gradienți CSS3 simultan. Acesta este cel mai simplu gradient.div (
culoare de fundal: # 444444;
imagine de fundal: -webkit-gradient (liniar, stânga sus, stânga jos, de la (# 444444), la (# 999999)); / * Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 * /
imagine de fundal: -webkit-linear-gradient (sus, # 444444, # 999999); / * Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ * /
imagine de fundal: -moz-linear-gradient (sus, # 444444, # 999999); / * Firefox 3.6+ * /
imagine de fundal: -ms-linear-gradient (sus, # 444444, # 999999); / * IE 10+ * /
imagine de fundal: -o-linear-gradient (sus, # 444444, # 999999); / * Opera 11.10+ * /
imagine de fundal: gradient liniar (în jos, # 444444, # 999999);
}
Pe lângă specificarea culorilor de început și de sfârșit, gradienții vă permit să schimbați unghiul de înclinare, poziția începutului și sfârșitului tranziției de culoare, numărul de culori și direcția gradientului.
Safari înainte de versiunea 5 și Chrome înainte de versiunea 10 aveau propria lor sintaxă, iar IE 10 și Opera își adaugă propriile prefixe, crescând cantitatea de cod.Toate caracteristicile de gradient sunt acceptate de browsere care pot reda gradienți CSS3, chiar dacă unele generatoare ne oferă doar o tranziție între două culori.
Repetare-liniar-gradient
Vă permite să repetați gradientul, vă permite să creați modele de fundal.Div (
culoare de fundal: # 444444;
imagine de fundal: -webkit-repetarea-gradient-liniar(sus, # 444444 18%, # 999999 25%); / * Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ * /
imagine de fundal: -moz-repetarea-gradient-liniar(sus, # 444444 18%, # 999999 25%); / * Firefox 3.6+ * /
imagine-de-fond: -ms-repeating-linear-gradient (sus, # 444444 18%, # 999999 25%); / * IE 10+ * /
imagine-de-fond: -o-repeating-linear-gradient (sus, # 444444 18%, # 999999 25%); / * Opera 11.10+ * /
imagine de fundal: repetare-liniar-gradient (sus, # 444444 18%, # 999999 25%);
}
Radial-gradient
Graent circular. De asemenea, puteți avea mai multe tranziții de culoare, puteți defini punctul de început al gradientului (nu neapărat din centrul cercului).Div (
fundal: # 444444;
fundal: -webkit-gradient (radial, centru centru, 0px, centru centru, 100%, color-stop (0%, # 444444), color-stop (100%, # 999999)); / * Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 * /
fundal: -webkit-radial-gradient (centru, capac elipsa, # 444444 0%, # 999999 100%); / * Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ * /
fundal: -moz-radial-gradient (centru, capac elipsa, # 444444 0%, # 999999 100%); / * Firefox 3.6+ * /
fundal: -o-radial-gradient (centru, capac elipsa, # 444444 0%, # 999999 100%); / * Opera 11.6+ * /
fundal: -ms-radial-gradient (centru, capac elipsa, # 444444 0%, # 999999 100%); / * IE 10+ * /
fundal: radial-gradient (centru, acoperire elipsă, # 444444 0%, # 999999 100%);
}
Opera nu a suportat gradienți circulari până la versiunea 11.6. Restul situației este aceeași ca și în cazul gradientului liniar.
Instrumente:
- gradients.glrzad.com produce cod pentru cross-browser, pot fi create multe tranziții de culoare
- www.colorzilla.com/gradient-editor cel mai sofisticat generator. Puteți crea degrade liniare și circulare, există o alegere de format pentru înregistrarea culorilor, multe gradiente gata făcute.
- lea.verou.me/css3patterns galerie de modele CSS3. Puteți vedea codul pentru fiecare model.
Fundaluri multiple
Aceasta este capacitatea de a atribui mai multe imagini de fundal unui element deodată.div (
fundal: url (fallback.png) no-repeat 0 0;
fundal: url (foreground.png) fără repetare 0 0, url (middle-ground.png) fără repetare 0 0, url (background.png) fără repetare 0 0; / * Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ * /
}
Nu uitați de browserele care nu acceptă mai multe fundaluri.Ordinea fundalurilor este următoarea: de sus în jos, adică fundalul cel mai de jos trebuie scris la sfârșit. In loc de imagini de fundal puteți scrie și gradienți CSS3.
Frontiera-raza
Colțuri rotunjite la bloc. Este simplu dacă aveți nevoie de aceeași rază de curbură.Div (
-webkit-border-radius: 12px; / * Safari 3-4, iOS 1-3.2, Android ≤1.6 * /
-moz-border-radius: 12px; / * Firefox 1-3.6 * /
chenar-rază: 12px; / * Opera 10.5+, IE 9+, Safari 5, Chrome, Firefox 4+, iOS 4+, Android 2.1+ * /
}
Toți producătorii au abandonat deja prefixele de furnizor ultimele versiuni browsere.
Dar dacă colțurile diferite trebuie să aibă raze diferite, atunci trebuie să enumerați razele pentru fiecare colț.
Firefox are o particularitate că unghiurile sunt enumerate folosind o altă sintaxă decât standardul. Dar soluția poate fi folosirea unei sintaxe scurte, care este aceeași în toate browserele.
div (
-moz-border-radius: 15px 30px 45px 60px;
-webkit-border-radius: 15px 30px 45px 60px;
chenar-rază: 15px 30px 45px 60px;
}
O caracteristică interesantă este transmiterea de perechi de valori ale razei pentru fiecare colț. Deci poți obține mai mult forme complexe decât doar rotunjiri:
Div (
chenar-sus-stânga-rază: 5px 30px;
chenar-sus-dreapta-rază: 30px 60px;
raza-chenar-jos-stânga: 80px 40px;
raza-chenar-jos-dreapta: 40px 100px;
}
Daca toata lumea este la fel:
Div (
chenar-rază: 8px / 13px;
}
Instrumente:
Upd Pentru cei care doresc să automatizeze procesul de creare a prefixelor este scris.
Gradient radial se extinde de la punctul central al gradientului în toate direcțiile într-un cerc sau formă eliptică (forma implicită), demonstrând tranzitie lina de la o nuanță de culoare la alta. Un gradient radial este creat folosind funcția radial-gradient (). Funcția creează o imagine care este un gradient radial între nuanțele de culoare specificate. În mod implicit, dimensiunea gradientului se potrivește cu dimensiunea elementului la care este aplicat.
Funcția radial-gradient () acceptă următoarele argumente separate prin virgulă:
- Cuvintele cheie și/sau unitățile sunt specificate ca prim argument Dimensiuni CSS determinând forma finală, mărimea și locația inițială 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 radial necesită doar două argumente pentru a specifica o culoare de început și de sfârșit:
Div (imagine de fundal: gradient radial (cian, indigo); lățime: 400 px; înălțime: 100 px;) Încercați "
Ca și în cazul gradienților liniari, un gradient radial poate include o listă de mai mult de două culori, iar o poziție de oprire poate fi specificată pentru orice culoare.
Div (lățime: 400px; înălțime: 100px; margine: 10px;) #one (imagine de fundal: gradient radial (cian, galben, indigo, alb);) #două (imagine de fundal: gradient radial (cian, galben) 10%, indigo 30%, alb 50%);) Încearcă"
Forma gradientului radial poate fi determinată folosind Cuvinte cheie cerc (cerc) și elipsă (elipsă), specificând unul dintre ele ca prim argument:
Div (lățime: 400 px; înălțime: 100 px; margine: 10 px;) #one (imagine de fundal: gradient radial (elipsă, cyan, indigo);) #două (imagine de fundal: gradient radial (cerc, cyan, indigo) );) Incearca-l "
În mod implicit, browserul plasează punctul central al gradientului radial în centrul elementului. Centrul gradientului poate fi poziționat folosind cuvântul cheie at urmat de cuvinte cheie (sus, stânga, dreapta, jos, centru) sau valori în unități CSS specificate:
| Sens | Descriere |
|---|---|
| Stânga sus centru stânga stânga jos dreapta sus dreapta centru dreapta jos centru de sus centru centru jos central | Dacă specificați un singur cuvânt cheie, al doilea va fi „centru”. |
| X y% | Prima valoare este poziția orizontală, a doua valoare este verticală. Colțul din stânga sus este poziția 0% 0%. Colțul din dreapta jos este poziția 100% 100%. Dacă specificați doar o valoare, cealaltă valoare va fi 50%. |
| x-poz y-poz | Prima valoare este poziția orizontală, a doua este cea verticală. Colțul din stânga sus este poziția 0 0. Unitățile pot fi pixeli (0px 0px) sau orice alte unitate CSS măsurători. Dacă specificați doar o valoare, cealaltă valoare va fi 50%. Puteți amesteca% și unități. |
Poziționarea gradientului este specificată înaintea valorilor de nuanță, dar după cuvântul cheie care definește forma gradientului (dacă este specificat):
Div (lățime: 400px; înălțime: 100px; margine: 10px;) #one (imagine de fundal: gradient radial (la dreapta, cyan, indigo);) #două (imagine de fundal: gradient radial (cerc la 300px 50px) , cyan, indigo, galben);) #trei (imagine de fundal: gradient radial (cerc în stânga sus, cyan, indigo, galben);) Încercați "
Mărimea gradientului (cât de mare ar trebui să fie forma finală a gradientului) poate fi determinată folosind una dintre cele patru expresii cheie sau prin specificarea razei folosind unități CSS (nu puteți folosi procente pentru a determina raza).
| Cuvinte cheie | Descriere | |
|---|---|---|
| Dimensiunea finală a gradientului depinde de distanța dintre centrul gradientului și cea mai apropiată latură a elementului (pentru un cerc) sau de distanța dintre centru și cele două laturi ale elementului cel mai apropiat de acesta (pentru o elipsă). | ||
| Mărimea finală a gradientului depinde de distanța dintre centrul gradientului și colțul elementului cel mai apropiat de acesta. |
 |
|
| Dimensiunea finală a gradientului depinde de distanța dintre centrul gradientului și cea mai îndepărtată parte a elementului (pentru un cerc) sau distanța dintre centrul gradientului și cele două laturi cele mai îndepărtate de acesta (pentru o elipsă). |
 |
|
| Dimensiunea finală a gradientului depinde de distanța dintre centrul gradientului și colțul elementului cel mai îndepărtat de acesta. Folosit implicit pentru o formă de cerc sau elipsă. |
 |
Cuvintele cheie care definesc dimensiunea gradientului sau raza sunt specificate înainte sau după cuvântul cheie care definește forma și întotdeauna înainte de definirea poziției.
Div (lățime: 400px; înălțime: 100px; margine: 10px;) #unu (imagine de fundal: gradient radial (cercul cel mai apropiat colț la 100px, cyan 50%, indigo);) #două (imagine de fundal: radial- gradient (cerc cel mai apropiat, cyan, roșu, indigo);) #trei (imagine de fundal: gradient radial (cerc de 100 de pixeli la 200 de pixeli, cyan 50%, indigo);) #patru (imagine de fundal: gradient radial ( 170px 50px elipsă la 175px, cyan, # 90EE90, rgba (172,160,160,0));)
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, este mai benefic de utilizat gradient CSS3și astfel „luminează” site-ul. Deoarece utilizatorul nu va trebui să piardă timp și trafic pentru a descărca imagine de fundal... Există două tipuri principale de gradienți: radiali și liniari. 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. Iar pentru anunț se folosește proprietatea imagine de fundal.
V caz general sintaxa gradientului (liniară) arată astfel:
1 | div ( |
Deci hai să vorbim despre totul în ordine.
În primul rând, gradientul liniar este declarat cu funcția liniar-gradient (). Funcția are trei semnificații principale. Prima valoare determină poziția inițială... Exemplul specifică top, i.e. poziția de pornire deasupra. De asemenea, puteți utiliza jos, stânga și dreapta;
Dacă unghiul este negativ, atunci 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 este opțională, browserul va atribui 0% primei culori în mod implicit.
Ultima valoare este a doua culoare și poziția sa de oprire. Valoarea implicită este 100%. Acestea sunt valori extreme și implică faptul că prima culoare începe imediat să treacă în a doua. Cu toate acestea, dacă setăm 50% pentru prima culoare, atunci va începe doar de la mijlocul înălțimii disponibile până la a doua. Așa arată codul:
Obținem benzi de aceeași înălțime. Cu o margine clară, nu va exista nicio tranziție de culoare. Experimentați cu valorile pentru a înțelege mai bine cum funcționează.
Un gradient radial, la fel ca unul liniar, este declarat ca functie, doar ca de data aceasta gradient-radial (). Există și valori de bază: aceasta este forma gradientului radial (cerc - cerc sau elipsă - elipsă), culoarea de început și de sfârșit. Sintaxa este următoarea:
div ( |
Dacă nu specificați o formă, atunci o elipsă va fi setată implicit.
De asemenea, implicit, poziția centrală a gradientului este setată, aceasta poate fi schimbată. Poziția poate fi setată cu comenzile (sus, jos, stânga, dreapta și centru), precum și combinațiile acestora, sau specificată în procente sau pixeli.
Combinații de comenzi:
- Sus centru - sus - 50% 0%;
- In stanga colțul de sus- stânga sus - 0% 0%;
- În colțul din dreapta sus - dreapta sus - 100% 0%;
- 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 - stânga jos - 0% 100%;
- În colțul din dreapta jos - din dreapta jos - 100% 100%.
Iată un exemplu cu procente:
div ( |
Prima valoare de-a lungul axei NS al doilea la Avea.
De asemenea, puteți dimensiona gradientul radial. Mărimea este specificată cu un spațiu după forma gradientului. Valoarea implicită este 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, luați în considerare un exemplu. Graent eliptic cu alb început și sfârșit albastru:
div ( |
Dimensiunea este calculată de la distanța la părțile apropiate, este evident că cea 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, așa cum se spune pe față. Mărimea este calculată de la distanță până la părțile îndepărtate.
În gradient radial, precum și în gradient liniar, pentru culoare pot fi aplicate poziții de oprire. De asemenea, aș dori să remarc că, dacă trebuie să obțineți transparența culorilor, atunci ar trebui să utilizați rgba.
div ( |
Canalul alfa, ultimul și egal cu 0,2, indică faptul că doar 20% din culoare este folosită de la 100%.
În ambele forme gradient CSS3 puteți folosi nu două, ci mai multe culori.
div ( |
Pentru ambele vizualizări, poate fi folosită repetarea culorilor. Adică din aceste valori se formează un ciclu. Funcțiile gradient repetat, repetarea-linear-gradient () pentru liniar și repetare-radial-gradient () pentru radial.
div ( |
0%, # FFAE00 100%); / * pentru Firefox * /
imagine de fundal: -ms-linear-gradient (sus, # FF5A00 0%, # FFAE00 100%); / * pentru IE 10+ * /
imagine de fundal: -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ă rețea este procentul de saturație a culorii.
Sper că articolul v-a fost util și că subiectul discutat este dezvăluit pe deplin.
Pentru a fi la curent cu cele mai recente articole și lecții, abonați-vă la
Valoarea -moz-radial-gradient
Indică un gradient radial (circular). Se aplică pentru ,.
Sintaxă
-moz-radial-gradient([
Valori folosite
|
Observatii
Un gradient este o combinație de două sau mai multe culori predefinite care se îmbină lin una în alta. V CSS gradienții sunt folosiți în locul oricăror imagini, ca indicator de încărcare, pentru a îmbunătăți percepția unei pagini web la scalare etc. Mozilla Firefox suportă două tipuri de gradienți: liniar și radial.
Mozilla Firefox acceptă corect gradienții doar ca valori pentru o proprietate și, de asemenea. Puteți specifica o valoare pentru gradient în loc de adresa URL a imaginii.
Gradient radial sau circular specificat cu -moz-radial-gradient, se extinde și de-a lungul axei. Poate fi gândit ca o succesiune de cercuri de-a lungul unei axe, fiecare având un punct de referință (centru) și o lungime a razei. Gradientul radial arată astfel:
Imagine de fundal: -moz-radial-gradient (centrul 45deg, cerc cea mai apropiată latură, portocaliu 0%, roșu 100%);
-moz-radial-gradient nu acceptă degradeuri repetate. În mod implicit, gradientul se întinde pentru a umple întregul element la care este aplicat. Consultați acest articol pentru a afla cum să creați un gradient circular care se repetă.
Exemple de
Exemplele arată cum se descrie gradienții radiali folosind -moz-radial-gradient
Fundal: -moz-radial-gradient (45px 45px 45deg, acoperire cerc, aqua 0%, rgba (0, 0, 255, 0) 100%, albastru 95%);
Exemplu de rezultat de execuție:
Fundal: -moz-radial-gradient (45px 45px, elipse cel mai îndepărtat-colț, aqua 0%, rgba (0, 0, 255, 0) 100%, albastru 95%); fără repetare;
Exemplu de rezultat de execuție:
Fundal: -moz-radial-gradient (45px 45px, cover, rgb (255, 0, 0) 0%, rgb (0, 0, 255) 100%);
Pentru a nu căuta pe internet fragmente de informații, este mai bine să colectați totul într-un singur loc. Astăzi vom vorbi despre Gradienți CSS3- o caracteristică necesară, des folosită și, bineînțeles, utilă în dezvoltare și layout. A existat dorința de a face un articol enciclopedic, dar cum s-a întâmplat depinde de tine să judeci.
„Gradientul este un tip de umplere în grafica computerizată, în care este necesară setarea culorii și transparenței anumitor puncte (cheie), iar culoarea și transparența altor puncte sunt calculate în raport cu acestea în funcție de anumiți algoritmi matematici. Astfel, puteți obține tranziții netede de la o culoare la alta, setând coordonatele și culoarea punctelor de început și de sfârșit.” Wikipedia
Apropo, pentru cei care abia încep să stăpânească CSS - un articol minunat de la Natalia Mitrofanova - Cum se folosește CSS. Toți începătorii recomand cu caldura familiariza. Accesibil, ușor de înțeles - în general, excelent
Dar să revenim la subiectul articolului. Există două tipuri de gradienți în CSS3 - liniar și radial. Să luăm în considerare fiecare tip mai detaliat pentru a înțelege specificul utilizării lor.
Gradient liniar CSS3
Un gradient liniar este unul în care culoarea se amestecă proporțional între două puncte într-o linie dreaptă. Cea mai ușoară cale este, de exemplu:
Div (/ * - prefix-linear-gradient (culoare de început, culoare de sfârșit); * / fundal: -moz-linear-gradient (#FFF, # 000); fundal: -ms-linear-gradient (#FFF, # 000) ); fundal: -o-linear-gradient (#FFF, # 000); fundal: -webkit-linear-gradient (#FFF, # 000);)
Exemplu elementar- Gradient liniar care începe cu alb și se termină cu negru. Prefixul furnizorului - obligatoriu acest moment, standard uniform nu, deoarece gradienții sunt încă o caracteristică experimentală, în ciuda întregului suport de browser.
Să mergem mai departe și să luăm în considerare mai multe exemplu complex- schimbați direcția gradientului. Se numește direcția în sintaxă punctși necesită două valori - de unde și de unde. Există cinci valori în total: top, fund, stânga, dreaptași centru.În consecință, atunci când scrieți o direcție, trebuie folosite două sensuri. Primul este „unde”, al doilea este „unde”. Dar există puțină subtilitate - dacă este specificată o singură locație - a doua va fi implicită centru... Luați în considerare acest lucru în proiectele dvs.
În exemplul de mai sus, direcția gradientului nu este specificată, așa că direcția este selectată implicit. centru sus.
Div (fond: gradient liniar (sus, #FFF, # 000);) div (fond: gradient liniar (sus, #FFF, # 000);)
Aceste înregistrări, de fapt, sunt similare cu exemplul anterior, dar pentru simplitate și reducerea dimensiunii, în acest caz, direcția este de obicei omisă, ca fiind inutilă.
Ca o alternativă la direcție, ci mai degrabă ca adaos, unghiurile pot fi utilizate în înregistrare, a căror valoare poate fi specificată în mai multe cantități, inclusiv grade, radiani și alte lucruri geometrice. Dar pentru simplitate, este mai bine să folosiți grade, așa că va fi clar pentru toată lumea. Graduațiile sunt în sensul acelor de ceasornic - 0 sau 360 este sus, 90 este dreapta, 180 este jos și 270 este stânga. O intrare cu semnul minus este acceptabilă - în acest caz, gradarea merge în sens invers acelor de ceasornic.
Să ne uităm la câteva exemple pentru a înțelege procesul:
Ex1 (fond: gradient liniar (stânga, #FFF, # 000);) ex2 (fond: gradient liniar (dreapta, #FFF, # 000);) ex3 (fond: gradient liniar (225deg, #FFF, #) 000);)
Prima opțiune este de la stânga la dreapta, a doua este de la dreapta la stânga, a treia este de 225 de grade. Gradele vă permit să direcționați mai precis gradientul, care nu poate fi realizat cu cuvinte.
Următorul moment interesant atunci când lucrați cu degrade -
Adăugați culoarea de oprire
Până acum am folosit doar degrade simple, în două culori. Acum, pentru un exemplu mai complicat, adăugați o altă culoare la gradient. Ca asta:
Div (fond: gradient liniar (stânga, # 000, # FFF, # 000);)
Acest exemplu adaugă culoare albaîntre doi negri. Rezultatul este un gradient care trece de la negru la alb și revine la starea initiala- La negru. Lucru mai clar Vă voi arăta culorile oprite în câteva exemple:
Ex1 (fond: gradient liniar (stânga, # 000, # FFF, # 000);) ex2 (fond: gradient liniar (stânga, # 000, # FFF 75%, # 000);) ex3 (fond: liniar- gradient (jos, # 000, # FFF 20px, # 000);) ex4 (fond: liniar-gradient (45deg, # 000, # FFF, # 000, # FFF, # 000);)
Rezultat in poza:
În primul exemplu, exact ce s-a spus mai sus - alb exact între doi negri (la naiba, cât de incorect din punct de vedere politic a ieșit).
Al doilea exemplu este același, doar că este indicat unde va fi culoarea de oprire. V în acest caz- 75% de la început. Sintaxa este simplă - exemplul arată. După valoarea culorii, specificați poziția ca procent. Nu sunt necesare virgule.
Cel de-al treilea exemplu arată că valoarea poziției de oprire a culorii poate fi specificată nu numai ca procent, ci și în pixeli (precum și în toate celelalte unități pe care le înțelege CSS, dar se folosesc mai ales procente și pixeli)
Al patrulea - cinci opriri de culoare, direcția schimbată. Totul este destul de simplu.
Gradient radial CSS3
De fapt, este mult mai interesant să lucrezi cu el decât cu un gradient liniar. Dar, din păcate, nu este întotdeauna posibil să o potriviți în design. Un gradient radial este unul care se extinde dintr-un punct din centru de-a lungul unui cerc.
E (fond: gradient radial (poziție sau unghi, formă sau dimensiune, de la oprire, culoare de oprire, până la oprire);)
Sintaxa este aproape aceeași, cu o singură diferență - formă și dimensiune adăugate. Există două tipuri de formă - elipsă și cerc (elipsă și cerc, respectiv, valoare implicită: elipse) Valoarea mărimii poate lua una din șase valori. Despre ei mai jos.
Cea mai simplă sintaxă arată astfel:
Div (fond: gradient radial (# FFF, # 000);)
Gradienții radiali trebuie să fie specificați cu prefixul furnizorului de browser:
Div (fond: -moz-radial-gradient (#FFF, # 000); fundal: -ms-radial-gradient (#FFF, # 000); fundal: -webkit-radial-gradient (#FFF, # 000); )
Rezultatul executării codului este în imagine:
Să aruncăm o privire la codul mai complex:
Div (fond: gradient radial (conține cerc, #FFF, # 000);)
Observați că în exemplu există două selectoare menționate mai sus - formă și dimensiune (poziția). Este dificil să numești dimensiunea valorii selectorului, mai degrabă este locația. Dar în documentația oficială, acest selector este notat ca mărimea, de aceea o vom numi dimensiune. Cercul -înseamnă doar că gradientul va fi rotund, nu eliptic. Conține - unul dintre cuvintele cheie pe care un selector de dimensiune le poate accepta. Voi descrie fiecare pentru a fi mai clar:
- partea cea mai apropiată- Cea mai apropiată parte. Gradientul se extinde din centru spre partea cea mai apropiată a elementului (pentru cerc), sau pe ambele părți orizontale și verticale (pentru elipsă).
- cel mai apropiat colț- Cel mai apropiat colț. Dimensiunea gradientului este de așa natură încât se extinde de la centru până la cel mai apropiat colț al elementului.
- partea cea mai îndepărtată- Partea cea mai îndepărtată. Gradientul se extinde din centru spre partea exterioară a elementului (pentru cerc), sau pe ambele laturi, orizontale și verticale (pentru elipsă).
- cel mai îndepărtat-colț- Cel mai îndepărtat colț. Dimensiunea gradientului este de așa natură încât se extinde de la centru până la colțul exterior al elementului.
- conține- La fel partea cea mai apropiată.
- acoperi- La fel cel mai îndepărtat-colț.
Câteva exemple pentru claritate:
Ex1 (fond: radial-gradient (cercul cel mai îndepărtat-parte, # 000, #FFF);) ex2 (fundal: radial-gradient (stânga, cerc cel mai îndepărtat-parte, # 000, # FFF);) ex3 (fundal: radial- gradient (sus dreapta, acoperire cerc, # FFF, # 000);) ex4 (fond: gradient radial (80% 50%, cerc cea mai apropiată, # FFF, # 000);)
Rezultatul executării fiecărui cod:
Primul exemplu este un gradient circular care se extinde până în partea îndepărtată (utilizat partea cea mai îndepărtată)
În al doilea rând - centrul este în stânga, gradientul este răspândit în partea îndepărtată.
Al treilea - centru sus dreapta, gradient până la colțul îndepărtat.
În al patrulea rând, centrul este situat într-un punct, 50% în lățime, 80% în înălțime și un gradient circular către cea mai apropiată parte.
Adăugați culoarea de oprire
Ca și gradienții liniari, gradienții radiali pot funcționa și cu mai multe culori. Aplicația lor nu este diferită de cele liniare, prin urmare nu voi descrie, voi da doar câteva exemple:
Ex1 (fond: gradient radial (cercul latura cea mai îndepărtată, # 000, # FFF, # 000);) ex2 (fond: gradient radial (cercul latura cea mai îndepărtată, # 000, # FFF 25%, # 000);) ex3 (fond: gradient radial (stânga, cerc-partea cea mai îndepărtată, # FFF, # 000 25%, # FFF 75%, # 000);) ex4 (fond: gradient radial (40% 50%, cerc partea cea mai apropiată) , # FFF, # FFF 25%, # 000 50%, # FFF 75%, # 000);)
Puteți vedea totul din cod, aveți deja gradiente experimentate.
Asta e tot pentru azi. Articolul este deja obscen de uriaș. Mulțumesc tuturor celor care au citit până aici. Retweeturile și orice socialism sunt binevenite. Să aveți o zi bună
