Przejście kolorów CSS

Gradient tła

CSS gradienty pozwalają na pokazanie płynnego przejścia między dwoma lub większą ilością określonych kolorów.

CSS definiuje dwa typy gradientów:

  • Liniowy gradient((w dół/w górę/w lewo/w prawo/na skos))
  • Gradient promienisty((zdefiniowany przez środek))

CSS liniowy gradient

Aby utworzyć liniowy gradient, musisz zdefiniować co najmniej dwa punkty koloru. Punkty koloru to kolory, które chcesz prezentować jako płynne przejścia. Możesz również ustawić punkt startowy i kierunek (lub kąt) oraz efekt gradientu.

Gramatyka

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Liniowy gradient - od góry do dołu (domyślny)

Poniższy przykład pokazuje liniowy gradient zaczynający się od góry. Zaczyna się od czerwonego, przechodząc w żółty:

Od góry do dołu (domyślnie)

Przykład

#grad {
  background-image: linear-gradient(red, yellow);
}

Spróbuj sam

Gradient liniowy - od lewej do prawej

Poniższy przykład pokazuje gradient liniowy zaczynający się od lewej. Zaczyna się od czerwonego, przechodzi w żółty:

Od lewej do prawej

Przykład

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Spróbuj sam

Gradient liniowy - diagonalny

Możesz określić poziome i pionowe pozycje początkowe, aby uzyskać gradient diagonalny.

Poniższy przykład pokazuje gradient liniowy zaczynający się od lewego górnego rogu (do prawego dolnego rogu). Zaczyna się od czerwonego, przechodzi w żółty:

Od lewego górnego rogu do prawego dolnego rogu

Przykład

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Spróbuj sam

Użycie kąta

Jeśli chcesz mieć większą kontrolę nad kątem gradientu, możesz zdefiniować kąt, aby zastąpić预先定义的方向（向下、向上、do prawej, do lewej, do prawego dolnego rogu itp.). Wartość 0deg równa się do do góry (do top). Wartość 90deg równa się do do prawej (do right). Wartość 180deg równa się do do dołu (do bottom).

180deg

Gramatyka

background-image: linear-gradient(angle, color-stop1, color-stop2);

Ten kąt określa kąt między linią poziomą a linią gradientu.

Poniższy przykład pokazuje, jak używać kąta w gradientach liniowych:

Przykład

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Spróbuj sam

Użycie wielu znaczników kolorów

Poniższy przykład pokazuje gradient liniowy z wieloma znacznikami kolorów (od góry do dołu):

Przykład

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Spróbuj sam

Poniższy przykład pokazuje, jak używać kolorów tęczy i tekstu do tworzenia gradientów liniowych (od lewej do prawej):

Gradient tła

Przykład

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

Spróbuj sam

Użycie przezroczystości

CSS gradienty również wspierają przezroczystość i mogą być używane do tworzenia efektów gradientowych.

Jeśli chcemy dodać przezroczystość, używamy funkcji rgba() do zdefiniowania znacznika koloru. Ostatni parametr funkcji rgba() może przyjąć wartość od 0 do 1 i określa przezroczystość koloru: 0 oznacza całkowitą przezroczystość, 1 oznacza pełny kolor (brak przezroczystości).

Poniższy przykład pokazuje gradient liniowy zaczynający się od lewej strony. Zaczyna się od pełnej przezroczystości, przechodząc w pełni na czerwony:

Przykład

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Spróbuj sam

Powtarzający się gradient liniowy

repeating-linear-gradient() Funkcja powtarzającego się gradientu liniowego:

Przykład

Powtarzająca się linia gradientu:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Spróbuj sam