Podcast CSS – 021: Gradients
.
Wyobraź sobie, że na górze strony znajdziesz wprowadzenie z nagłówkiem, podsumowaniem i przyciskiem. Projektant przekazał projekt z fioletowym tłem tego wprowadzenia. Jedynym problemem jest to, że tło ma dwa odcienie fioletu jako gradient. Jak to zrobić?
Początkowo możesz pomyśleć, że aby go wyeksportować, trzeba wyeksportować obraz z narzędzia do projektowania,
ale możesz użyć
linear-gradient
.
Gradient to obraz, którego można używać wszędzie tam, gdzie można używać obrazów. ale powstał w kodzie CSS i składa się z kolorów, liczb oraz kątów. Gradienty CSS pozwalają stworzyć wszystko, od gładkiego gradientu między dwoma kolorami, aż po imponujące dzieło sztuki, mieszając i powtarzając różne gradienty.
Gradient liniowy
linear-gradient()
generuje obraz o dwóch lub większej liczbie kolorów stopniowo.
Przyjmuje wiele argumentów, ale w najprostszej konfiguracji
niektóre kolory takie jak ten zostaną automatycznie podzielone, jednocześnie mieszane.
.my-element {
background: linear-gradient(black, white);
}
Możesz także 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 chcesz użyć czarno-białego gradientu,
od lewej (czarnej) do prawej (białej),
jako pierwszy argument podasz to right
.
.my-element {
background: linear-gradient(to right, black, white);
}
Koniec koloru zdefiniowana w miejscu, w którym kolor kończy się i miesza z sąsiadami. W przypadku gradientu zaczynającego się z ciemnym odcieniem czerwieni pod kątem 45 stopni: przy 30% rozmiaru gradientu zmienia się na jaśniejszy czerwony: wygląda to tak.
.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}
W dokumencie linear-gradient()
możesz dodać dowolną liczbę kolorów i ograniczeń kolorów,
i można nakładać na siebie gradienty, rozdzielając każdy gradient przecinkiem.
Gradient promieniowy
Aby utworzyć gradient promieniujący okrąg, funkcja
radial-gradient()
kolejne kroki.
Jest podobny do linear-gradient()
,
ale zamiast określać kąt, możesz opcjonalnie określić pozycję i kształt końcowy.
Jeśli określisz tylko kolory, element radial-gradient()
automatycznie wybierze pozycję jako center
i wybierz koło lub elipsę, w zależności od jego rozmiaru.
.my-element {
background: radial-gradient(white, black);
}
Pozycja gradientu jest podobna do pozycji background-position
pod względem słów kluczowych lub wartości liczbowych.
Rozmiar gradientu promieniowego określa rozmiar końcowego kształtu gradientu
(koła lub elipsy) i domyślnie to farthest-corner
,
czyli dokładnie styka się z najdalszym rogiem pola od środka.
Możesz też użyć tych słów kluczowych:
closest-corner
będzie stykał się z rogiem najbliżej środka gradientu.closest-side
będzie się stykać z bokem prostokąta najbliżej środka gradientu.farthest-side
wykona operację odwrotną doclosest-side
.
Możesz dodać dowolną liczbę podziałów kolorów, tak jak w linear-gradient
.
Możesz również dodać dowolną liczbę tych elementów typu radial-gradients
.
Gradient stożkowy
Gradient stożkowy znajduje się w środku ramki i zaczyna się od góry (domyślnie), i obraca się wokół siebie.
.my-element {
background: conic-gradient(white, black);
}
conic-gradient()
funkcja akceptuje argumenty pozycji i kąta.
Domyślnie kąt wynosi 0 stopni i zaczyna się od góry, pośrodku.
Gdy ustawisz kąt na 45deg
, będzie to prawy górny róg.
W argumencie kąt można wpisywać dowolny typ wartości kąta, np. gradienty liniowe i promieniowe.
Domyślnie pozycja jest wyśrodkowana. Podobnie jak w przypadku gradientów promieniowych i liniowych, może być oparta na słowach kluczowych, lub może być definiowane za pomocą wartości liczbowych.
Możesz dodać dowolną liczbę przerw w kolorach, tak jak w przypadku innych typów gradientu. Dobrym przykładem zastosowania tej funkcji w przypadku gradientów stożkowych jest renderowanie wykresów kołowych za pomocą CSS.
Powtarzanie i miksowanie
Każdy rodzaj gradientu ma też typ powtarzający się.
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 powtórzyć, aby wypełnić pole,
w zależności od ich rozmiaru.
Jeśli gradient się nie powtarza,
prawdopodobnie nie ustawiono długości jednego z pośrednich kolorów.
Przykład:
możesz utworzyć tło w paski za pomocą parametru repeating-linear-gradient
, ustawiając długości barw.
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
Możesz też mieszać funkcje gradientu na właściwościach background
,
a także zdefiniować dowolną liczbę gradientów,
tak samo jak w przypadku obrazu tła.
Możesz na przykład mieszać ze sobą wiele gradientów liniowych lub dwa 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ę o gradientach
Jaka jest minimalna liczba kolorów wymagana do utworzenia gradientu?
Elementy mogą mieć wiele gradientów jako tła.