Podcast o CSS – 021: Gradienty
Załóżmy, że masz witrynę, którą chcesz utworzyć, a u góry jest wprowadzenie z nagłówkiem, podsumowaniem i przyciskiem. Do tego wprowadzenia od projektantki został przekazany projekt z fioletowym tłem. Jedyny problem polega na tym, że w tle występują dwa odcienie fioletowego gradientu. Jak to zrobić?
Początkowo wydaje Ci się, że będzie trzeba wyeksportować obraz z narzędzia do projektowania, ale zamiast tego możesz skorzystać z linear-gradient
.
Gradient to obraz, którego można używać wszędzie tam, gdzie można go używać. Gradło tworzy się za pomocą CSS, a składa się z kolorów, liczb i kątów. Gradienty CSS pozwalają stworzyć wszystko – od gładkiego gradientu między dwoma kolorami po imponujące grafiki – łącząc i powtarzając wiele gradientów.
Gradient liniowy
Funkcja linear-gradient()
stopniowo generuje obraz w co najmniej 2 kolorach.
Wymaga wielu argumentów, ale w najprostszej konfiguracji można przekazać niektóre kolory takie jak ten, co spowoduje automatyczne rozłożenie ich równomiernie i mieszanie.
.my-element {
background: linear-gradient(black, white);
}
Możesz też przekazać kąt lub słowa kluczowe reprezentujące kąt.
Jeśli zdecydujesz się używać słów kluczowych, określ kierunek po słowie kluczowym to
.
Oznacza to, że jeśli potrzebujesz czarno-białego gradientu, który biegnie od lewej do prawej (czarny) do prawej (biały), jako pierwszy argument określ kąt w postaci to right
.
.my-element {
background: linear-gradient(to right, black, white);
}
Zdefiniowana wartość ograniczenia koloru zdefiniowana w miejscu, w którym kolor zatrzymuje się i miesza się z sąsiadami. W przypadku gradientu rozpoczynającego się od ciemnego odcienia czerwonego przechodzącego pod kątem 45 stopni, przy 30% rozmiaru gradientu zmienia się w jaśniejszy czerwony: wygląda to tak.
.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}
W linear-gradient()
możesz dodać dowolną liczbę kolorów i gradientów. Możesz też nakładać na siebie gradienty, rozdzielając poszczególne gradienty przecinkami.
Gradient promieniowy
Aby utworzyć gradient promieniujący w sposób okrągły, użyj do tego funkcji radial-gradient()
.
Ta funkcja jest podobna do linear-gradient()
, ale zamiast podawać kąt, możesz opcjonalnie określić położenie i kształt końcowy.
Jeśli określisz tylko kolory, radial-gradient()
automatycznie wybierze pozycję jako center
, a potem wybierze koło lub elipsę w zależności od rozmiaru pola.
.my-element {
background: radial-gradient(white, black);
}
Położenie gradientu jest podobne do tego w polu background-position
przy użyciu słów kluczowych lub wartości liczbowych.
Rozmiar gradientu promieniowego określa rozmiar końcowego kształtu gradientu (okrągły lub elipsy). Domyślnie wynosi on farthest-corner
, co oznacza, że gradient dokładnie znajduje się w najdalszym rogu pola od jego środka.
Można też zastosować następujące słowa kluczowe:
closest-corner
znajdzie się w najbliższym rogu do środka gradientu.closest-side
dopasuje się do boku pola najbliżej środka gradientu.farthest-side
wykonuje czynność odwrotną doclosest-side
.
Możesz dodać dowolną liczbę przejść kolorów, podobnie jak w przypadku linear-gradient
.
Możesz też dodać dowolną liczbę elementów typu radial-gradients
.
Gradient stożkowy
Gradient stożkowy ma punkt środkowy w polu, zaczyna się od góry (domyślnie) i obraca się wokół okręgu o 360 stopni.
.my-element {
background: conic-gradient(white, black);
}
Funkcja conic-gradient()
akceptuje argumenty położenia i kąta.
Domyślny kąt to 0 stopni i stary się on od góry, w środku.
Jeśli ustawisz kąt na 45deg
, będzie to prawy górny róg.
Argument kąta może mieć dowolny typ wartości kąta, np. gradient liniowy i promieniowy.
Domyślnie pozycja jest wyśrodkowana. Tak jak w przypadku gradientów promieniowych i liniowych, pozycja może być uzależniona od słów kluczowych lub określona za pomocą wartości liczbowych.
Tak jak w przypadku innych typów gradientu, możesz dodać dowolną liczbę podziałów kolorów. Dobrym przykładem użycia tej funkcji w przypadku gradientów stożkowych jest renderowanie wykresów kołowych w CSS.
Powtarzanie i miksowanie
Każdy rodzaj gradientu też ma powtarzający się typ.
Są to repeating-linear-gradient()
, repeating-radial-gradient()
i repeating-conic-gradient()
.
Są one podobne do funkcji niepowtarzających się i przyjmują te same argumenty.
Różnica polega na tym, że jeśli zdefiniowany gradient można powtarzać, by wypełnić pole,
w zależności od rozmiaru.
Jeśli gradient nie powtarza się,
prawdopodobnie nie ustawiono długości jednego z kresek kolorów.
Tło w paski możesz na przykład utworzyć w repeating-linear-gradient
, ustawiając długości ograniczeń kolorów.
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
Możesz też mieszać funkcje gradientu we właściwościach background
, a także zdefiniować dowolną liczbę gradientów, podobnie jak w przypadku obrazu tła.
Możesz na przykład połączyć ze sobą wiele gradientów liniowych lub 2 gradienty liniowe z gradientem promieniowym.
Zasoby
- Conic.css – przydatna kolekcja gradientów stożkowych.
- Przewodnik po gradientach w MDN
- Generator gradientów
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat gradientów
Jaka jest minimalna liczba kolorów wymagana do utworzenia gradientu?
Elementy mogą mieć wiele gradientów jako tło?
background-image
zezwala na wiele gradientów. Wystarczy oddzielić je przecinkami.