Gradienty

Podcast CSS – 021: Gradienty

Wyobraź sobie, że masz witrynę do stworzenia, a u góry znajduje się wprowadzenie z nagłówkiem, podsumowaniem i przyciskiem. Projektant przesłał projekt z fioletowym tłem na potrzeby tego wstępu. Jedynym problemem jest to, że tło zawiera 2 kolory fioletu w postaci gradientu. Jak to zrobić?

Możesz pomyśleć, że do tego celu musisz wyeksportować obraz z narzędzia do projektowania, ale możesz użyć linear-gradient.

Gradient to obraz, który można stosować wszędzie tam, gdzie można stosować obrazy. Jest on jednak tworzony za pomocą CSS i składa się z kolorów, liczb i kątów. Gradienty CSS umożliwiają tworzenie dowolnych elementów, od płynnego gradientu między dwoma kolorami po imponujące elementy graficzne dzięki mieszaniu i powtarzaniu wielu gradientów.

Gradient liniowy

Funkcja linear-gradient() generuje obraz z co najmniej 2 kolorów w sposób progresywny. Funkcja ta przyjmuje wiele argumentów, ale w najprostszej konfiguracji możesz przekazać kilka kolorów w taki sposób, a funkcja automatycznie podzieli je równomiernie, jednocześnie je mieszając.

.my-element {
    background: linear-gradient(black, white);
}

Możesz też podać kąt lub słowa kluczowe, które go reprezentują. Jeśli zdecydujesz się użyć słów kluczowych, określ kierunek po słowie kluczowym to. Oznacza to, że jeśli chcesz uzyskać czarno-biały gradient, który biegnie od lewej (czarny) do prawej (biały), jako pierwszy argument podasz kąt to right.

.my-element {
    background: linear-gradient(to right, black, white);
}

Wartość koloru, która określa, gdzie kolor kończy się i miesza się z sąsiednimi kolorami. W przypadku gradientu zaczynającego się od ciemnego odcienia czerwieni pod kątem 45°, który przy 30% rozmiaru gradientu zmienia się na jaśniejszy odcień czerwieni:

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Do linear-gradient() możesz dodać dowolną liczbę kolorów i punktów kolory, a gradienty możesz układać jeden na drugim, oddzielając je przecinkami.

Gradient promieniowy

Aby utworzyć gradient, który rozchodzi się promieniście, możesz użyć funkcji radial-gradient(). Jest to podobne do linear-gradient(), ale zamiast podawania kąta możesz opcjonalnie określić pozycję i kształt zakończenia. Jeśli określisz tylko kolory, radial-gradient() automatycznie wybierze pozycję jako centeri wybierze okrąg lub elipsę w zależności od rozmiaru pola.

.my-element {
    background: radial-gradient(white, black);
}

Pozycja gradientu jest podobna do background-position, która wykorzystuje słowa kluczowe lub wartości liczbowe. Wielkość gradientu promieniowego określa rozmiar kształtu końcowego gradientu (koło lub elipsa) i domyślnie będzie to farthest-corner, co oznacza, że dokładnie dotyka on najdalszego rogu pola od środka. Możesz też użyć tych słów kluczowych:

• closest-corner będzie odpowiadać najbliższemu rogowi względem środka gradientu.
• closest-side będzie odpowiadać stronie pola najbliższej środkowi gradientu.
• Funkcja farthest-side będzie działać odwrotnie niż funkcja closest-side.

Podobnie jak w przypadku linear-gradient, możesz dodać dowolną liczbę kolorów. Podobnie możesz dodać dowolną liczbę radial-gradients.

Gradient stożkowy

Gradient stożkowy ma punkt środkowy w polu i zaczyna się od góry (domyślnie), a potem biegnie po okręgu o 360 stopniach.

.my-element {
    background: conic-gradient(white, black);
}

Funkcja conic-gradient() przyjmuje argumenty pozycji i kąta.

Domyślnie kąt wynosi 0 stopni i rozpoczyna się u góry, w środku. Jeśli ustawisz kąt na 45deg, będzie to prawy górny róg. Argument angle akceptuje dowolny typ wartości kąta, np. gradient liniowy i sferyczny.

Domyślnie jest ona ustawiona na środku. Podobnie jak w przypadku gradientów radialnych i liniowych, pozycjonowanie może być oparte na słowach kluczowych lub zdefiniowane za pomocą wartości liczbowych.

Podobnie jak w przypadku innych typów gradientów, możesz dodać dowolną liczbę punktów koloru. 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 typ gradientu ma też typ powtarzalny. Są to: repeating-linear-gradient(), repeating-radial-gradient() i repeating-conic-gradient(). Są podobne do funkcji niepowtarzalnych i przyjmują te same argumenty. Różnica polega na tym, że jeśli zdefiniowany gradient może być powtórzony, aby wypełnić pole, zostanie on powtórzony na podstawie obu ich rozmiarów.

Jeśli gradient nie powtarza się, prawdopodobnie nie ustawiono długości jednego z punktów koloru. Możesz na przykład utworzyć tło w paski za pomocą repeating-linear-gradient, ustawiając długości punktów koloru.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

Możesz też mieszać funkcje gradientu w właściwościach background, a także definiować dowolną liczbę gradientów, podobnie jak w przypadku obrazu tła. Możesz na przykład łączyć ze sobą kilka gradientów liniowych lub 2 gradienty liniowe z gradientem radialnym.

Zasoby

• Conic.css – przydatna kolekcja gradientów stożkowych
• Przewodnik po gradientach na stronie MDN
• Generator gradientu

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o gradientach