linear-gradient ֆունկցիա
linear-gradient ֆունկցիան սահմանում է գծային
գրադիենտ: Կիրառվում է այն հատկություններին, որոնք
սահմանում են ֆոնի պատկերը՝ background,
background-image
կամ եզրագծի պատկերը՝ border-image,
background-image-source:
Սինտաքսիս
ընտրիչ {
background: linear-gradient([անկյուն կամ ուղղություն], գույն1 չափ1, գույն2 չափ2...);
}
Արժեքներ
| Արժեք | Նկարագրություն |
|---|---|
| ուղղություն |
Սահմանում է գրադիենտի կոնկրետ ուղղություն ցանկացած անկյունային միավորներով
կամ top, left, right, bottom բանալի բառերով
կամ դրանց համադրությամբ՝ top left, top right և այլն:
Բառերի հերթականությունը կարևոր չէ՝ կարելի է գրել top left և left top,
տարբերություն չկա: Պարամետրը ոչ պարտադիր է. եթե այն չգրվի, գրադիենտը կլինի
վերևից ներքև (ինչպես to top-ի դեպքում): Ուղղությունից առաջ դրվում է to բառը:
|
| անկյուն | Անկյուն ցանկացած անկյունային միավորներով: Կարող է լինել դրական կամ բացասական: Պարամետրը ոչ պարտադիր է: Միաժամանակ կարող է սահմանվել կամ անկյուն, կամ ուղղություն (կամ ընդհանրապես ոչինչ): |
| գույն1 | Գրադիենտի սկզբնական գույն ցանկացած գույնի միավորներով: |
| գույն2 | Գրադիենտի վերջնական գույն ցանկացած գույնի միավորներով: |
| չափ | Սահմանում է գրադիենտի կոնկրետ գույնի տարածությունը ցանկացած չափի միավորներով: |
Օրինակ : Ամենապարզ տարբերակը
Սինտաքսիս:
ընտրիչ {
background: linear-gradient(սկզբնական գույն, վերջնական գույն);
}
Տեսնենք օրինակով.
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Օրինակ : Ավելացնում ենք անկյուն
Սինտաքսիս:
ընտրիչ {
background: linear-gradient(անկյուն, սկզբնական գույն, վերջնական գույն);
}
Տեսնենք օրինակով.
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Օրինակ : Ավելացնում ենք ուղղություն
Անկյան փոխարեն կարելի է ավելացնել ուղղություն
top, left, right, bottom
կամ դրանց համադրությունը՝ top left, top right
Ուղղությունից առաջ դրվում է to բառը:
Սինտաքսիս:
ընտրիչ {
background: linear-gradient(ուղղություն, սկզբնական գույն, վերջնական գույն);
}
Տեսնենք օրինակով.
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Օրինակ : Ավելացնում ենք ուղղություն
Նշենք մեկ այլ ուղղություն.
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Օրինակ : Ավելացնում ենք չափ
Սինտաքսիս:
ընտրիչ {
background: linear-gradient(գույն1 չափ1, գույն2 չափ2);
}
Հաջորդ օրինակում վարքագիծը կլինի հետևյալը.
մաքուր կարմիր գույնը կլինի 0px-ից
30px, 30px-ից 50px
կլինի գրադիենտ կարմիրից դեպի կապույտ, իսկ
50px-ից և մինչև վերջ - մաքուր կապույտ.
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Օրինակ : Ավելացնում ենք ավելի քան 2 գույն
Սինտաքսիս:
ընտրիչ {
background: linear-gradient(գույն1 չափ1, գույն2 չափ2, գույն3 չափ3...);
}
Հաջորդ օրինակում վարքագիծը կլինի հետևյալը.
մաքուր կարմիր գույնը կլինի 0px-ից
30px, 30px-ից 50px
կլինի գրադիենտ կարմիրից դեպի կապույտ, իսկ
50px-ից և մինչև 70px - գրադիենտ կապույտից
դեպի կանաչ, իսկ 70px-ից հետո - մաքուր կանաչ.
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Օրինակ : Կտրուկ անցումներ
Հաջորդ օրինակում վարքագիծը կլինի հետևյալը.
մաքուր կարմիր գույնը կլինի 0px-ից
30px, մաքուր կապույտ - 30px-ից
60px, մաքուր կանաչ - 60px-ից հետո
(red 0px-ը կարելի է նաև չգրել).
<div id="elem"></div>
#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%-ը կարելի է նաև չգրել).
<div id="elem"></div>
#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;-ի պատճառով).
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Տես նաև
-
radial-gradientֆունկցիան,
որը ստեղծում է ճառագայթային գրադիենտ -
repeating-linear-gradientֆունկցիան,
որը ստեղծում է կրկնվող գծային գրադիենտ -
repeating-radial-gradientֆունկցիան,
որը ստեղծում է կրկնվող ճառագայթային գրադիենտ
