Gradient CSS
W tym artykule omówimy gradienty CSS. A więc zacznijmy!
Jakie są gradienty CSS?
W CSS „gradient”Pozwala płynnie wyświetlać przejście między różnymi kolorami. Możesz także wyświetlać różne kolory jednocześnie, aby zwiększyć wygląd elementów HTML. Istnieją trzy rodzaje gradientów:
- Gradient liniowy
- Gradient promieniowy
- Gradient stożkowy
Teraz zbadamy każdy z wymienionych typów gradientu jeden po drugim! W tym celu najpierw utworzymy div w HTML, a następnie zastosujemy „gradient„Do tego.
Przykład
W HTML utworzymy kontener lub div o nazwie klasy „div”I wewnątrz„„Tag, dodaj nagłówek
.
Html
Gradient
Teraz przejdziemy do pliku CSS i użyjemy ”div„Aby uzyskać dostęp do utworzonego pojemnika w HTML i ustawić wysokość Div jako„200px". Następnie ustaw kolor nagłówka jako „RGB (1, 32, 4)”I rozmiar czcionki jako„35px". Następnie dodaj granicę wokół div, szerokość jako „5px”, Styl jako„grzbiet”, I kolor jako„RGB (0, 0, 0)".
CSS
divWysokość: 200px;
Kolor: RGB (1, 32, 4);
Rozmiar czcionki: 35px;
Border: 5px Ridge RGB (0, 0, 0);
Korzystając z powyższego kodu, uzyskano następujące dane wyjściowe:
Teraz zastosujemy rodzaje gradientu w DIV.
Jakie są liniowe gradienty CSS?
Aby wygenerować gradient liniowy, „gradient liniowy()„Funkcja CSS jest używana jako wartość„zdjęcie w tle" Lub "tło" nieruchomość. Z tą funkcją można stworzyć obraz złożony z linii różnych kolorów. Istnieją różne rodzaje gradientów liniowych, takie jak powtarzanie gradientów liniowych, gradienty od lewej do prawej i gradienty od prawej do lewej.
Składnia
Składnia „gradient liniowy()”Funkcja to:
Image tła: liniowy gradient (kierunek, kolor-1, kolor-2,…);Tutaj "kierunek„Parametr służy do ustawienia kierunku gradientu liniowego, z którego rozpocznie się przejście. Możesz dodać wiele kolorów do tej funkcji.
Jako kontynuację poprzedniego przykładu zastosujemy prosty „gradient liniowy()„Funkcja do Div.
Przykład
Tutaj użyjemy „gradient liniowy()”Funkcja w„zdjęcie w tle”Własność i dodaj kierunek jako„do góry”; Jest to domyślny kierunek funkcji. Następnie dodamy trzy kolory jako „RGB (0, 255, 213)”,„RGB (187, 255, 0)", I "RGB (51, 255, 0)„Dla naszego gradientu:
div…
Imaga tła: gradient liniowy (do góry, RGB (0, 255, 213), RGB (187, 255, 0), RGB (51, 255, 0));
Na zdjęciu poniżej widać, że generowany jest gradient liniowy:
Teraz przejdź do następnego typu, w którym zmienimy kierunek gradientu liniowego jako „w prawo".
Gradient liniowy po prawej stronie
Aby wygenerować gradient liniowy w prawo, zmienimy kierunek z „do góry" Do " w prawo”I ustaw pięć różnych kolorów jako„RGB (32, 42, 134)”,„RGB (202, 231, 255)”,„RGB (0, 255, 170)”,„RGB (85, 250, 79)", I "RGB (128, 243, 138)”:
div…
Imaga tła: liniowo gradient (po prawej, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));
W poniższym wyjściu widać, że gradient liniowy jest tworzony we właściwym kierunku:
Następnie zmienimy kierunek gradientu liniowego na „do lewej".
Gradient liniowy do lewej
Tutaj zmienimy kierunek na „do lewej". Kolory będą używane tak samo jak w powyższym przykładzie:
div…
Imaga tła: liniowo gradient (po lewej, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));
Na poniższym wyjściu widać, że gradient liniowy po lewej jest doskonale tworzony:
Możesz także stworzyć powtarzające się przejście kolorów. Więc zróbmy to!
Powtarzanie gradientów liniowych
Aby stworzyć powtarzające się gradienty liniowe, „Powtarzające się lini-liniowe gradienty ()„Zastosowana jest funkcja. W tego rodzaju gradiencie liniowym sekwencja koloru powtarza się zgodnie z daną wartością.
Składnia
Składnia „Powtarzające się lini-liniowe gradienty ()" Jest:
Imaga tła: powtarzanie lini-lini-gradientu (kolorowy kolor długości, długość koloru,…);W powyższej składni „długość koloru”Jest wykorzystywany do ustawiania odległości między pierwszym a ostatnim przystankami, które określa długość gradientu, który się powtarza.
Kontynuujmy z poprzednim przykładem.
Przykład
Tutaj ustawimy kolor tekstu jako „biały”I dodaj wartość kolorów gradientu w„Powtarzające się lini-liniowe gradienty ()" Funkcje. Oprócz każdego koloru określamy „Długość stopu koloru" Jak "0px”,„20px", I "40px". Służy do powtarzania kolorów po danej długości:
div…
kolor biały;
Imaga tła: powtarzający się liniowo-gradient (RGB (122, 12, 145) 0px, RGB (171, 76, 209) 20px, RGB (13, 0, 128) 40px);
Notatka: Bez "długość koloru„Wartość, nie można ustawić gradientu liniowego do powtórzenia.
Na zdjęciu poniżej widać, że gradient liniowy jest powtarzany:
Jakie są gradienty promieniowe CSS?
Gradient promieniowy to przejście kolorów, w których przejście zaczyna się od pochodzenia elementu. Aby stworzyć gradient promieniowy, „Radial-gradient ()„Zastosuje się funkcję, w której można określić kształt przejścia i kolorów.
Składnia
Składnia „Radial-gradient ()”Funkcja to:
Imaga tła: gradient promieniowy (kształt, kolor startowy,…, ostatni kolor);Możesz ustawić kształt „Radial-gradient ()”Funkcja jako„elipsa" Lub "koło".
Przykład
Tutaj będziemy kontynuować poprzedni przykład i użyjemy „Radial-gradient ()”Funkcja, aby ustawić kształt przejścia jako„elipsa". Następnie dodamy pięć różnych kolorów jako „RGB (17, 0, 255)”,„RGB (0, 174, 255)”,„RGB (109, 250, 255)”,„RGB (0, 190, 79)", I "RGB (2, 70, 2)”:
div…
Imaga tła: gradient promieniowy (elipsa, RGB (17, 0, 255), RGB (0, 174, 255), RGB (109, 250, 255), RGB (0, 190, 79), RGB (2, 70, 2));
Poniższy obraz wskazuje, że przejście koloru z powodzeniem rozpoczęło się od pochodzenia elementu:
Teraz przejdziemy do ostatniego rodzaju gradientu.
Jakie są stożkowe gradienty CSS?
„„gradient stożkowy ()”Funkcja służy do tworzenia gradientu stożkowego. Jest to gradient, w którym przejścia kolorów są obracane wokół punktu środkowego. Aby utworzyć gradient stożkowy, należy zdefiniować co najmniej dwa kolory.
Składnia
Składnia „gradient stożkowy ()”Funkcja to:
Image tła: gradient stożkowy (kolor, kolor,… kolor);Możesz ustawić wiele kolorów w funkcji „gradient stożkowy ()".
Przejdźmy do przykładu, w którym stworzymy gradient stożkowy.
Przykład
Teraz ustawimy kolor nagłówka jako „biały". Następnie użyj „gradient stożkowy ()”Funkcjonuj i stwórz tęczowe gradient stożkowy, dodając tęczowe kolory, takie jak„czerwony”,„Pomarańczowy”,„żółty”,„zielony”,„niebieski”,„indygo", I "fioletowy”:
divkolor biały;
Imaga tła: stożkowy (czerwony, pomarańczowy, żółty, zielony, niebieski, indygo, fiolet);
Oto wynik, który pokazuje, że gradient stożkowy jest z powodzeniem tworzony:
Otóż to! Wyjaśniliśmy szczegółowo gradient CSS.
Wniosek
CSS „gradient”Umożliwia wyświetlanie płynnych przejść między dwoma lub więcej określonymi kolorami. Istnieją trzy rodzaje funkcji gradientu używane jako wartość „tło„Własność w CSS, na przykład„gradient liniowy()”,„Radial-gradient ()", I "gradient stożkowy ()". W tym podręczniku wyjaśniliśmy gradient CSS i jego typy.