CSS3 Gradiente circulare și eliptice [Sfaturi CSS3]
Astăzi vom continua discuția noastră Gradienți CSS3. În postarea precedentă ne-am arătat cum să creați Gradienți liniari. De data aceasta vom acoperi ruda lor, Gradientele circulare și eliptice.
Sintaxa gradientului
Gradientul în CSS3 este declarat folosind imagine de fundal proprietate. Aceasta este pentru o mai bună compatibilitate atunci când trebuie să adăugăm și noi culoare de fundal într-un singur set de reguli, astfel încât să nu se ciocnească unul cu celălalt. Apoi, pentru a crea gradientul radial, pur și simplu îl numim cu acesta radial gradient () funcţie. Există patru valori care trebuie incluse în funcție pentru a seta corect un gradient.
Prima valoare definește gradient. Putem folosi un cuvânt cheie descriptiv, cum ar fi top, jos, centru și stânga, sau putem fi și mai specifici, 50% 50% pentru a seta gradientul în centru sau 0% 0% pentru a seta gradientul pentru a începe la stânga sus.
A doua valoare definește forma și mărimea gradientului, există două argumente pentru a modela gradientele, mai întâi elipsă care este implicit, iar al doilea este cerc.
Și pentru gradient dimensiune, putem selecta unul din următoarele șase argumente.
| valori | Descriere |
|---|---|
cel mai apropiat-side | Forma gradientului se întâlnește cu partea laterală a casetei cea mai apropiată de centrul acesteia (pentru cercuri) sau se întâlnește atât pe cele verticale, cât și pe cele orizontale apropiate de centru (pentru elipse). |
cel mai apropiat colț | Forma gradientului este dimensionată astfel încât să se întâlnească exact cu cel mai apropiat colț al cutiei din centrul său. |
cel mai îndepărtat-side | Similar cu partea cea mai apropiată, cu excepția faptului că forma este dimensionată astfel încât să se potrivească cu partea laterală a cutiei cea mai îndepărtată de centrul său (sau lateral vertical și orizontal). |
cel mai îndepărtat colț | Forma gradientului este dimensionată astfel încât să se întâlnească exact cu cel mai îndepărtat colț al cutiei din centrul său. |
conține | Un sinonim pentru |
acoperi | Un sinonim pentru |
Sursa tabelului: Rețeaua Mozilla pentru dezvoltatori.
În sfârșit, al treilea și al patrulea definesc combinație de culori. Deci, iată cum scriem sintaxa pentru a crea Eliptic gradienti, iar de data aceasta vom folosi acoperi pentru dimensiunea gradientului, astfel încât se va răspândi larg, acoperind containerul;
corp fundal-imagine: radial-gradient (centrul centrului, capacul elipsei, # ffeda3, # ffc800);
Pentru a crea Circular gradient putem face acest lucru pur și simplu:
corp fundal-imagine: radial-gradient (centru centru, acoperire cerc, # ffeda3, # ffc800);
După cum sugerează și numele, forma gradientului va fi un cerc.
Suport pentru browser
Doar luați notă, totuși, toate browserele se află încă în proces de furnizare a suportului complet pentru această caracteristică, astfel încât acestea încă au nevoie de prefixul vânzătorului. Astfel, întreaga sintaxă completă care va funcționa în toate browserele moderne - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ și Opera 11+ - va arăta așa;
corp fundal-imagine: radial-gradient (fundul central, capacul elipsei, # ffeda3, # ffc800); fundal-imagine: -o-radial-gradient (fundul centrului, capacul elipsei, # ffeda3, # ffc800); fundal-imagine: -ms-radial-gradient (fundul central, capacul elipsei, # ffeda3, # ffc800); fundal-imagine: -moz-radial-gradient (fundul centrului, capacul elipsei, # ffeda3, # ffc800); fundal-imagine: -webkit-gradient radial (fundul central, capacul de elipsă, # ffeda3, # ffc800);
Verificați demo-ul sau descărcați sursa pentru a juca cu gradiente.
- Demo
- Descărcați sursa
Cuvintele finale
Crearea gradientului radial CSS3 nu este la fel de greu pe cât credeți și mai ales când primiți ajutor din partea acestor instrumente pentru generarea de coduri:
- Colorizilla Gradients
- Gradientoo
Radiusul gradient este un singur tip de gadgeturi CSS3, vom continua discuția noastră cu privire la acest subiect în posturile viitoare, așa că rămâneți la acord cu Hongkiat.com
