Gradienti circolari ed ellittici CSS3 [Suggerimenti CSS3]
Oggi continueremo la nostra discussione Gradienti CSS3. Nel post precedente ti abbiamo mostrato come creare Gradienti lineari. Questa volta copriremo il loro parente, Gradienti circolari ed ellittici.
La sintassi del gradiente
Il gradiente nei CSS3 è dichiarato usando il immagine di sfondo proprietà. Questo è per una migliore compatibilità quando dobbiamo anche aggiungere colore di sfondo in una singola serie di regole, in modo che non entrino in collisione tra loro. Quindi, per creare il gradiente radiale, lo chiamiamo semplicemente con questo radiale gradiente () funzione. Ci sono quattro valori da includere nella funzione per impostare correttamente il gradiente.
Il primo valore definisce il posizione del gradiente. Possiamo usare una parola chiave descrittiva come in alto, in basso, al centro e a sinistra, oppure possiamo anche essere più specifici, 50% 50% per impostare il gradiente al centro o 0% 0% per impostare la sfumatura all'inizio in alto a sinistra.
Il secondo valore definisce il forma e la dimensione del gradiente, ci sono due argomenti per modellare i gradienti, prima il ellisse che è l'impostazione predefinita e la seconda è cerchio.
E per il gradiente, possiamo selezionare uno dei seguenti sei argomenti.
| Valori | Descrizione |
|---|---|
vicina-side | La forma del gradiente incontra il lato della scatola più vicino al suo centro (per i cerchi) o incontra sia il lato verticale che quello orizzontale più vicino al centro (per le ellissi). |
vicino-angolo | La forma del gradiente è dimensionata in modo tale da soddisfare esattamente l'angolo più vicino della scatola dal suo centro. |
lontano-side | Simile al lato più vicino, eccetto che la forma è dimensionata per incontrare il lato della scatola più lontano dal suo centro (o lati verticali e orizzontali). |
più lontano angolo | La forma del gradiente è dimensionata in modo che corrisponda esattamente all'angolo più lontano della scatola dal suo centro. |
contenere | Un sinonimo per |
copertina | Un sinonimo per |
Fonte tabellare: Mozilla Developer Network.
Infine, il terzo e il quarto definiscono il combinazione di colori. Quindi, ecco come scriviamo la sintassi per creare il ellittico gradienti, e questa volta useremo copertina per le dimensioni del gradiente, quindi si diffonderà ampiamente, coprendo il contenitore;
body background-image: radial-gradient (centro, ellisse, # ffeda3, # ffc800);
Per creare il Circolare gradiente possiamo semplicemente farlo in questo modo:
body background-image: radial-gradient (centro, cerchio, # ffeda3, # ffc800);
Come suggerisce il nome, la forma del gradiente sarà un cerchio.
Supporto del browser
Basta prendere nota però, tutti i browser sono ancora in procinto di fornire pieno supporto per questa funzionalità, quindi hanno ancora bisogno del prefisso del venditore. Quindi, l'intera sintassi completa funzionerà con tutti i browser moderni - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ e Opera 11+ - sarà simile a questo;
body background-image: radial-gradient (centro fondo, ellisse, # ffeda3, # ffc800); background-image: -o-radial-gradient (centro fondo, ellisse, # ffeda3, # ffc800); background-image: -ms-radial-gradient (fondo centrale, coperchio ellisse, # ffeda3, # ffc800); background-image: -moz-radial-gradient (centro al fondo, ellisse, # ffeda3, # ffc800); background-image: -webkit-radial-gradient (fondo centrale, copertura dell'ellisse, # ffeda3, # ffc800);
Guarda la demo o scarica la sorgente per giocare con le sfumature.
- dimostrazione
- Scarica fonte
Parole finali
La creazione del gradiente radiale CSS3 non è così difficile come pensi, e soprattutto quando ottieni aiuto da questi strumenti per generare codice:
- Colorzilla Gradients
- Gradientoo
Il gradiente radiale è solo un tipo di gadients CSS3, continueremo la nostra discussione sull'argomento nei post futuri, quindi rimanete sintonizzati su Hongkiat.com
