5.1 Gradienty liniowe
Gradienty to potężne narzędzie w web designie, pozwalające na tworzenie płynnych przejść między kolorami bez użycia obrazków. CSS oferuje dwa główne typy gradientów: liniowe (linear-gradient) i radialne (radial-gradient). Gradienty te używane są do tła elementów, tworzenia przycisków i innych efektów wizualnych.
Gradienty liniowe (linear-gradient)
Gradient liniowy tworzy płynne przejście między dwoma lub więcej kolorami wzdłuż określonej linii (osi). Linia może być pozioma, pionowa lub pod dowolnym kątem.
Składnia
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Wartości
direction: kierunek gradientu. Może być określony w stopniach (np.90deg), za pomocą słów kluczowych (np.to right,to bottom left)color-stop: przystanek kolorystyczny, określający kolor i jego pozycję w gradiencie
Przykłady użycia
Gradient poziomy:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Gradient poziomy</div>
</body>
Gradient pionowy:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Gradient pionowy</div>
</body>
Gradient diagonalny:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Gradient diagonalny</div>
</body>
Gradient wielokolorowy:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Gradient wielokolorowy</div>
</body>
Wyjaśnienie kodu:
to right: gradient biegnie z lewej do prawejto bottom: gradient biegnie z góry na dół45deg: gradient biegnie pod kątem 45 stopnired,yellow,green,blue: kilka przystanków kolorystycznych do stworzenia gradientu wielokolorowego
5.2 Gradienty radialne
radial-gradient tworzy płynne przejście między kolorami, wychodzące z centrum i rozprzestrzeniające się do krawędzi okręgu lub elipsy. Gradienty radialne mogą tworzyć interesujące efekty wizualne, takie jak imitacja trójwymiarowości.
Składnia:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Wartości:
shape: kształt gradientu, może byćcircle(koło) lubellipse(elipsa) (wartość domyślna)size: rozmiar gradientu, może byćclosest-side,closest-corner,farthest-side,farthest-cornerposition: pozycja centrum gradientu, może być określona w procentach, pikselach lub za pomocą słów kluczowych (np.center,topleft)color-stop: przystanek kolorystyczny, określający kolor i jego pozycję w gradiencie
Przykłady użycia
Gradient okrągły:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Gradient okrągły</div>
</body>
Gradient eliptyczny:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Gradient eliptyczny</div>
</body>
Gradient z centrum:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Gradient z centrum</div>
</body>
Gradient z rogu:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Gradient z rogu</div>
</body>
Wyjaśnienie kodu:
circle: tworzy gradient okrągłyellipse: tworzy gradient eliptycznyat center: gradient zaczyna się z centrumat top left: gradient zaczyna się z górnego lewego rogured,blue,green: kilka przystanków kolorystycznych do stworzenia gradientu wielokolorowego
5.3 Dodatkowe ustawienia gradientów
Powtarzające się gradienty
1. Powtarzające się gradienty liniowe (repeating-linear-gradient)
Powtarzające się gradienty liniowe tworzą powtarzający się wzór z gradientem liniowym.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Powtarzające się gradienty radialne (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Przezroczyste przystanki kolorystyczne
Przystanki kolorystyczne mogą zawierać przezroczystość, umożliwiając tworzenie bardziej złożonych efektów wizualnych.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Wspólne użycie kilku gradientów
Można użyć kilku gradientów do tworzenia skomplikowanych tł.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION