Share
Le sfumature stanno subendo un subdolo ritorno. Per un po 'appartennero al mondo di Miami Vice e Tequila Sunrise, poi aggiunsero profondità alle riviste del 1980, poi ci fu Geocities-ok, non soffermiamoci sul passato.
Al giorno d'oggi i gradienti vengono utilizzati in modo audace sul web; mescolando colori altamente saturi per effetti estremamente ricchi (anche se non è per tutti i gusti).
Sembra che tutti stiano usando un gradiente diagonale come nel 1995. Lo stesso a quello (L: Stripe, R: Google). pic.twitter.com/j3cXyWo9tq
- Eli Schiff (@eli_schiff), 24 novembre 2015
Diamo un'occhiata ad alcuni esempi che ho scoperto di recente e vediamo se possiamo trarre ispirazione da loro.
Non sarai sorpreso di vedere Spotify in questa lista. La loro grafica negli ultimi sei mesi è stata riempita con immagini a due tonalità e gradienti ricchi, che si sono conclusi con la loro funzione Year in Music.
Combinato con un tipo forte, il marchio visivo di Spotify non ti tocca solo sulla spalla in questo momento, ti tiene la testa contro l'amplificatore e alza il volume.
Atomic ha utilizzato un approccio simile con la loro recente retrospettiva sugli articoli di design del 2015.
Qui, il viola e il fucsia (angolati a 45 gradi) danno una bella profondità isometrica e rendono un vero spettacolo della pagina.
realfuturefair.com usa una gamma cromatica altrettanto spettacolare, sempre con un angolo diagonale, con a grafica ad onda generata:
Il mio ex collega Jeffrey Way è andato in orizzontale, usando un viola sottile all'indaco su laracasts.com:
I commenti utilizzano un'estetica meno retrò, optando invece per posizionare un'immagine gradiente semi-opaca sullo sfondo della pagina principale:
Questo potrebbe essere stato fatto con più risorse - l'immagine extra aggiunge un'altra richiesta http e 75kb alla pagina - ma è un effetto elegante.
Web conference Web Afternoon usa un gradiente blu-viola ricorrente sulla loro pagina, che è particolarmente efficace come i bordi dei pulsanti:
Passa il mouse sopra il link e l'intero sfondo adotta il gradiente. Quindi come va? Dopo alcuni stili di base, al bordo del pulsante viene assegnato un gradiente lineare con il border-immagine proprietà. Questo ci consente effettivamente di trasmettere un'immagine sul bordo, invece di fare affidamento sul tratto normale, sebbene sia possibile dichiarare proprietà del bordo standard primo per lasciare un ripiego se l'immagine del bordo non è supportata.
Quindi noterai che la proprietà border-image è seguita da border-image-slice: 1;. Questo determina dove viene affettata l'immagine di sfondo, in modo che si ridimensiona con l'elemento. Il valore 1 prende il primo pixel lungo la sinistra, la parte superiore, la destra e la parte inferiore della nostra "immagine" del gradiente e associa tali sezioni alle otto regioni del bordo. Ulteriori informazioni sull'affettatura su MDN.
Quindi, per lo stato di passaggio del mouse, lo stesso gradiente viene applicato al riempimento dello sfondo. Eccolo in azione:
Finora abbiamo coperto sfumature uniformi; due o più colori che fluiscono l'uno nell'altro lungo una transizione perfetta. I CSS rendono questo processo relativamente semplice e mantenibile al giorno d'oggi. Ma i gradienti possono anche essere dati carattere sotto forma di texture:
Su worldseasiestdecision.org questa texture di disegno grezzo viene utilizzata per conferire ai loro gradienti maggiore personalità. Bel lavoro.
Anche www.viens-la.com usa le immagini (al contrario dei CSS) per consentire ai loro gradienti un po 'di personalità:
Un gradiente simile può essere visto ripetuto nei dettagli in tutto il loro sito:
Le sfumature non si limitano solo agli sfondi e ai bordi, ma possono anche aggiungere un elemento di interesse alla tipografia:
Qui Pierre Georges usa una sfumatura sullo sfondo del blocco di paragrafo "Bonjour", quindi usa il background-clip di proprietà per limitare il dipinto area al testo. -webkit-text-fill-color: trasparente; quindi rende il testo reale trasparente, quindi il gradiente è visibile da sotto.
Ecco come appare la sintassi (webkit):
p background-image: -webkit-gradient (lineare, in alto a sinistra, in alto a destra, color-stop (0, # f24a70), color-stop (0.5, # c557d8), color-stop (0.99, # f24a70)); -webkit-background-clip: testo; -webkit-text-fill-color: trasparente;
Hai bisogno di qualche altra ispirazione? Scopri questi file disponibili su Envato Market:
Gradiente - Tema Tumblr
RedRice - WordPress One-Page Tema multiuso
QuickEvents - Pagina di destinazione di Unbounce reattivo
Colormuse - Un modello di Muse del portfolio di pagine
Accentsconagua