Z składki obserwuje się, że funkcja lini-gradient () zależy od parametru kierunku i używanych kolorów.

Parametr kierunku określa punkt początkowy i akceptuje następujące wartości:

• „Na górę” lub „0DEG”: zaczyna się od dołu do góry
• „Po prawej” lub „90DEG”: gradient zaczyna się od lewej w kierunku prawej strony
• „Do dołu” lub „180 stopni”: od góry do dołu
• „Do lewej” lub „270 stopni”: zaczyna się od prawej strony w kierunku lewej strony

Parametry wyżej wymienione mają równoważność z kątami. Na przykład możesz zdefiniować początek gradientu również za pomocą kątów. Równoważność kąta i boków jest opisana jako: „do top” = ”0Deg”, „po prawej” = „90Deg”, „do dołu” = ”180DEG” i „do lewej” = ”270DEG”.

Przykład 1: Gradient liniowy z domyślnymi parametrami

Aby ćwiczyć gradient liniowy na poziomie podstawowym, użyliśmy następującego kodu.

Html

Gradient liniowy

CSS

W powyższym kodzie parametr kierunku funkcji liniowo-gradientu jest ustawiony na wartość domyślną. Gdzie gradient zaczynałby od zielonego koloru i przejdzie w kierunku czerwonego koloru.

Wyjście

Z wyjścia obserwuje się, że domyślny kierunek funkcji liniowo-gradientu jest od góry do dołu.

Przykład 2: Dostosowany gradient liniowy

Ten przykład pokazuje tworzenie gradientu o niestandardowych wartościach kierunku i kątów kolorów.

Html

Gradient liniowy

CSS

Powyższy kod CSS jest opisany jako,

• w prawo: pokazuje kierunek gradientu od lewej do prawej
• Zielony 10%: pokazuje, że efekt przejścia rozpocznie się od 10% całej długości gradientu
• Czerwony 50%: To pokazuje, że efekt przejścia wzrośnie do 50% długości gradientu

Wyjście

Wyjście pokazuje, że stała zieleń trwa do 10%. Przejście rozpoczyna się od 10% i trwa do 50% długości. Po 50% rozpoczyna się stały czerwony kolor, który zakończy się długością gradientu.

Przykład 3: Powtarzający się gradient liniowy

Do stworzenia powtarzalnego gradientu można użyć funkcji powtarzającej się-liniowej ().

Html

Powtarzający się gradient liniowy

CSS

Powyższy kod CSS jest opisany jako,

• Kierunek byłby od lewej do prawej, ponieważ kąt wynosi 90 stopni
• gradient zaczynałby się od czerwonego, a następnie zielonego i jasnozielonego. Te kolory będą powtarzane, aż długość gradientu zakończy się

Notatka: Musisz zdefiniować procent przynajmniej ostatnim kolorem. W przeciwnym razie wzór się nie powtórzy.

Wyjście

Powyższe wyjście pokazuje, że gradient z kolorami czerwonym, zielonym i światłem jest powtarzany kilka razy do całej długości gradientu.

Wniosek

Gradient liniowy w CSS można utworzyć za pomocą funkcji liniowej gradient () CSS. Ta funkcja akceptuje wiele parametrów, które definiują kierunek gradientu i używanego koloru. Ten artykuł zawiera opisowy przewodnik na temat gradientów liniowych w CSS. Postępując zgodnie z tym postem, będziesz w stanie uzyskać podstawową koncepcję gradientów liniowych w CSS z przykładami wykazującymi tworzenie gradientów liniowych w CSS. Ponadto można skorzystać z powtarzającej się liniowej gradienty (), aby stworzyć powtarzalny gradient.