CSS3 è stato visto e provato da tutti coloro che potrebbero essere interessati. E possiamo già generare angoli arrotondati e ombre cadenti senza troppo lavoro.
Ma questo è solo il livello della superficie. Ho dovuto affrontare le nuove funzionalità dei browser in modo più dettagliato per rispondere a domande come: come sono i gradienti tra browser con molte transizioni di colore, dove e come è possibile applicare più ombre a un blocco contemporaneamente, per quali specifiche proprietà del browser vengono applicati i prefissi, ecc.
Inoltre, ero interessato al supporto CSS3 su piattaforme mobili, funzionalità inesplorate di CSS3, nonché generatori che creano codice cross-browser. Ho cercato di colmare alcune lacune e raccogliere informazioni utili per coloro che si stanno appena preparando ad immergersi.
I browser che supportano le proprietà sono elencati come commenti CSS. Generatori e strumenti molto spesso possono svolgere più funzioni contemporaneamente, quindi in questi casi li ho indicati solo dove, secondo me, svolgono il lavoro migliore.
Gradiente lineare
In effetti, ci sono diversi tipi di gradienti CSS3 contemporaneamente. Questo è il gradiente più semplice.div (
colore di sfondo: #444444;
background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da(#444444), a(#999999)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
immagine di sfondo: -webkit-linear-gradient(in alto, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
immagine di sfondo: -moz-linear-gradient (in alto, #444444, #999999); /* Firefox 3.6+ */
immagine di sfondo: -ms-linear-gradient (in alto, #444444, #999999); /* IE 10+ */
background-image: -o-linear-gradient (in alto, #444444, #999999); /* Opera 11.10+ */
immagine di sfondo: gradiente lineare (verso il basso, #444444, #999999);
}
Oltre a specificare i colori di inizio e fine, i gradienti consentono di modificare l'angolo di inclinazione, la posizione dell'inizio e della fine della transizione del colore, il numero di colori e la direzione del gradiente.
Safari prima della versione 5 e Chrome prima della versione 10 avevano la propria sintassi e IE 10 e Opera aggiungono i propri prefissi, aumentando la quantità di codice.Tutte le funzionalità dei gradienti sono supportate da quei browser che possono eseguire il rendering dei gradienti CSS3, anche se alcuni generatori ci offrono solo una transizione tra due colori.
gradiente lineare ripetuto
Consente di ripetere il gradiente, consente di creare motivi di sfondo.Div(
colore di sfondo: #444444;
immagine di sfondo: -webkit-ripetizione-lineare-gradiente(in alto, #444444 18%, #999999 25%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
immagine di sfondo: -moz-ripetizione-lineare-gradiente(in alto, #444444 18%, #999999 25%); /* Firefox 3.6+ */
immagine di sfondo: -ms-repeating-linear-gradient (in alto, #444444 18%, #999999 25%); /* IE 10+ */
background-image: -o-repeating-linear-gradient (in alto, #444444 18%, #999999 25%); /* Opera 11.10+ */
immagine di sfondo: gradiente lineare ripetuto (in alto, #444444 18%, #999999 25%);
}
Gradiente Radiale
gradiente circolare. Puoi anche avere diverse transizioni di colore, puoi definire il punto iniziale del gradiente (non necessariamente dal centro del cerchio).Div(
sfondo: #444444;
sfondo: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 */
sfondo: -webkit-radial-gradient (centro, copertina ellisse, #444444 0%,#999999 100%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
sfondo: -moz-radial-gradient (centro, copertina ellisse, #444444 0%, #999999 100%); /* Firefox 3.6+ */
sfondo: -o-radial-gradient (centro, copertura ellisse, #444444 0%,#999999 100%); /* Opera 11.6+ */
sfondo: -ms-radial-gradient (centro, copertura ellisse, #444444 0%,#999999 100%); /* IE 10+ */
sfondo: gradiente radiale (centro, copertura ellisse, #444444 0%,#999999 100%);
}
Opera non supportava il gradiente circolare fino alla versione 11.6. In caso contrario, la situazione è la stessa di un gradiente lineare.
Strumenti:
- gradients.glrzad.com produce codice cross-browser, puoi creare molte transizioni di colore
- www.colorzilla.com/gradient-editor è il generatore più stravagante di sempre. Puoi creare gradienti lineari e circolari, puoi scegliere il formato di registrazione dei colori, molti gradienti già pronti.
- lea.verou.me/css3patterns galleria di modelli CSS3. Puoi vedere il codice di ogni modello.
Sfondi multipli
Questa è la capacità di assegnare più immagini di sfondo a un elemento contemporaneamente.div (
sfondo: url(fallback.png) no-repeat 0 0;
sfondo: url(foreground.png) no-repeat 0 0, url(middle-ground.png) no-repeat 0 0, url(background.png) no-repeat 0 0; /* Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ */
}
Non dimenticare i browser che non supportano più sfondi.L'ordine degli sfondi è il seguente: dall'alto verso il basso, cioè lo sfondo più in basso deve essere scritto alla fine. Invece di immagini di sfondo Puoi anche scrivere gradienti CSS3.
raggio di confine
Angoli arrotondati sul blocco. È semplice se hai bisogno dello stesso raggio di curvatura.Div(
-webkit-raggio-bordo : 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
-moz-raggio-bordo : 12px; /* Firefox 1-3.6 */
raggio di confine : 12px; /* Opera 10.5+, IE 9+, Safari 5, Chrome, Firefox 4+, iOS 4+, Android 2.1+ */
}
Tutti i produttori hanno già abbandonato i prefissi dei fornitori in ultime versioni browser.
Ma se angoli diversi devono avere raggi diversi, è necessario elencare i raggi per ogni angolo.
Firefox ha una stranezza che enumera gli angoli usando una sintassi non standard. Ma la soluzione potrebbe essere quella di utilizzare una sintassi abbreviata che è la stessa per i browser.
div (
-moz-raggio-bordo: 15px 30px 45px 60px;
-webkit-border-radius : 15px 30px 45px 60px;
raggio di confine: 15px 30px 45px 60px;
}
Una caratteristica interessante è quella di passare coppie di valori di raggio per ogni angolo. In questo modo puoi ottenere di più forme complesse oltre al semplice arrotondamento:
Div(
bordo-alto-sinistra-raggio : 5px 30px;
bordo-alto-destra-raggio : 30px 60px;
bordo-basso-raggio-sinistra : 80px 40px;
bordo-basso-destra-raggio : 40px 100px;
}
Se sono tutti uguali:
Div(
raggio di confine: 8px / 13px
}
Strumenti:
Upd Per chi vuole automatizzare il processo di creazione dei prefissi, .
gradiente radiale si estende dal punto centrale del gradiente in tutte le direzioni sotto forma di cerchio o ellisse (forma di default), dimostrando transizione graduale da una tonalità di colore all'altra. Un gradiente radiale viene creato utilizzando la funzione radial-gradient(). La funzione crea un'immagine che è una sfumatura radiale tra le sfumature di colori specificate. Per impostazione predefinita, la dimensione del gradiente corrisponde alla dimensione dell'elemento a cui è applicato.
La funzione radial-gradient() accetta i seguenti argomenti separati da virgole:
- Specificare le parole chiave e/o le unità come primo argomento Dimensioni CSS, definendo la forma finale, le dimensioni e posizione iniziale pendenza. Argomento facoltativo.
- Un elenco separato da virgole di due o più colori, ciascuno dei quali può essere seguito da una posizione di arresto.
Il gradiente radiale più semplice richiede solo due argomenti che specificano un colore iniziale e finale:
Div ( immagine di sfondo: gradiente radiale(ciano, indaco); larghezza: 400px; altezza: 100px; ) Prova »
Come per le sfumature lineari, una sfumatura radiale può includere un elenco di più di due colori e qualsiasi colore può avere una posizione di arresto.
Div ( larghezza: 400px; altezza: 100px; margine: 10px; ) #one ( immagine di sfondo: gradiente radiale(ciano, giallo, indaco, bianco); ) #due (immagine di sfondo: sfumatura radiale(ciano, giallo 10%, indaco 30%, bianco 50%); ) Prova »
La forma di un gradiente radiale può essere definita con parole chiave circle (cerchio) ed ellisse (ellisse), specificandone uno come primo argomento:
Div ( width: 400px; height: 100px; margin: 10px; ) #one ( background-image: radial-gradient(ellipse, cyan, indigo); ) #two ( background-image: radial-gradient(circle, cyan, indigo); ); ) Provare "
Per impostazione predefinita, il browser posiziona il punto centrale del gradiente radiale al centro dell'elemento. Il centro del gradiente può essere posizionato utilizzando la parola chiave at seguita dalle parole chiave (in alto, a sinistra, a destra, in basso, al centro) o dai valori nelle unità CSS specificate:
| Significato | Descrizione |
|---|---|
| in alto a sinistra centro sinistro in basso a sinistra in alto a destra centro destro in basso a destra centro in alto centro centro centro in basso | Se specifichi una sola parola chiave, la seconda sarà "centro". |
| x%y% | Il primo valore è la posizione orizzontale, il secondo valore è la posizione verticale. L'angolo in alto a sinistra è la posizione 0% 0%. L'angolo in basso a destra è la posizione 100% 100%. Se si specifica un solo valore, l'altro valore sarà 50%. |
| x-pos y-pos | Il primo valore è la posizione orizzontale, il secondo è la posizione verticale. L'angolo in alto a sinistra è la posizione 0 0. Le unità possono essere pixel (0px 0px) o altro unità CSS misurazioni. Se si specifica un solo valore, l'altro valore sarà 50%. Puoi combinare % e unità. |
Il posizionamento del gradiente viene specificato prima dei valori della tonalità, ma dopo la parola chiave della forma del gradiente (se presente):
Div ( width: 400px; height: 100px; margin: 10px; ) #one ( background-image: radial-gradient(at right, cyan, indigo); ) #two ( background-image: radial-gradient(circle at 300px 50px); , ciano, indaco, giallo); ) #tre ( immagine di sfondo: gradiente radiale(cerchio in alto a sinistra, ciano, indaco, giallo); ) Prova »
La dimensione del gradiente (quanto dovrebbe essere grande la forma finale del gradiente) può essere specificata utilizzando una delle quattro frasi chiave o specificando il raggio utilizzando le unità CSS (le percentuali non possono essere utilizzate per definire il raggio).
| Parole chiave | Descrizione | |
|---|---|---|
| La dimensione finale della sfumatura dipende dalla distanza tra il centro della sfumatura e il lato dell'elemento più vicino (per un cerchio), oppure dalla distanza tra il centro e i due lati dell'elemento più vicino (per un'ellisse). | ||
| La dimensione finale del gradiente dipende dalla distanza tra il centro del gradiente e l'angolo più vicino dell'elemento. |
 |
|
| La dimensione finale del gradiente dipende dalla distanza tra il centro del gradiente e il lato dell'elemento più lontano da esso (per un cerchio) o dalla distanza tra il centro del gradiente e i due lati più lontani da esso (per un'ellisse ). |
 |
|
| La dimensione finale del gradiente dipende dalla distanza tra il centro del gradiente e l'angolo dell'elemento più lontano da esso. Utilizzato per impostazione predefinita per una forma circolare o ellittica. |
 |
Le parole chiave che definiscono la dimensione del gradiente o del raggio sono specificate prima o dopo la parola chiave che definisce la forma e sempre prima della posizione.
Div ( width: 400px; height: 100px; margin: 10px; ) #one ( background-image: radial-gradient(cerchio-angolo più vicino a 100px, cyan 50%, indigo); ) #two ( background-image: radial- gradiente(cerchio lato più vicino, ciano, rosso, indaco); ) #tre ( immagine di sfondo: gradiente radiale(cerchio da 100px a 200px, ciano 50%, indaco); ) #quattro (immagine di sfondo: gradiente radiale( 170px 50px ellisse a 175px, ciano, #90EE90, rgba(172,160,160,0)); )
un! Gradient è un ottimo strumento di manipolazione del colore CSS3. Invece di utilizzare un'immagine per creare un effetto sfumato su una pagina Web, sarebbe più vantaggioso utilizzarla Gradiente CSS3 e quindi "facilitare" il sito. Poiché l'utente non dovrà dedicare tempo e traffico al download immagine di sfondo. Esistono due tipi principali di gradiente: radiale e lineare. Il post di oggi parla di loro.
gradiente lineare
Come dice la classificazione, gradienti in css3 sono immagini. Non ci sono proprietà speciali per loro. E per la dichiarazione viene utilizzata la proprietà dell'immagine di sfondo.
IN caso generale la sintassi del gradiente (lineare) è simile a questa:
1 | div ( |
Quindi, parliamo di tutto in ordine.
Prima di tutto, il gradiente lineare è dichiarato dalla funzione linear-gradient(). La funzione ha tre significati principali. Il primo valore definisce posizione iniziale. L'esempio specifica top cioè prima posizione. Puoi anche usare in basso, a sinistra ea destra;
Se l'angolo è negativo, la posizione cambierà dall'angolo inferiore sinistro a quello superiore sinistro.
Il secondo valore della funzione è colore iniziale e la sua posizione di arresto, indicata in percentuale. Dichiarando questa posizione è facoltativa, il browser imposterà il primo colore su 0% per impostazione predefinita.
L'ultimo valore è il secondo colore e la sua posizione di arresto. L'impostazione predefinita è 100%. Questi valori estremi e significano che il primo colore inizia subito a spostarsi nel secondo. Tuttavia, se impostiamo il primo colore su 50% , inizierà a spostarsi nel secondo solo dalla metà dell'altezza disponibile. Ecco come appare il codice:
Otteniamo strisce della stessa altezza. Con un bordo chiaro, non ci sarà alcuna transizione di colore. Per capire meglio come funziona, sperimenta i valori.
Un gradiente radiale è proprio come uno lineare, ma è dichiarato da una funzione, solo radial-gradient() . Ci sono anche dei valori di base: questa è la forma del gradiente radiale (il cerchio è un cerchio o l'ellisse è un'ellisse), il colore iniziale e finale. La sintassi è la seguente:
div ( |
Se non specifichi una forma, l'ellisse verrà impostata per impostazione predefinita.
Inoltre, la posizione centrale del gradiente è impostata per impostazione predefinita e può essere modificata. La posizione può essere impostata con i comandi (top , bottom , left , right e center ), così come le loro combinazioni, o specificata in percentuali o pixel.
Combinazioni di comandi:
- In alto al centro - in alto - 50% 0%;
- Sulla sinistra angolo superiore- in alto a sinistra - 0% 0%;
- Nell'angolo in alto a destra - in alto a destra - 100% 0%;
- Centro - centro - 50% 50%;
- Centro sinistro - centro sinistro - 0% 50%;
- Centro destro - centro destro - 100% 50%;
- In basso al centro - in basso - 50% 100%;
- Nell'angolo in basso a sinistra - in basso a sinistra - 0% 100%;
- Nell'angolo in basso a destra - in basso a destra - 100% 100%.
Ecco un esempio con le percentuali:
div ( |
Valore del primo asse X secondo a In.
Puoi anche impostare la dimensione del gradiente radiale. La dimensione è specificata con uno spazio dopo la forma del gradiente. L'impostazione predefinita è applicata l'angolo più lontano(all'angolo più lontano). Il calcolo viene effettuato dal punto centrale della pendenza a:
Per capire meglio questo, diamo un'occhiata a un esempio. Un gradiente di forma ellittica con inizio bianco e fine blu:
div ( |
La dimensione è calcolata dalla distanza ai lati più vicini, è ovvio che quello superiore è più vicino lungo l'asse Y e asse sinistro X.
E ora ai lati più lontani:
div ( |
Il risultato, come si dice sul viso. La dimensione è calcolata dalla distanza ai lati più lontani.
In un gradiente radiale e lineare, è possibile applicare posizioni di arresto al colore. Vorrei anche notare che se è necessario ottenere la trasparenza dei colori, è necessario utilizzare rgba.
div ( |
Il canale alfa, che è l'ultimo e uguale a 0,2, indica che viene utilizzato solo il 20% del colore al 100%.
In entrambi i tipi Gradiente CSS3 puoi usare non due, ma diversi colori.
div ( |
Per entrambe le viste, è possibile utilizzare la ripetizione del colore. Cioè, un ciclo è formato da questi valori. Ripetizione delle funzioni di gradiente, repeating-linear-gradient() per lineare e repeating-radial-gradient() per radiale.
div ( |
0% , #FFAE00 100% ); /* per Firefox */
immagine di sfondo: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* per IE 10+ */
background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* per Opera */
immagine di sfondo: gradiente lineare (in alto, #FF5A00 0%, #FFAE00 100%); /* sintassi standard */
}
div (
filtro: progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 );
}
Dove 33 subito dopo il cancelletto è la percentuale di saturazione del colore.
Spero che l'articolo ti sia stato utile e che l'argomento discusso sia completamente divulgato.
Per rimanere aggiornato con gli ultimi articoli e lezioni, iscriviti
Il valore di -moz-radial-gradient
Indica un gradiente radiale (circolare). Si applica a , .
Sintassi
-moz-radiale-gradiente([
Valori usati
|
Osservazioni
Una sfumatura è una combinazione di due o più colori dati che si fondono uniformemente l'uno nell'altro. IN css i gradienti vengono utilizzati al posto di qualsiasi immagine, come indicatore di caricamento, per migliorare la percezione di una pagina Web durante il ridimensionamento, ecc. Mozilla Firefox supporta due tipi di gradienti: lineare e radiale.
Mozilla Firefox supporta correttamente i gradienti solo come valori per la proprietà, ma anche per . Puoi impostare un valore per il gradiente invece dell'URL di un'immagine.
Gradiente radiale o circolare, specificato con -moz-radiale-gradiente si propaga anche lungo l'asse. Può essere rappresentato come una sequenza di cerchi posti lungo un asse, ognuno dei quali ha un punto di riferimento (centro) e una lunghezza del raggio. Il gradiente radiale si presenta così:
Immagine di sfondo: -moz-radial-gradient (centro 45 gradi, cerchio lato più vicino, arancione 0%, rosso 100%);
-moz-radiale-gradiente non supporta la ripetizione dei gradienti. Per impostazione predefinita, il gradiente si estende per riempire l'intero elemento a cui è applicato. Dai un'occhiata a questo articolo per imparare come creare un gradiente circolare ripetuto.
Esempi
Gli esempi mostrano come vengono descritti i gradienti radiali -moz-radiale-gradiente
Sfondo: -moz-radial-gradient(45px 45px 45deg, circle cover, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
Risultato dell'esecuzione dell'esempio:
Sfondo: -moz-radial-gradient(45px 45px, ellisse all'angolo più lontano, acqua 0%, rgba(0, 0, 255, 0) 100%, blu 95%); nessuna ripetizione;
Risultato dell'esecuzione dell'esempio:
Sfondo: -moz-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);
Per non cercare frammenti di informazioni in Internet, è meglio raccogliere tutto in un unico posto. Oggi ne parleremo Gradienti CSS3- una caratteristica necessaria, spesso utilizzata e, ovviamente, utile nello sviluppo e nel layout. C'era il desiderio di fare un articolo enciclopedico, ma come si è scoperto spetta a te giudicare.
“Il gradiente è un tipo di riempimento nella computer grafica, in cui è necessario impostare il colore e la trasparenza di determinati punti (chiave) e il colore e la trasparenza dei punti rimanenti vengono calcolati rispetto ad essi utilizzando determinati algoritmi matematici. Pertanto, puoi ottenere transizioni fluide da un colore all'altro impostando le coordinate e il colore dei punti iniziale e finale. Wikipedia
A proposito, per coloro che stanno appena iniziando a imparare i CSS - un meraviglioso articolo di Natalia Mitrofanova - Come usare i CSS. A tutti i nuovi arrivati altamente raccomandato familiarizzare. Accessibile, comprensibile - in generale, eccellente
Ma torniamo all'argomento dell'articolo. Ci sono due tipi di gradienti in CSS3: lineare e radiale. Considera ogni tipo in modo più dettagliato per comprendere le specifiche del loro utilizzo.
Gradiente lineare CSS3
Un gradiente lineare è quello in cui un colore passa proporzionalmente tra due punti in una linea retta. Il modo più semplice è con un esempio:
Div (/*-prefix-linear-gradient(start-color, end-color);*/ background: -moz-linear-gradient(#FFF, #000); background: -ms-linear-gradient(#FFF, #000); sfondo: -o-linear-gradient(#FFF, #000); background: -webkit-linear-gradient(#FFF, #000); )
Esempio elementareè un gradiente lineare che inizia con il bianco e finisce con il nero. Prefisso fornitore - richiesto il questo momento, unico standard no, poiché i gradienti sono ancora una funzionalità sperimentale nonostante siano supportati da tutti i browser.
Andiamo avanti e guardiamo di più esempio complesso— cambiare la direzione del gradiente. Viene chiamata la direzione nella sintassi punto e richiede due valori: da dove e dove. Ci sono cinque valori in totale: superiore, parte inferiore, sinistra, Giusto e centro. Di conseguenza, nella scrittura della regia devono essere usati due significati. Il primo è "da dove", il secondo è "dove". Ma c'è una piccola sottigliezza - se viene specificata solo una posizione - la seconda sarà predefinita centro. Tienine conto nei tuoi progetti.
Nell'esempio sopra, la direzione del gradiente non è specificata, quindi la direzione viene scelta per impostazione predefinita. in alto al centro.
Div ( background: linear-gradient(top, #FFF, #000); ) div ( background: linear-gradient(top, #FFF, #000); )
Queste voci sono, infatti, simili all'esempio precedente, ma per semplicità e riduzione delle dimensioni, la direzione viene solitamente omessa in questo caso, in quanto non necessaria.
In alternativa alla direzione, ma piuttosto come addizione, puoi utilizzare gli angoli nel record, il cui valore può essere impostato in diversi valori, inclusi gradi, radianti e altre cose geometriche. Ma per semplicità è meglio usare i gradi, quindi sarà chiaro a tutti. La graduazione è in senso orario: 0 o 360 è la parte superiore, 90 è la destra, 180 è la parte inferiore e 270 è la sinistra. La registrazione con un segno meno è accettabile: in questo caso, la graduazione va in senso antiorario.
Considera alcuni esempi per comprendere il processo:
Ex1 ( sfondo: gradiente lineare(sinistra, #FFF, #000); ) ex2 ( sfondo: gradiente lineare(destra, #FFF, #000); ) ex3 ( sfondo: gradiente lineare(225deg, #FFF, # 000); )
La prima opzione è da sinistra a destra, la seconda da destra a sinistra, la terza è 225 gradi. I gradi ti consentono di dirigere il gradiente in modo più preciso, cosa che non può essere raggiunta con le parole.
Prossimo punto interessante quando si lavora con i gradienti -
Aggiunta di un colore di arresto
Finora abbiamo utilizzato solo semplici gradienti costituiti da due colori. Ora prendiamo un esempio più complicato: aggiungi un altro colore al gradiente. Più o meno così:
Div (sfondo: gradiente lineare(sinistra,#000,#FFF,#000);)
Questo esempio aggiunge Colore bianco tra due neri. Il risultato è un gradiente che va dal nero al bianco e viceversa lo stato iniziale- annerire. Più lavoro visivo Mostrerò i colori di stop in diversi esempi:
Ex1 (sfondo: gradiente lineare(sinistra,#000,#FFF,#000);) ex2 (sfondo: gradiente lineare(sinistra,#000,#FFF 75%,#000);) ex3 (sfondo: lineare- gradiente(fondo,#000,#FFF 20px,#000);) ex4 (sfondo: gradiente lineare(45deg,#000,#FFF,#000,#FFF,#000);)
Risultato nella foto:
Nel primo esempio, esattamente ciò che è stato menzionato sopra: il bianco è esattamente tra due neri (dannazione, quanto si è rivelato politicamente scorretto).
Il secondo esempio è lo stesso, indica solo dove verrà posizionato il colore della fermata. IN questo caso- 75% dall'inizio. La sintassi è semplice - mostra l'esempio. Dopo il valore del colore, specificare la posizione in percentuale. Non sono necessarie virgole.
Il terzo esempio mostra che il valore della posizione di stop colore può essere specificato non solo in percentuali, ma anche in pixel (così come in tutte le altre unità che CSS comprende, ma vengono utilizzate principalmente percentuali e pixel)
Quarto: cinque stop di colore, direzione cambiata. Tutto è abbastanza semplice.
Gradiente radiale CSS3
In effetti, è molto più interessante lavorarci che con un gradiente lineare. Ma, sfortunatamente, non è sempre possibile inserirlo nel design. Un gradiente radiale è un gradiente che si estende da un punto al centro lungo un cerchio.
E (sfondo: gradiente radiale(posizione o angolo, forma o dimensione, da-stop, stop-color, to-stop);)
La sintassi è quasi la stessa, con una differenza: la forma e la dimensione sono state aggiunte. La forma è di due tipi: ellisse e cerchio (ellisse e cerchio, rispettivamente, il valore predefinito: ellisse). Il valore della dimensione può assumere uno di sei valori. Su di loro di seguito.
La sintassi più semplice è questa:
Div (sfondo: gradiente radiale(#FFF,#000);)
I gradienti radiali devono essere specificati con il prefisso del fornitore del browser:
Div ( background: -moz-radial-gradient(#FFF, #000); background: -ms-radial-gradient(#FFF, #000); background: -webkit-radial-gradient(#FFF, #000); )
Il risultato dell'esecuzione del codice è nell'immagine:
Diamo un'occhiata a un codice più complicato:
Div ( sfondo: gradiente radiale(contiene cerchio, #FFF, #000); )
Si noti che nell'esempio ci sono due selettori sopra menzionati: forma e dimensione (posizione). È difficile nominare la dimensione del valore del selettore, piuttosto è la posizione. Ma nella documentazione ufficiale, questo selettore è designato come taglia, quindi la chiameremo dimensione. cerchio- significa solo che il gradiente sarà rotondo, non ellittico. contenere- una delle parole chiave che il selettore della dimensione può accettare. Descriverò ciascuno di essi per renderlo più chiaro:
- lato più vicino- Lato vicino. Il gradiente si estende dal centro verso il lato più vicino dell'elemento (per cerchio), o su entrambi i lati, orizzontale e verticale (per ellisse).
- l'angolo più vicino- Angolo più vicino. La dimensione del gradiente è tale da estendersi dal centro all'angolo più vicino dell'elemento.
- lato più lontano- Lato più lontano. Il gradiente si estende dal centro verso il lato più esterno dell'elemento (per cerchio), o su entrambi i lati orizzontale e verticale (per ellisse).
- l'angolo più lontano- L'angolo più lontano. La dimensione del gradiente è tale da estendersi dal centro all'angolo più lontano dell'elemento.
- contenere- allo stesso modo lato più vicino.
- copertina- allo stesso modo l'angolo più lontano.
Alcuni esempi per illustrare:
Ex1 ( sfondo: gradiente radiale (cerchio lato più lontano, #000, #FFF); ) ex2 ( sfondo: gradiente radiale (sinistra, cerchio lato più lontano, #000, #FFF); ) ex3 ( sfondo: radiale gradiente(in alto a destra,coperchio cerchio,#FFF,#000); ) ex4 (sfondo: gradiente radiale(80% 50%,cerchio lato più vicino,#FFF,#000); )
Risultato dell'esecuzione di ogni codice:
Il primo esempio è un gradiente circolare che si estende fino al lato opposto (usando lato più lontano)
Secondo: il centro è a sinistra, la pendenza è estesa fino al lato opposto.
Il terzo è in alto a destra al centro, sfumato fino all'angolo più lontano.
Quarto: il centro si trova in un punto, il 50% in larghezza, l'80% in altezza e una pendenza rotonda verso il lato più vicino.
Aggiunta di un colore di arresto
Come i gradienti lineari, anche quelli radiali possono funzionare con più colori. La loro applicazione non è diversa da quelle lineari, quindi non descriverò, farò solo alcuni esempi:
Ex1 ( sfondo: gradiente radiale(cerchio lato più lontano,#000,#FFF,#000); ) ex2 ( sfondo: gradiente radiale(cerchio lato più lontano,#000,#FFF 25%,#000); ) ex3 ( sfondo: gradiente radiale (sinistra, cerchio lato più lontano, #FFF, # 000 25%, # FFF 75%, # 000); ) ex4 ( sfondo: gradiente radiale (40% 50%, cerchio lato più vicino ,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); )
Puoi vedere tutto dal codice, sei già esperto di designer di gradienti
È tutto per oggi. L'articolo si è rivelato indecentemente enorme. Grazie a tutti coloro che hanno letto fino a questo punto. Retweet e qualsiasi socialismo sono solo i benvenuti. Buona giornata
