Gradienți CSS. Gradienți liniari. Gradienți radiali. Gradient liniar - de sus în jos.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Gradienții CSS vă permit să afișați tranziții netede între două sau mai multe culori specificate.
CSS definește două tipuri de gradienți:
Gradienți liniari/Linear Gradients (coboară / în sus / stânga / dreapta / în diagonală)
Gradienți radiali/Radial Gradients (definiți de centrul lor)
Gradienți liniari CSS
Pentru a crea un gradient liniar trebuie să definiți cel puțin două opriri de culoare (color stops). Oprirea culorilor (color stops) se referă la culorile dintre care doriți să faceți tranziții netede. Puteți seta, de asemenea, un punct de plecare și o direcție (sau un unghi) împreună cu efectul de gradient.
Sintaxă
Gradient liniar - de sus în jos (Top to Bottom) (aceasta este implicit)
Următorul exemplu arată un gradient liniar care începe de sus. Începe roșu, iar trecerea se face la galben:
Exemplu:
#grad {
background-image: linear-gradient(red, yellow);
}