Creați gradiente cu CSS

Noi vom avea nevoie
Un editor de cod
Codurile alfanumerice ale culorilor de utilizat
Un browser web

Pasul 1

Voi începe prin crearea unui folder pentru acest tutorial pe care îl voi numi „trucos_css„În cadrul lui voi crea un alt apel”css”, În ele voi păstra fișierele de care voi avea nevoie.

Pasul 2

Voi merge la editorul meu de cod, în acest caz, voi folosi Paranteze și voi continua să creez un fișier nou "index.html„Că voi salva în rădăcina dosarului”trucuri_css", Voi crea și un fișier"stil.css"Că o voi salva în folderul" css "creat în pasul 1.

Pasul 3

În fișierul meu „index.html” voi scrie structura html de bază și voi adăuga o referință la foaia de stil ”stil.css„Că în pasul anterior salvați în cale”css / style.css”.
Cod din index.html:

 Trucuri CSS - Gradiente 

Pasul 4

În fișierul „index.html” voi include un nouîn cadrul căruia voi atribui ulterior clasa "gradient„Ceea ce voi scrie mai târziu în fișier”stil.css”.
Codul index.html va arăta astfel:

 Trucuri CSS

Pasul 5

Acum voi lucra la fișier "stil.css”, Voi începe prin a defini dimensiunea pe care o va acoperi eticheta , Voi seta o lățime de 100%, o înălțime de 100%, voi declara că nu va avea margini sau umplutură și vă voi spune că poziția sa va fi absolută astfel încât să acopere dimensiunea totală pe ecran.
Codul Style.css:

 corp {latime: 100%; înălțime: 100%; marja: 0px; umplutură: 0 px; poziție: absolută; }

Pasul 6

Continuăm să ne edităm css-ul, acum voi adăuga clasa "gradient„În el voi indica că ar trebui să fie afișat cu o înălțime de 100% și o lățime egală, voi scrie că va avea un selector de fundal care va conține proprietatea”gradient liniar ()Care funcționează după cum urmează …
În interiorul parantezelor indicăm unde este îndreptat sfârșitul gradientului nostru și culorile pe care le va arăta de la un capăt la altul. Sintaxa ar fi ceva de genul acesta:

 fundal: gradient liniar (direcție, color-stop1, color-stop2, …); 

În poziția numită direcție, vom defini direcția pe care va urma gradientul pe ecranStânga sus = stânga și sus
dreapta sus = dreapta și sus
dreapta-jos = în jos și în dreapta
stânga jos = în jos și în stânga
în dreapta jos = în jos și în dreapta începând din colțul din stânga sus
în stânga jos = dedesubt și în dreapta începând din colțul din dreapta sus
în dreapta sus = sus și dreapta începând din stânga jos
în stânga sus = sus și stânga începând din dreapta jos
În ceea ce privește culorile, le puteți alege pe cele de preferință, în acest caz voi face un gradient care va începe de la alb la negru prin două nuanțe de albastru.
Codul nostru CSS ar fi apoi după cum urmează:

 corp {latime: 100%; înălțime: 100%; marja: 0px; umplutură: 0 px; poziție: absolută; } .gradient {width: 100%; înălțime: 100%; fundal: gradient liniar (în dreapta jos, # fff, # 00e2ff, # 00f, # 000); } 

Rezultatul ar fi următorul.

Dar, ca orice în această lume, există și alte modalități de a face acest lucru mult mai ușor și mai rapid și fără să tastați foarte mult, putem merge la browserul nostru și căutăm următoarea adresă web http: //www.colorzill… radient-editor /

În el vor găsi o serie de gradienți deja predefiniți și pe care îi pot personaliza, vor trebui doar să selecteze unul, să-l ajusteze după preferință, dacă doresc, să copieze codul ccs care este afișat în partea dreaptă a ecranului și lipiți-l în stratul „gradient” pe care l-am creat deja înlocuind ceea ce găsim scris în el în pasul 6. Recomand această opțiune, deoarece o folosesc în mod special, iar codul pe care ni-l oferă este gata să funcționeze pe orice browser.

După copierea acestui cod, îl vom lipi în CSS, lăsându-l după cum urmează:

 corp {lățime: 100%; înălțime: 100%; marja: 0px; umplutură: 0 px; poziție: absolută; } .gradient {width: 100%; înălțime: 100%; fundal: rgb (212.228.239); / * Browsere vechi * / background: -moz-linear-gradient (top, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * FF3.6 + * / fundal: -webkit-gradient (liniar, stânga sus, stânga jos, color-stop (0%, rgba (212.228.239,1)), color-stop (64%, rgba (134.174.204,1 ))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (sus, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * Opera 11.10+ * / background: -ms-linear-gradient (top, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * IE10 + * / fundal: gradient liniar (până jos, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } 

Iar rezultatul în acest caz ar fi acesta.
MARI
Sper că va fi util, pentru mai multe trucuri nu uitați să mă urmați …
Dacă v-a plăcut acest tutorial, nu uitați să îl evaluați și dacă aveți întrebări sau comentarii lăsați-le mai jos, voi fi bucuros să vă răspund. Salutări … Ți-a plăcut și ai ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv