Gradienty

The CSS Podcast - 021: Gradients

Wyobraź sobie, że masz witrynę do zbudowania, 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ć?

Tło z ciemnofioletowego gradientu na jasnofioletowe z nagłówkiem, akapitem i linkiem.

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 ona 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, po słowie kluczowym to określ kierunek. 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 się kończy 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% rozmiary 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 kolorystycznych. Możesz też nakładać gradienty na siebie, 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ła lub elipsy). 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 ś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.

Interpolacja i przestrzenie kolorów

Każdy typ gradientu może interpolować kolory na różne sposoby, korzystając z przestrzeni barw i słowa kluczowego in. Ta opcja umożliwia dostosowywanie wyników między 2 punktami koloru w gradientach.

Możesz na przykład użyć przestrzeni kolorów oklab, aby ogólnie usunąć nienasycone kolory pośrednie i zapewnić bezpieczniejszy i bardziej żywy gradient.

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

W tym pokazie porównujemy ten sam gradient z domyślną i niestandardową interpolacją. Spróbuj zmienić przestrzenie kolorów, aby zobaczyć, jak się one różnią, lub nawet zmień kolory, aby sprawdzić, jak interpolacja wpływa na gradient.

Oprócz dostosowywania interpolacji przestrzeni barw cylindrycznych (HSL, HWB, LCH i OKLCH) możesz użyć słów kluczowych shorter (domyślnie) lub longer, aby określić, czy linia gradientu ma prowadzić długą drogą wokół koła barw, czy krótką drogą między dwoma kolorami.

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

Zasoby

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

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o gradientach

Ile minimum kolorów jest wymagane do utworzenia gradientu?

Spróbuj jeszcze raz.

Mogą mieć ten sam kolor i wyglądać jak jednolite, ale tak – wymagane są co najmniej 2 kolory.

Spróbuj jeszcze raz.

Czy elementy mogą mieć kilka gradientów jako tło?

Prawda

Właściwość background-image umożliwia użycie wielu gradientów, wystarczy je rozdzielić przecinkami.

Fałsz

Ale tak.