Share
În acest tutorial veți afla despre utilizarea gradientelor de pe web. Vă voi da câteva exemple, câteva exerciții (cum ar fi cum să creați gradienți pentru granițe) și voi arunca, de asemenea, niște resurse utile, care vor face mai ușoare crearea de pante.
În zilele trecute, nu a fost cu adevărat posibilă utilizarea gradientilor fără a se baza pe imagini, dar evoluțiile în CSS înseamnă că acum este simplu și demn de creat gradienți din foile noastre de stil.
În forma lor cea mai simplă, definim gradienții ca imagini de fundal. Am setat imaginea de fundal (doar folosind stenograma fundal este absolut bine) ca fiind fie a liniar gradient sau a radial gradient, apoi vom trece în culorile de început și de sfârșit:
.caseta fundal: gradient linear (# 000046, # 1cb5e0);
În mod implicit, un gradient liniar rulează de sus în jos, oferindu-ne ceva de genul:
Putem schimba direcția adăugând un nou parametru înaintea culorilor, de exemplu:
.caseta fundal: gradient linear (spre dreapta, # 000046, # 1cb5e0);
În mod similar, schimbarea acestui parametru să fie citită la dreapta sus ar crea un gradient diagonal. Puteți face exact acea diagonală, specificând ceva asemănător 45deg (sau orice unghi ales).
Luând lucrurile un pas mai departe, nu trebuie să vă opriți la doar două culori. Și puteți folosi și numele de culoare, după cum urmează:
.caseta fundal: gradient liniar (spre dreapta, portocaliu, # ec38bc, # 7303c0, cyan);
În acest caz, fiecare dintre cele patru culori va ocupa o cantitate egală de spațiu disponibil, dându-ne un gradient neted și echilibrat.
Dacă nu dorim distribuție uniformă, dar dorim ca o culoare să ocupe mai mult spațiu decât alta, putem specifica acea valoare ca procent direct după culoare:
.caseta fundal: gradient liniar (spre dreapta, # f05053 80%, # e1eec3);
Dându-ne:
Mergând mai departe, putem folosi tot ceea ce am învățat până acum și îl putem schimba radial în schimb. Oprirea liniar gradient pentru radial gradient este tot ce trebuie să faceți aici.
.caseta fundal: gradient radial (# fdbb2d, # 22c1c3);
Acest gradient radial se extinde la elementul părinte, astfel încât acest dreptunghi se termină cu un gradient asemănător unei elipse. Pentru a constrânge acest gradient astfel încât să rămână un cerc, indiferent de proporțiile părintelui, putem adăuga cerc cuvinte cheie cum ar fi:
.caseta fundal: gradient radial (cerc, # fdbb2d, # 22c1c3);
Dacă mergem mai departe, putem specifica și sursa gradientului cercului, astfel încât acesta să înceapă (de exemplu) în partea stângă sus a părintelui.
.caseta fundal: gradient radial (cerc în partea stângă sus, # fdbb2d, # 22c1c3);
Efectul este subtil, dar diferența dintre acest lucru și un gradient liniar simplu ar putea fi exact ceea ce căutați.
Unde putem folosi gradientele în unele moduri interesante?
Iată un exemplu de suprapunere, unde gradientul este puțin transparent (utilizează RGBA valori) și se află pe o fotografie.
fundal proprietatea poate accepta mai multe valori care formează un teanc, primul fiind cel mai de sus și ultima descoperire în partea de jos a grămezii. Dacă definim mai întâi un gradient, acesta va sta pe partea de sus a ceea ce vom defini ulterior. Uitați-vă la acest fragment și vedeți dacă puteți afla ce se întâmplă:
.hero fundal: gradient liniar (spre dreapta, rgba (75, 123, 211, 0.5), rgba (22, 215, 177, 0.3)), url (https: //bg.jpg);
Iată efectul rezultat:
Având un gradient pe text este un efect mare, deși nu este în întregime susținut într-un sens pur. În schimb, ne bazăm pe fundal clip proprietate (și prefixul său -webkit-background-clip prieten), care este ceva de hack, dar functioneaza foarte frumos.
Începem cu o bucată de text (an h1 în acest caz) și aplicați un gradient pentru a lui fundal. fundal clip proprietate, având o valoare de text, apoi elimină fundalul din întregul bloc, cu excepția zonei din spatele textului. Textul culoare ascunde fundalul, desigur, așa că reușim transparent pentru a lăsa gradientul să strălucească prin:
h1 background-image: gradient linear (la dreapta, # 0cebeb, # 20e3b2, # 29ffc6); -webkit-background-clip: text; fundal-clip: text; culoare: transparent;
Gradienții de graniță sunt ceva pe care l-ați fi văzut pe Envato Elements și sunt o modalitate excelentă de a vă convinge vizual interfața. Este subtil făcut, dar aruncați o privire la gradientul liniar albastru-purpuriu de pe marginea acestor butoane:
Pentru a realiza acest efect, există câteva abordări. Primul se bazează pe faptul că noi oferim mai întâi un element (o ancoră, un container, orice) o graniță transparentă. Apoi aplicăm gradientul nostru folosind border-image proprietate. În cele din urmă, am stabilit border-image-felie la 1, pentru ca gradientul să utilizeze conturul complet al frontierei.
.card1 margine: 5px solid transparent; imagine frontală: gradient liniar (spre fund, # 22c1c3, # fdbb2d); Frontieră-imagine-felie: 1;
Iată rezultatul:
Cu toate acestea, există o serie de probleme cu această abordare. in primul rand, border-image nu este acceptat universal în toate browserele, mai ales versiunile mai vechi ale IE. În al doilea rând, această abordare nu vă va permite să adăugați border-radius cum vedeți în Interfața Envato Elements. Deci, să ne uităm la o abordare alternativă.
Începem prin a da div a noastră poziție: relativă. Apoi adăugăm un pseudo-element, dând că a negativ poziția absolută a oricărei opțiuni pe care am ales lățimea graniței să fie (în acest caz 5px):
.card2 :: după content: "; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px;
Acest lucru ne va da un bloc de gradient solid care acoperă întreaga div. Adăugarea unui z-index din -1 va asigura că blocul de gradient se mișcă în spatele div.
Înainte (phew, există o mulțime de pași pentru acest) adăugăm a border-radius la pseudo-element egal cu cel al părintelui său (să aplicăm câte 10px fiecare). Și apoi îi oferim părinților un fundal al ceea ce vrem; același lucru ca și fundalul paginii o va face să pară transparentă.
În cele din urmă, ne întoarcem din nou la prietenul nostru fundal clip, aplicând-o părintelui și de data aceasta oferindu-i o valoare padding-box. Această ultimă acțiune vă asigură că umplerea lui div merge până la marginea frontierei și nu mai departe.
Deci, această abordare finală nu este de fapt o frontieră în adevăratul sens, dar atinge efectul pe care îl căutăm.
O a treia abordare este posibilă, de data aceasta folosind box-shadow pentru a obține efectul. Vă recomandăm să aruncați o privire la amestecul de granițe de graniță de către John Grishin pe CodePen pentru a vedea cum funcționează acest lucru.
Deci te duci! Acest primer pe gradientele CSS vă oferă începutul de care aveți nevoie, plus o privire asupra modului în care puteți utiliza gradiente pe web. Dacă ați văzut alte utilizări creative ale declivităților aflate în sălbăticie, vă rugăm să le aruncați în secțiunea de comentarii.
Accentsconagua