Funkcija linear-gradient

Funkcija linear-gradient definē lineāru gradientu. Tiek lietota īpašībām, kas definē fona attēlu: background, background-image vai robežas attēlu: border-image, background-image-source.

Sintakse

cssselektors {
  background: linear-gradient([leņķis vai virziens], krāsa1 izmērs1, krāsa2 izmērs2...);
}

Vērtības

Piemērs . Vienkāršākais variants

Sintakse:

cssselektors {
  background: linear-gradient(sākuma krāsa, beigu krāsa);
}

Apskatīsim piemērā:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

Piemērs . Pievienojam leņķi

Sintakse:

cssselektors {
  background: linear-gradient(leņķis, sākuma krāsa, beigu krāsa);
}

Apskatīsim piemērā:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Piemērs . Pievienojam virzienu

Leņķa vietā var pievienot virzienu top, left, right, bottom vai to kombināciju: top left, top right Pirms virziena tiek likts vārds to.

Sintakse:

cssselektors {
  background: linear-gradient(virziens, sākuma krāsa, beigu krāsa);
}

Apskatīsim piemērā:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Piemērs . Pievienojam virzienu

Norādīsim citu virzienu:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Piemērs . Pievienojam izmēru

Sintakse:

cssselektors {
  background: linear-gradient(krāsa1 izmērs1, krāsa2 izmērs2);
}

Nākamajā piemērā darbība būs šāda: tīra sarkanā krāsa būs no 0px līdz 30px, no 30px līdz 50px būs gradients no sarkanās līdz zilajai, un no 50px līdz beigām - tīra zilā krāsa:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

Piemērs . Pievienojam vairāk kā 2 krāsas

Sintakse:

cssselektors {
  background: linear-gradient(krāsa1 izmērs1, krāsa2 izmērs2, krāsa3 izmērs3...);
}

Nākamajā piemērā darbība būs šāda: tīra sarkanā krāsa būs no 0px līdz 30px, no 30px līdz 50px būs gradients no sarkanās līdz zilajai, un no 50px līdz 70px - gradients no zilās līdz zaļajai, un pēc 70px - tīra zaļā krāsa:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

Piemērs . Asi pārejas

Nākamajā piemērā darbība būs šāda: tīra sarkanā krāsa būs no 0px līdz 30px, tīra zilā krāsa - no 30px līdz 60px, tīra zaļā krāsa - pēc 60px (red 0px var arī nerakstīt):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Piemērs . Izmērus var norādīt arī procentos

Nākamajā piemērā darbība būs šāda: tīra sarkanā krāsa būs no 0% līdz 30%, tīra zilā krāsa - no 30% līdz 60%, tīra zaļā krāsa - pēc 60% (red 0% var arī nerakstīt):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
  width: 200px;
  height: 200px;
}

Результат:

Piemērs . Kombinācija ar background-size

Nākamajā piemērā darbība būs šāda: tīra sarkanā krāsa būs no 0px līdz 30px, tīra zilā krāsa - no 30px līdz 60px, un tas viss atkārtosies pa gabaliņiem pa 60px (dēļ background-size: 60px;):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

Skatiet arī