Wyjaśnione gradienty liniowe w CSS
Efekt, który tworzy płynne przejście z jednego koloru do drugiego, jest określany jako gradient. CSS pomaga tworzyć różnego rodzaju gradienty, takie jak liniowe, promieniowe i stożkowe. Gradienty liniowe wykazują efekty przejściowe w jednym kierunku, podczas gdy promieniowe i stożkowe mają nieliniowe efekty transzonalne. Ten artykuł zawiera opisowy przewodnik na temat gradientów liniowych z następującymi wynikami uczenia się:
- Jak tworzyć gradienty liniowe w CSS
- Zastosowanie funkcji liniowo-gradientu () w CSS
Jak tworzyć gradienty liniowe w CSS
Gradienty liniowe można utworzyć za pomocą podanej poniżej składni.
Image tła: gradient liniowy (kierunek, Color1Z 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.