linear-gradient funksiýasy

linear-gradient funksiýasy çyzyk gradienti kesgitleýär. Fon suratyny kesgitleýän häsiýetlere goýulýar: background, background-image ýa-da araçäge suratyny kesgitleýän häsiýetlere: border-image, background-image-source.

Sintaksis

cssselektor {
  background: linear-gradient([burç ýa-da ugur], reňk1 ölçeg1, reňk2 ölçeg2...);
}

Görnüşleri

Mysal . Iň ýönekeý wariant

Sintaksis:

cssselektor {
  background: linear-gradient(başlangyç reňk, soňky reňk);
}

Mysala seredeliň:

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

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

Результат:

Mysal . Burç goşýarys

Sintaksis:

cssselektor {
  background: linear-gradient(burç, başlangyç reňk, soňky reňk);
}

Mysala seredeliň:

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

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

Результат:

Mysal . Ugur goşýarys

Burç ýerine ugur goşup bolýar top, left, right, bottom ýa-da olaryň birikmeleri: top left, top right Ugryň öňünde to sözi goýulýar.

Sintaksis:

cssselektor {
  background: linear-gradient(ugur, başlangyç reňk, soňky reňk);
}

Mysala seredeliň:

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

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

Результат:

Mysal . Başga ugur görkezýäris

Başga ugry görkezeliň:

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

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

Результат:

Mysal . Ölçeg goşýarys

Sintaksis:

cssselektor {
  background: linear-gradient(reňk1 ölçeg1, reňk2 ölçeg2);
}

Indiki mysalda ýagdaý şeýle bolar: ary gyzyl reňk 0px-dan 30px-a çenli, 30px-dan 50px-a çenli gyzyldan gök reňke gradient, we 50px-dan ahyryna çenli - ary gök:

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

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

Результат:

Mysal . 2-den köp reňk goşýarys

Sintaksis:

cssselektor {
  background: linear-gradient(reňk1 ölçeg1, reňk2 ölçeg2, reňk3 ölçeg3...);
}

Indiki mysalda ýagdaý şeýle bolar: ary gyzyl reňk 0px-dan 30px-a çenli, 30px-dan 50px-a çenli gyzyldan gök reňke gradient, we 50px-dan 70px-a çenli - gökden ýaşyl reňke gradient, we 70px-dan soň - ary ýaşyl:

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

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

Результат:

Mysal . Keskin geçişler

Indiki mysalda ýagdaý şeýle bolar: ary gyzyl reňk 0px-dan 30px-a çenli, ary gök - 30px-dan 60px-a çenli, ary ýaşyl - 60px-dan soň (red 0px ýazmak hökmany däl):

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

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

Результат:

Mysal . Ölçegleri göterimlerde hem kesgitläp bolýar

Indiki mysalda ýagdaý şeýle bolar: ary gyzyl reňk 0%-dan 30%-a çenli, ary gök - 30%-dan 60%-a çenli, ary ýaşyl - 60%-dan soň (red 0% ýazmak hökmany däl):

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

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

Результат:

Mysal . background-size bilen birikme

Indiki mysalda ýagdaý şeýle bolar: ary gyzyl reňk 0px-dan 30px-a çenli, ary gök - 30px-dan 60px-a çenli, şol bir wagtyň özünde bu hemmesi 60px bölejiklerde gaýtalanyp durar (background-size: 60px; sebäpli):

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;
}

Результат:

Şeýle hem serediň