Cum de a adăuga un css printr-un gradient liniar în fundal

Vă urez bun venit pe blogul meu. Astăzi, aș dori să arate cum să scrie în gradientul liniar css. Acest lucru oferă posibilități suplimentare în ceea ce privește designul site-ului, deoarece gradientul în unele cazuri, o face mult mai frumos aranja diverse obiecte.

proprietăţi de sintaxă

Deci, un gradient liniar simplu poate fi setat după cum urmează:

Prin urmare, hai să înlocuiască în loc de aceste cuvinte valori reale și să vedem ce se întâmplă.

Și gradientik atât de drăguț format pe pagina mea. Desigur, înainte de asta, am întrebat-o anumită dimensiune bloc (lățime și înălțime). Dar esența, cred că ai înțeles greșit.

gradient linear de curcubeu

De exemplu, am schimbat direcția, precum și adăugați mai multe culori pe care le-ați văzut că, în elaborarea gradientului aveți o mulțime de libertate, și poți face cum vrei.

Acum este îndreptată de sus în jos. De asemenea, am toate culorile curcubeului. Sa dovedit:

tranziții și kolorstopy abrupți

Acum este timpul să se îngropa în proprietățile de sintaxă și vă arată cum să facă tranziții clare între culori. A se vedea codul:

Și se pare că:

tranziții bruște sunt posibile prin faptul că am cerut așa-numitul kolorstopy. Ele sunt date ca procent și de a determina în cazul în care, în gradientul va fi partea cea mai intensă a culorii. Pentru a face saltul, trebuie să definiți două culori adiacente kolorstop în același loc, pe care am făcut-o în acest exemplu.

După cum vă puteți înregistra culoarea?

Culoare puteți determina modul în care doriți: folosind cuvântul cheie, format hex-cod în rgb, RGBA, HSL. Pe scurt, în orice mod posibil. Astfel, este posibil să se facă gradienți translucide, de exemplu.

Ce altceva este posibil?

Nu puteți specifica direcția de cuvinte cheie (dreapta, stânga, jos), și în grade de la 0 la 360. Astfel, este posibil să se direcționeze în diagonală, cu toate că acest lucru se poate realiza prin utilizarea a două cuvinte cheie. Așa cum: sus dreapta - în colțul din dreapta sus. Cu toate celelalte valori, de asemenea.

Ați putea fi, de asemenea, interesat în