Gradienty

The CSS Podcast - 021: Gradients

Wyobraź sobie, że masz do zbudowania witrynę, 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 zadania 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 przejścia między dwoma kolorami po imponujące elementy graficzne dzięki mieszaniu i powtarzaniu wielu gradientów.

Gradient liniowy

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

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

Chociaż w CSS można użyć tylko jednego koloru w funkcjach gradientu, spowoduje to uzyskanie tylko jednolitego koloru:

.my-element {
    background: linear-gradient(red);
}

Możesz też przekazać 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: wygląda to tak.

.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 końcowy. 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ę elementów 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 stożkowy.

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 mają te same argumenty. Różnica polega na tym, że jeśli zdefiniowany gradient można powtórzyć, 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 barwowej oklab, aby usunąć nienasycone kolory pośrednie i uzyskać bezpieczniejszy i bardziej żywy gradient.

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

W tym pokazie porównawczym możesz porównać 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.

Możesz też użyć kluczowych słów increasing lub decreasing z cylindrycznym przestrzenią barw, aby kontrolować kierunek zmiany kąta odcienia podczas przechodzenia od jednego koloru do drugiego. Kąt zawsze będzie się zmieniać w kierunku wybranego słowa kluczowego, niezależnie od tego, czy jest ono dłuższe, czy krótsze.

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

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

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