Good Golly, Gradienți peste tot pe Web

Gradienții fac o revenire mascată. Pentru o vreme au aparținut lumii Miami Vice și Tequila Sunrise, apoi au adus adâncime la revistele din 1980, apoi a existat Geocities-ok, să nu ne referim la trecut.

În zilele noastre, gradientele sunt folosite pe web în mod cutez; amestecând culori foarte saturate pentru efecte extrem de bogate (deși nu este gustul tuturor).

Se pare că toată lumea folosește din nou un gradient diagonal ca și anul 1995. Același la acel (L: Stripe, R: Google). pic.twitter.com/j3cXyWo9tq

- Eli Schiff (@eli_schiff) 24 noiembrie 2015

Să aruncăm o privire asupra câtorva exemple pe care le-am întâlnit recent și să văd dacă putem să le inspirăm.

Nu veți fi surprins să vedeți Spotify în această listă. Grafica lor în ultimele șase luni a fost umpluta cu imagini duotone și gradiente bogate, încheindu-se cu caracteristica Year in Music.

Combinată cu un tip puternic, marca vizibilă a Spotify nu vă atinge doar pe umăr în acest moment, ci vă ține capul în fața amplificatorului și vă mută volumul.

Atomic a folosit o abordare similară cu retrospectiva recentă a articolelor de design din 2015.

Aici, violet și fuchsia (înclinate la 45 de grade) dau o adâncime izometrică minunată și fac un adevărat spectacol al paginii.

realfuturefair.com utilizează o gamă de culori la fel de spectaculoasă, din nou la un unghi diagonal, cu un generat graficul valurilor:

Fostul meu coleg Jeffrey Way a plecat orizontal, folosind un subtil violet la indigo pe laracasts.com:

Comentariul utilizează o estetică mai puțin retro, în schimb optează pentru a plasa o imagine gradient semi-opacă pe fondul paginii principale:

Acest lucru ar fi putut fi realizat mai mult - imaginea suplimentară adaugă o altă solicitare http și 75kb pe pagină - dar este un efect elegant.

Gradienți și granițe

Conferința Web Web Afternoon utilizează un gradient recurent de la albastru la purpuriu pe pagina lor, ceea ce este deosebit de eficient ca marginile butoanelor:

Plasați cursorul peste link și întregul fundal adoptă un gradient. Deci cum se face asta? După câteva stiluri de bază, marginea butonului este dată cu un gradient liniar cu border-image proprietate. Acest lucru ne permite în mod eficient să aruncăm o imagine la graniță, în loc să ne bazăm pe cursa obișnuită, deși puteți declara proprietățile standard ale graniței primul pentru a lăsa o cădere înapoi dacă imaginea de pe margine nu este suportată.

Veți observa apoi că este urmată proprietatea imaginii de frontieră Frontieră-imagine-felie: 1;. Acest lucru determină locul în care imaginea de fundal este tăiată, pentru ca aceasta să fie scalată cu elementul. Valoarea 1 ia primul pixel de-a lungul stânga, partea de sus, dreapta și partea de jos a imaginii "gradientului" nostru și cartografiază acele felii în cele opt regiuni ale frontierei. Citiți mai multe despre felierea pe MDN.

Apoi, pentru starea de hover, același gradient este aplicat umplerii fundalului. Aici este în acțiune:

Dă-i drumul

Până acum am acoperit gradientele netede; două sau mai multe culori care se varsă unul în altul de-a lungul unei tranziții perfecte. CSS face acest proces relativ simplu și ușor de întreținut în zilele noastre. Dar gradienti pot fi, de asemenea, dat caracter sub forma de textura:

Pe worldseasiestdecision.org această textură de desen este folosită pentru a conferi mai multă personalitate gradientelor. Buna treaba.

www.viens-la.com folosesc, de asemenea, imagini (spre deosebire de CSS) pentru a permite gradientilor lor un pic de personalitate:

Un gradient similar poate fi văzut repetat în detaliile de pe site-ul lor:

Tip

Gradiențele nu se limitează doar la fundaluri și granițe, ci pot adăuga și elemente de interes pentru tipografie:

Aici Pierre Georges folosește un gradient pe fundalul blocului de paragrafe "Bonjour", apoi folosește fundal clip de proprietate pentru a restricționa pictat zona la text. -webkit-text-fill-color: transparent; apoi face ca textul real să fie transparent, astfel încât gradientul să fie vizibil de dedesubt.

Iată cum arată sintaxa (webkit):

p fundal-imagine: -webkit-gradient (liniar, stânga sus, top dreapta, oprire color (0, # f24a70), oprire color (0,5, # c557d8), stop color (0,99, # f24a70); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 

Piața Envato

Aveți nevoie de mai multă inspirație? Verificați aceste fișiere disponibile pe Envato Market:

Gradiente - tema TumblrRedRice - WordPress Temă multifuncțională într-o paginăQuickEvents - pagina de debarcare responsabilăColormuse - Model de portlet Muse