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функциясы,
ол қайталанатын радиалды градиент жасайды
