Функсияи 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,
ки градиенти радиалии такрориро эҷод мекунад
