Gradienty

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ą do closest-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