linear-gradient ֆունկցիա

linear-gradient ֆունկցիան սահմանում է գծային գրադիենտ: Կիրառվում է այն հատկություններին, որոնք սահմանում են ֆոնի պատկերը՝ background, background-image կամ եզրագծի պատկերը՝ border-image, background-image-source:

Սինտաքսիս

cssընտրիչ {
  background: linear-gradient([անկյուն կամ ուղղություն], գույն1 չափ1, գույն2 չափ2...);
}

Արժեքներ

Օրինակ : Ամենապարզ տարբերակը

Սինտաքսիս:

cssընտրիչ {
  background: linear-gradient(սկզբնական գույն, վերջնական գույն);
}

Տեսնենք օրինակով.

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

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

Результат:

Օրինակ : Ավելացնում ենք անկյուն

Սինտաքսիս:

cssընտրիչ {
  background: linear-gradient(անկյուն, սկզբնական գույն, վերջնական գույն);
}

Տեսնենք օրինակով.

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

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

Результат:

Օրինակ : Ավելացնում ենք ուղղություն

Անկյան փոխարեն կարելի է ավելացնել ուղղություն top, left, right, bottom կամ դրանց համադրությունը՝ top left, top right Ուղղությունից առաջ դրվում է to բառը:

Սինտաքսիս:

cssընտրիչ {
  background: linear-gradient(ուղղություն, սկզբնական գույն, վերջնական գույն);
}

Տեսնենք օրինակով.

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

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

Результат:

Օրինակ : Ավելացնում ենք ուղղություն

Նշենք մեկ այլ ուղղություն.

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

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

Результат:

Օրինակ : Ավելացնում ենք չափ

Սինտաքսիս:

cssընտրիչ {
  background: linear-gradient(գույն1 չափ1, գույն2 չափ2);
}

Հաջորդ օրինակում վարքագիծը կլինի հետևյալը. մաքուր կարմիր գույնը կլինի 0px-ից 30px, 30px-ից 50px կլինի գրադիենտ կարմիրից դեպի կապույտ, իսկ 50px-ից և մինչև վերջ - մաքուր կապույտ.

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

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

Результат:

Օրինակ : Ավելացնում ենք ավելի քան 2 գույն

Սինտաքսիս:

cssընտրիչ {
  background: linear-gradient(գույն1 չափ1, գույն2 չափ2, գույն3 չափ3...);
}

Հաջորդ օրինակում վարքագիծը կլինի հետևյալը. մաքուր կարմիր գույնը կլինի 0px-ից 30px, 30px-ից 50px կլինի գրադիենտ կարմիրից դեպի կապույտ, իսկ 50px-ից և մինչև 70px - գրադիենտ կապույտից դեպի կանաչ, իսկ 70px-ից հետո - մաքուր կանաչ.

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

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

Результат:

Օրինակ : Կտրուկ անցումներ

Հաջորդ օրինակում վարքագիծը կլինի հետևյալը. մաքուր կարմիր գույնը կլինի 0px-ից 30px, մաքուր կապույտ - 30px-ից 60px, մաքուր կանաչ - 60px-ից հետո (red 0px-ը կարելի է նաև չգրել).

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

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

Результат:

Օրինակ : Չափերը կարելի է սահմանել նաև տոկոսներով

Հաջորդ օրինակում վարքագիծը կլինի հետևյալը. մաքուր կարմիր գույնը կլինի 0%-ից 30%, մաքուր կապույտ - 30%-ից 60%, մաքուր կանաչ - 60%-ից հետո (red 0%-ը կարելի է նաև չգրել).

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

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

Результат:

Օրինակ : background-size-ի հետ համադրություն

Հաջորդ օրինակում վարքագիծը կլինի հետևյալը. մաքուր կարմիր գույնը կլինի 0px-ից 30px, մաքուր կապույտ - 30px-ից 60px, ընդ որում այս ամենը կկրկնվի 60px հատվածներով (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;
}

Результат:

Տես նաև