linear-gradient()
- Data publikacji
- Ostatnio edytowano
Przeznaczenie funkcji linear-gradient()
Za pomocą funkcji linear-gradient()
możemy utworzyć obrazek w postaci gradientu liniowego.
Parametry funkcji linear-gradient()
- Przykładowe zapisy
-
linear-gradient(red, gold)
linear-gradient(red -20%, gold 120%)
linear-gradient(red, orange, gold, yellow)
linear-gradient(to right top, red 20%, gold 80%)
linear-gradient(-60deg, red, yellow, green)
- direction
-
Parametr
direction
nie jest wymaganym parametrem funkcjilinear-gradient()
. Parametrdirection
określa kierunek, w którym powinien tworzyć się nowo powstający gradient liniowy. - color
-
Parametr
color
jest wymaganym parametrem funkcjilinear-gradient()
. Parametrcolor
określa jeden z kolorów, który powinien tworzyć nowo powstający gradient liniowy. - stop
-
Parametr
stop
nie jest wymaganym parametrem funkcjilinear-gradient()
. Parametrstop
określa miejsce, od którego lub do którego powinien zmieniać swoją barwę kolor, który podaliśmy przed danym parametremstop
.
linear-gradient(45deg, red 0%, gold 100%)
Występowanie funkcji linear-gradient()
Przykład funkcji linear-gradient()
background-image:linear-gradient(90deg, yellow 0%, orange 50%, red 100%);
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:linear-gradient(90deg, yellow 0%, orange 50%, red 100%);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
do obszaru tła tego elementu "div" został dodany obrazek w postaci gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "linear-gradient()", w której to funkcji zostały użyte następujące wartości: "90deg, yellow 0%, orange 50%, red 100%"
</div>
</body>
</html>
Interpretacja funkcji linear-gradient()
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 10
-
tak
Zobacz więcej informacji o interpretacji funkcji linear-gradient().