27 stylowych przykładów gradientów tła CSS

Bycie na bieżąco z trendami i standardami projektowania stron internetowych jest bardzo ważne dla projektanta lub programisty. Obecnie gradienty tła są szeroko stosowane w nowoczesnych witrynach internetowych.

W tym artykule przeprowadzimy Cię przez różne przykłady gradientów tła przy użyciu CSS.

Gradienty tła przy użyciu CSS

Gradient CSS wyświetla płynne przejście przy użyciu co najmniej dwóch określonych kolorów. Gradient CSS zapewnia lepszą kontrolę i wydajność w stosunku do rzeczywistego pliku obrazu (gradientu). ten zdjęcie w tle Właściwość CSS służy do deklarowania gradientów jako tła.

czy potrzebujesz routera i modemu?

Istnieją trzy rodzaje gradientów: liniowy (utworzony za pomocą gradient liniowy() funkcjonować), promieniowy (utworzony za pomocą gradient promieniowy() funkcja) i stożkowy (utworzony za pomocą stożek-gradient() funkcjonować). Możesz także tworzyć powtarzające się gradienty za pomocą powtarzanie-liniowe-gradient() , powtarzalny-radial-gradient() , oraz powtarzalny-stożkowy-gradient() Funkcje.

MDN Docs definiuje te funkcje jako:

gradient liniowy() : Funkcja CSS linear-gradient() tworzy obraz składający się z progresywnego przejścia między dwoma lub więcej kolorami wzdłuż linii prostej. Jej wynikiem jest przedmiot typ danych, który jest szczególnym rodzajem .

gradient promieniowy() : Ten gradient promieniowy() Funkcja CSS tworzy obraz składający się z progresywnego przejścia między dwoma lub więcej kolorami, które promieniują od początku. Jego kształt może być kołem lub elipsą. Wynik funkcji jest obiektem typ danych, który jest szczególnym rodzajem .

stożek-gradient() : Ten stożek-gradient() Funkcja CSS tworzy obraz składający się z gradientu z przejściami kolorów obróconymi wokół punktu środkowego (zamiast promieniować od środka). Przykładowe gradienty stożkowe obejmują wykresy kołowe i koła kolorów. Wynik stożek-gradient() funkcja jest przedmiotem typ danych, który jest szczególnym rodzajem .

powtarzanie-liniowe-gradient() : Ten powtarzanie-liniowe-gradient() Funkcja CSS tworzy obraz składający się z powtarzających się gradientów liniowych. Jest podobny do gradient/linear-gradient() i przyjmuje te same argumenty, ale powtarza, że kolor zatrzymuje się w nieskończoność we wszystkich kierunkach, aby pokryć cały kontener. Wynik funkcji jest obiektem typ danych, który jest szczególnym rodzajem .

powtarzalny-radial-gradient() : Ten powtarzalny-radial-gradient() Funkcja CSS tworzy obraz składający się z powtarzających się gradientów, które promieniują od początku. Jest podobny do gradient/radial-gradient() i przyjmuje te same argumenty, ale powtarza zatrzymanie koloru w nieskończoność we wszystkich kierunkach, aby pokryć cały pojemnik, podobnie jak gradient/repeating-linear-gradient(). Wynik funkcji jest obiektem typ danych, który jest szczególnym rodzajem .

powtarzalny-stożkowy-gradient() : Ten powtarzalny-stożkowy-gradient() Funkcja CSS tworzy obraz składający się z powtarzającego się gradientu (zamiast pojedynczego gradientu) z przejściami kolorów obróconymi wokół punktu środkowego (zamiast promieniście od środka).

Oto oficjalna składnia każdego rodzaju gradientu.

Oficjalna składnia gradientów liniowych

linear-gradient(  
 [ | to ]? ,  
  
)  
 = [to left | to right] || [to top | to bottom]

Oficjalna składnia gradientów radialnych

radial-gradient(  
 [ || ]? [ at ]? ,  
  
);

Oficjalna składnia gradientów stożkowych

conic-gradient(  
 [ from ]? [ at ]?,  
  
)

Oto kilka niesamowitych przykładów gradientu tła, które mogą ulepszyć interfejs użytkownika Twojej witryny na wyższy poziom.