Gradient odnosi się do obrazu z efektami przejściowymi, a gradient może być używany w dowolnym miejscu, jak obrazy. Gradienty są tworzone za pomocą CSS i oferuje tworzenie gradientów o rozległych właściwościach. Na przykład gradient może być albo liniowy, promieniowy lub stożkowy. Każdy typ gradientu jest wspomagany przez odpowiednią funkcję.

W tym artykule zapewniliśmy wgląd w gradienty w CSS i oczekuje się następujących wyników uczenia się.

• Rodzaje gradientów w CSS
• funkcja liniowa ()
• funkcja promieniowa ()
• Funkcja stożkowa ()

Rodzaje gradientu w CSS

Gradient można podzielić na trzy kategorie, liniowe, promieniowe i stożkowe. Nadchodzące sekcje przedstawią podstawy każdego rodzaju gradientu i sposób, w jaki są one używane w CSS.

Gradient liniowy

Gradient liniowy można zastosować, aby uzyskać efekt przejściowy w wymiarze liniowym (jeden kierunek jednocześnie).

Jak używać funkcji lini-gradient ()

Funkcja liniowa-gradient () pozwala utworzyć gradient liniowy z różnymi efektami.

kierunek gradientu liniowego może zaakceptować następujące wartości

w prawo: używane do pokazywania gradientu od lewej do prawego kierunku

do lewej: Aby pokazać gradient od prawej do lewej

do dołu (domyślnie): w kierunku dna

do góry: pokazuje efekt gradientu od dołu do góry

Ponadto, liniowy efekt gradientu można również zastosować również po przekątnej, stosując następujące wartości kierunek parametr.

do dołu w prawo: gradient rozpocznie się od lewej górnej części i pochyli się w prawym dole

do dołu po lewej: gradient zaczyna od prawego górnego rogu w lewo dolnym

Po prawej górnej części: zaczyna się od lewego dolnego rogu w prawym górnym rogu

do lewej górnej części: od prawej dolnej do góry po lewej stronie

Przykład

Poniższy kod praktykuje użycie liniowego gradientu na elemencie HTML.

Html

Gradient liniowy

Powyższy kod tworzy a i

element wewnątrz tego div.

CSS

Powyższy kod wykorzystuje gradient liniowy z następującymi wartościami

• kierunek jest ustawiony na „od lewej do prawej"
• Wartość Color1 i Color2 jest ustawiona na fioletę i LightSeagreen odpowiednio

Wyjście

Ponieważ kierunek gradientu był od lewej do prawej, dlatego fioletowy kolor zaczyna się od lewej, podczas gdy LightSeAgreencolor rozpoczyna się od prawej.

Gradient promieniowy

Jak pokazuje jego nazwa, gradient promieniowy jest generowany z punktu środkowego obrazu. Efekt przejścia można wygenerować w kształcie okręgu lub zaćmienia.

Jak używać funkcji promieniowej ()

Gradient promieniowy można utworzyć zgodnie z podaną poniżej składnią.

Imaga tła: Gadat promieniowy (rozmiar kształtu w pozycji, Color1, Color2…);

W powyższej składni,

• kształt (domyślnie jest elipsa) może być albo elipsa lub okrąg
• rozmiar (Domyślnie jest najdalej rangi) może zaakceptować najdalej rogu/najdalszego, najbliższego/najbliższego rogu.
• gradient zacznie się od Color1 (w środku w kształcie zaćmienia lub kształcie okręgu), a następnie Color2 i tak dalej.

Przykład

Kod napisany poniżej pokazuje tworzenie gradientu promieniowego.

Html

Gradient promieniowy

CSS

Powyższe CSS tworzy promieniowy gradiennnt z color1 = ”zielony”, color2 = „żółty” i color3 = ”czerwony”.

Wyjście

Z wyjścia obserwuje się, że gradient zaczął się od zielonego koloru, otoczonego żółtym, a czerwony jest na końcu.

Gradient stożkowy

Gradient stożkowy służy do tworzenia gradientu w taki sposób, że każdy kolor zaczyna się i obracał wokół środka. Są podobne do gradientu promieniowego, ale kolory są zatrzymywane na krawędzi kształtu, podczas gdy kolor na gradientach promieniowych

Jak używać gradientu stożkowego

Gradient stożkowy można utworzyć, postępując zgodnie z poniższą składnią: