Gradienty

Podcast o CSS – 021: Gradienty

Załóżmy, że masz witrynę, którą chcesz utworzyć, a u góry jest wprowadzenie z nagłówkiem, podsumowaniem i przyciskiem. Do tego wprowadzenia od projektantki został przekazany projekt z fioletowym tłem. Jedyny problem polega na tym, że w tle występują dwa odcienie fioletowego gradientu. Jak to zrobić?

Początkowo wydaje Ci się, że będzie trzeba wyeksportować obraz z narzędzia do projektowania, ale zamiast tego możesz skorzystać z linear-gradient.

Gradient to obraz, którego można używać wszędzie tam, gdzie można go używać. Gradło tworzy się za pomocą CSS, a składa się z kolorów, liczb i kątów. Gradienty CSS pozwalają stworzyć wszystko – od gładkiego gradientu między dwoma kolorami po imponujące grafiki – łącząc i powtarzając wiele gradientów.

Gradient liniowy

Funkcja linear-gradient() stopniowo generuje obraz w co najmniej 2 kolorach. Wymaga wielu argumentów, ale w najprostszej konfiguracji można przekazać niektóre kolory takie jak ten, co spowoduje automatyczne rozłożenie ich równomiernie i mieszanie.

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

Możesz też 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 potrzebujesz czarno-białego gradientu, który biegnie od lewej do prawej (czarny) do prawej (biały), jako pierwszy argument określ kąt w postaci to right.

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

Zdefiniowana wartość ograniczenia koloru zdefiniowana w miejscu, w którym kolor zatrzymuje się i miesza się z sąsiadami. W przypadku gradientu rozpoczynającego się od ciemnego odcienia czerwonego przechodzącego pod kątem 45 stopni, przy 30% rozmiaru gradientu zmienia się w jaśniejszy czerwony: wygląda to tak.

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

W linear-gradient() możesz dodać dowolną liczbę kolorów i gradientów. Możesz też nakładać na siebie gradienty, rozdzielając poszczególne gradienty przecinkami.

Gradient promieniowy

Aby utworzyć gradient promieniujący w sposób okrągły, użyj do tego funkcji radial-gradient(). Ta funkcja jest podobna do linear-gradient(), ale zamiast podawać kąt, możesz opcjonalnie określić położenie i kształt końcowy. Jeśli określisz tylko kolory, radial-gradient() automatycznie wybierze pozycję jako center, a potem wybierze koło lub elipsę w zależności od rozmiaru pola.

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

Położenie gradientu jest podobne do tego w polu background-position przy użyciu słów kluczowych lub wartości liczbowych. Rozmiar gradientu promieniowego określa rozmiar końcowego kształtu gradientu (okrągły lub elipsy). Domyślnie wynosi on farthest-corner, co oznacza, że gradient dokładnie znajduje się w najdalszym rogu pola od jego środka. Można też zastosować następujące słowa kluczowe:

• closest-corner znajdzie się w najbliższym rogu do środka gradientu.
• closest-side dopasuje się do boku pola najbliżej środka gradientu.
• farthest-side wykonuje czynność odwrotną do closest-side.

Możesz dodać dowolną liczbę przejść kolorów, podobnie jak w przypadku linear-gradient. Możesz też dodać dowolną liczbę elementów typu radial-gradients.

Gradient stożkowy

Gradient stożkowy ma punkt środkowy w polu, zaczyna się od góry (domyślnie) i obraca się wokół okręgu o 360 stopni.

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

Funkcja conic-gradient() akceptuje argumenty położenia i kąta.

Domyślny kąt to 0 stopni i stary się on od góry, w środku. Jeśli ustawisz kąt na 45deg, będzie to prawy górny róg. Argument kąta może mieć dowolny typ wartości kąta, np. gradient liniowy i promieniowy.

Domyślnie pozycja jest wyśrodkowana. Tak jak w przypadku gradientów promieniowych i liniowych, pozycja może być uzależniona od słów kluczowych lub określona za pomocą wartości liczbowych.

Tak jak w przypadku innych typów gradientu, możesz dodać dowolną liczbę podziałów kolorów. Dobrym przykładem użycia tej funkcji w przypadku gradientów stożkowych jest renderowanie wykresów kołowych w CSS.

Powtarzanie i miksowanie

Każdy rodzaj gradientu też ma powtarzający się typ. 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 powtarzać, by wypełnić pole, w zależności od rozmiaru.

Jeśli gradient nie powtarza się, prawdopodobnie nie ustawiono długości jednego z kresek kolorów. Tło w paski możesz na przykład utworzyć w repeating-linear-gradient, ustawiając długości ograniczeń kolorów.

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

Możesz też mieszać funkcje gradientu we właściwościach background, a także zdefiniować dowolną liczbę gradientów, podobnie jak w przypadku obrazu tła. Możesz na przykład połączyć ze sobą wiele gradientów liniowych lub 2 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ę na temat gradientów