Gradienty

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ć?

Tło w kolorze od ciemnego do jasnofioletowego gradientu z nagłówkiem, akapitem i linkiem.

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

Obsługa przeglądarek

  • Chrome: 26.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 7.

Źródło

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

Obsługa przeglądarek

  • Chrome: 26.
  • Krawędź: 12.
  • Firefox: 16.
  • Safari: 7.

Źródło

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

Obsługa przeglądarek

  • Chrome: 69.
  • Krawędź: 79.
  • Firefox: 83.
  • Safari: 12.1

Źródło

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

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o gradientach

Jaka jest minimalna liczba kolorów wymagana do utworzenia gradientu?

1
3
4
2

Elementy mogą mieć wiele gradientów jako tła.

Prawda
Fałsz