Share
In questo tutorial imparerai a usare i gradienti sul web. Ti fornirò alcuni esempi, alcuni esercizi (come la creazione di sfumature per i bordi) e fornirò anche alcune risorse utili che renderanno la creazione di sfumature molto più semplice.
In passato non era davvero possibile usare i gradienti senza fare affidamento sulle immagini, ma gli sviluppi nei CSS significano che ora è semplice e affidabile creare sfumature dai nostri fogli di stile.
Nella loro forma più semplice, definiamo i gradienti come immagini di sfondo. Impostiamo l'immagine di sfondo (semplicemente usando la stenografia sfondo va assolutamente bene) come a lineare gradiente o a radiale gradiente, quindi passiamo nei colori iniziale e finale:
.box background: gradient-linear (# 000046, # 1cb5e0);
Di default un gradiente lineare va dall'alto verso il basso, dandoci qualcosa di simile a questo:
Possiamo cambiare direzione aggiungendo un nuovo parametro prima dei colori, ad esempio:
.box background: linear-gradient (a destra, # 000046, # 1cb5e0);
Allo stesso modo, modifica questo parametro per leggere in alto a destra creerebbe un gradiente diagonale. Puoi fare anche quella diagonale, specificando qualcosa di simile 45 gradi (o qualunque angolo tu scelga).
Facendo un passo in più, non è necessario fermarsi a soli due colori. E puoi anche usare nomi di colori, come questo:
.riquadro sfondo: gradiente lineare (a destra, arancione, # ec38bc, # 7303c0, ciano);
In questo caso ognuno dei quattro colori occuperà una quantità uguale di spazio disponibile, dandoci un gradiente uniforme e bilanciato.
Se non vogliamo una distribuzione uniforme, ma vogliamo che un colore occupi più spazio di un altro, possiamo specificare quel valore come percentuale direttamente dopo il colore in questo modo:
.box background: linear-gradient (a destra, # f05053 80%, # e1eec3);
Dandoci:
Andando avanti, possiamo utilizzare tutto ciò che abbiamo imparato finora e modificarlo per la visualizzazione radiale gradienti invece. Spegnimento lineare gradiente per radiale gradiente è tutto ciò che devi fare qui.
.box background: radial-gradient (# fdbb2d, # 22c1c3);
Questo gradiente radiale si estende al suo elemento genitore, quindi questo rettangolo termina con una sfumatura ellittica. Per vincolare quel gradiente in modo che rimanga un cerchio indipendentemente dalle proporzioni del genitore, possiamo aggiungere il cerchio parola chiave in questo modo:
.box background: radial-gradient (circle, # fdbb2d, # 22c1c3);
Andando ancora oltre, possiamo specificare anche la sorgente del gradiente del cerchio, in modo che inizi (per esempio) nella parte in alto a sinistra del genitore.
.box background: radial-gradient (cerchio in alto a sinistra, # fdbb2d, # 22c1c3);
L'effetto è sottile, ma la differenza tra questo e un semplice gradiente lineare potrebbe essere proprio quello che stai cercando.
Dove potremmo usare i gradienti in alcuni modi interessanti?
Ecco un esempio di sovrapposizione, in cui il gradiente è leggermente trasparente (utilizza RGBA valori) e si siede su una foto.
Il sfondo la proprietà può accettare diversi valori che formano una pila, la prima è l'ultima e l'ultima trovata stessa nella parte inferiore della pila. Se prima definiamo un gradiente, questo si posizionerà sopra a ciò che definiamo in seguito. Dai un'occhiata a questo frammento e vedi se riesci a capire cosa sta succedendo:
.hero background: linear-gradient (a destra, rgba (75, 123, 211, 0.5), rgba (22, 215, 177, 0.3)), url (https: //bg.jpg);
Ecco l'effetto risultante:
Avere un gradiente sul testo è un grande effetto, anche se non completamente supportato in senso puro. Invece, contiamo sul background-clip di proprietà (e il suo prefisso -webkit-background-clip amico), che è qualcosa di un hack ma funziona molto bene.
Iniziamo con una porzione di testo (a h1 in questo caso) e applicare un gradiente al suo sfondo. Il background-clip di proprietà, dato un valore di testo, quindi rimuove lo sfondo dall'intero blocco tranne l'area dietro il testo. Il testo colore oscura naturalmente lo sfondo, quindi ce la facciamo trasparente per far trasparire il gradiente:
h1 background-image: linear-gradient (a destra, # 0cebeb, # 20e3b2, # 29ffc6); -webkit-background-clip: testo; clip di sfondo: testo; colore: trasparente;
I gradienti dei bordi sono qualcosa che potresti aver visto su Envato Elements e sono un ottimo modo per rendere visivamente l'interfaccia utente. È fatto sottilmente, ma dai un'occhiata al gradiente lineare blu-viola sui bordi di questi pulsanti:
Per ottenere questo effetto ci sono un paio di approcci. Il primo si affida a noi prima dando un elemento (un'ancora, un contenitore, qualunque) un bordo trasparente. Applichiamo quindi il nostro gradiente usando il border-immagine proprietà. Finalmente, abbiamo impostato border-image-slice a 1, in modo che il gradiente utilizzi il profilo completo del bordo.
.card1 border: 5px solid transparent; border-image: linear-gradient (in basso, # 22c1c3, # fdbb2d); border-image-slice: 1;
Ecco il risultato:
Ci sono un paio di problemi con questo approccio, comunque. in primo luogo, border-immagine non è universalmente supportato in tutti i browser, in particolare le versioni precedenti di IE. In secondo luogo, questo approccio non ti consentirà di aggiungere border-radius come vedete nell'interfaccia utente di Envato Elements. Diamo un'occhiata a un approccio alternativo.
Iniziamo dando il nostro div a posizione: relativa. Quindi aggiungiamo uno pseudo-elemento, dandogli quello a negativo posizione assoluta di ciò che abbiamo scelto come larghezza del bordo (5px in questo caso):
.card2 :: after content: "; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px;
Questo ci darà un solido gradiente che copre tutto il nostro div. Aggiungere un z-index di -1 farà in modo che il blocco del gradiente si sposti dietro il div.
Avanti (beh, ci sono molti passaggi per questo) aggiungiamo a border-radius allo pseudo-elemento uguale a quello del suo genitore (applichiamo 10px ciascuno). E poi diamo al genitore uno sfondo di ciò che vogliamo; lo stesso dello sfondo della pagina lo renderà trasparente.
Alla fine, ci rivolgiamo ancora una volta al nostro amico background-clip di, applicandolo al genitore e questa volta dandogli un valore di padding-box. Quest'ultima azione fa in modo che il riempimento del div scenda fino al bordo del confine e non oltre.
Quindi questo approccio finale non è in realtà un confine nel vero senso della parola, ma raggiunge l'effetto che stiamo cercando.
Un terzo approccio è possibile, questa volta usando box-ombra per ottenere l'effetto. Vi consiglio di dare un'occhiata al mix di sfumature di bordo di John Grishin su CodePen per vedere come funziona.
Quindi eccoti! Questo primer sui gradienti CSS ti ha dato l'inizio di cui hai bisogno, oltre a uno sguardo su come utilizzare i gradienti sul web. Se hai visto altri usi creativi delle sfumature in natura, ti preghiamo di lasciarli nella sezione dei commenti.
Accentsconagua