Gradient tła CSS | Wyjaśnione

Kolor gradientu to taki, który składa się z dwóch lub więcej odcieni. W tworzeniu stron internetowych projektanci wykorzystują różne kolory w aplikacjach, aby były atrakcyjne wizualnie. Mówiąc dokładniej, gradienty CSS to unikalna klasa obrazu, która zapewnia stopniową zmianę między uzupełniającymi się kolorami. Te gradienty mają trzy główne typy: liniowe, promieniowe i stożkowe. Możesz je wykorzystać do dodawania kolorów gradientu do elementów.

Ten samouczek zawiera szczegółowy przewodnik na temat gradientów CSS.

Jakie są rodzaje gradientów CSS?

Rodzaje funkcji gradientu CSS są wymienione poniżej:

• gradient liniowy()
• gradient stożkowy ()
• Radial-gradient ()
• Powtarzanie lini-liniowo-gradienty ()
• Powtarzający się kadr-gradient ()
• Powtarzanie-promieniowanie-gradient ()

Każda nieruchomość zostanie szczegółowo omówiona z praktycznymi demonstracjami.

Metoda 1: Jak dodać gradient liniowy w CSS?

W CSS powstaje gradient liniowy za pomocą „gradient liniowy()”Funkcja. Aby go wykorzystać, sprawdź następny przykład.

Przykład 1: Dodanie prostego gradientu liniowego w CSS

W HTML, wewnątrz elementu ciała, dodaj div z wieloma klasami ”prostokąta prosta". Zrobimy pudełko z treścią klasy DIV, na której zastosujemy różne właściwości gradientu.

Html

Dwie klasy wymienione w kodzie HTML są stosowane ze stylami za pomocą CSS.

Styl „prostokąt” div

.prostokąt
Szerokość: 90%;
Wysokość: 200px;
Margines: Auto;

Tutaj:

"szerokość" I "wysokość„Własność jest określa rozmiar elementu zarówno pionowo, jak i poziomo. "margines„Właściwość generuje równą przestrzeń wokół elementu.

Styl „prosty gradient” div

.Prosty gradient
Tło: liniowy gradient (niebieski, czarny);

Prosto gradientu Div otrzymuje nieruchomość „tło”Z wartością„gradient liniowy()”Funkcja. Ta funkcja ma dwa kolory, niebieski i czarny, jako parametry.

Zapisz plik i otwórz go w przeglądarce. Wyjście zostanie wyświetlone, jak pokazano poniżej:

Przykład 2: Dodanie gradientu liniowego za pomocą kątów w CSS

Aby kontrolować kierunek kolorów, kąty można również określić w następujący sposób:

.gradient kątowy
Tło: liniowy gradient (40DEG, żółty, czerwony);

Wyjście

Przykład 3: Dodanie gradientu liniowego za pomocą więcej niż dwóch kolorów w CSS

Nie ogranicza się do używania tylko dwóch kolorów. Jako projektant możesz wykorzystać tyle kolorów, ile chcesz. Domyślnie kolory są równomiernie rozmieszczone. Na przykład:

Tło: liniowy gradient ( #181818, #8758ff, #EAF290, #5CB8E4, #F2F2F2, #182747);

Wyjście

Przykład 4: Dodanie gradientu liniowego poprzez określenie zatrzymań kolorów w wartościach procentowych w CSS

Tutaj kolory określone w przypadku wartości procentowych zaczynają się od tej określonej wartości:

Tło: Liniowy gradient (po lewej, #00f5ff 20px, #FCE700 40%, #FF6D28 60%, #EA047E 2PX);

Wyjście

Przykład 5: Dodanie gradientu liniowego dla linii twardych w CSS

Aby stworzyć twardą linię między kolorami, w tym samym miejscu wykorzystywane są dwa lub więcej kolorów. Najpierw w funkcji lini-gradient () określ kierunek, a następnie kolory z procentem:

Tło: liniowy gradient (w prawym górnym rogu, #00ABB3 45%, #3C4048 45%);

Zapewniając tę ​​samą lokalizację kolorom, otrzymujemy wynik, jak wyświetlono na poniższym obrazku:

Przykład 6: Dodanie gradientu liniowego za pomocą wskazówek kolorów w CSS

Gradient przechodzi równomiernie z koloru na kolor. Możesz określić wskazówkę kolorów, aby przesunąć punkt środkowy przejścia. Procent jest ustawiony na „50%„Aby gradient zmieni kolor z niebieskiego na czerwony:

Tło: liniowy gradient (niebieski, 50%, czerwony);

Wyjście

Metoda 2: Jak dodać gradient stożkowy w CSS?

Gradient stożkowy określa przejścia kolorów obracane wokół centrum. Został zaprojektowany przez wykorzystanie „gradient stożkowy ()”Funkcja. Aby go wykorzystać, należy zdefiniować co najmniej dwa kolory. Ponadto, domyślnie kąt to „0„Deg i pozycja jest ustawiona jako„Centrum".

Składnia

Imaga tła: GRADYNIC ([od kąta] [w pozycji,] kolor [stopień], kolor [stopień],…);

Funkcja stożkowa () otrzymuje trzy kolory jako parametry:

Imaga w tle: conic-gradient ( #FF5858, #E0144C, #9A1663);

Wyjście

Przykład 1: Dodawanie stożkowego ciasta w CSS

Funkcja Conic-Gradient () zapewnia nam obiekt do tworzenia wykresów kołowych. W tym celu konieczne jest określenie kolorów za pomocą kątów początkowych i końcowych. Mówiąc dokładniej, aby stworzyć różne sektory kolorów, wartość kąta początkowego następnego koloru musi być równa lub mniej niż wartość kąta końcowego pierwszego koloru.

Tło: stożkowe gradient (niebieski 50 stopni, czerwony 50DEG 120DEG, Orange 120Deg);

Wyjście

Przykład 2: Dodanie gradientu stożkowego za pomocą kątów w CSS

Gradient stożkowy jest okrągły, a środek elementu działa jako punkt źródłowy stopu. W stożkowym kącie gradientu jest 0 stopni do 360 stopni:

Imaga w tle: stożkowy gradient (od 70Deg, #F1D4D4, #6A097D);

Można zauważyć, że kolor obrócił się z 70DEG:

Metoda 3: Jak dodać gradient promieniowy w CSS?

Gradient promieniowy można stworzyć za pomocą „Radial-gradient ()”Funkcja. Ta funkcja wytwarza obraz, który składa się z stopniowego przejścia między wieloma kolorami, które są wykorzystywane do promieniowania z punktu środkowego. Może to być elipsa lub okrąg.

Poniższy kod pokazuje „tło„Właściwość o wartości jako funkcji promieniowej:

Tło: Gadunkowy promieniowy (Circle, RGBA (241, 151, 216, 1) 28%, RGBA (148, 187, 233, 1) 59%);

Wyjście

Przykład: Dodaj niezdecydowany promieniowy w CSS

Poniższy przykład pokazuje, jak wykonać niekomentowany gradient promieniowy.

Imaga w tle: gradient promieniowy (najdalej ranna przy 60px 90px,
#ff9f30 0%,
#B60C3C 100%);

Wyjście

Metoda 4: Jak dodać powtarzające się gradienty liniowe w CSS?

Funkcja "Powtarzanie lini-liniowo-gradienty ()”Zaprojektował obraz wzdłuż powtarzających się gradientów liniowych. Bierze parametry jako kolory, stopnie lub wartości procentowe.

Tło: Powtarzanie lini-liniowo-gradient (25DEG, #00A8CC, #142850 23.3%);

Wyjście

Metoda 5: Jak dodać powtarzające się gradienty promieniowe w CSS?

„„Powtarzanie-promieniowanie-gradient ()”Funkcja generuje obraz składający się z powtarzających się gradientów, które promieniują z centrum.

Tło: powtarzanie gradtu-promieniowania ( #313131, #CA3E47 30%);

Wyjście

Metoda 6: Jak dodać powtarzające się gradienty stożkowe w CSS?

„„Powtarzający się kadr-gradient ()”Funkcja wytwarza obraz składający się z powtarzającego się gradientu. Te przejścia kolorów obracają się wokół punktu środkowego.

Oto przykład zademonstrowania powtarzającego się gradientu stożkowego:

Tło: Powtarzający się gradient-klon,
#A21232 0DEG 15DEG,
#1A1831 10DEG 21DEG,
#Dev9c 20Deg 31Deg);

Wyjście

W ten sposób gradienty tła CSS są wykorzystywane w CSS.

Wniosek

HTML zapewnia wiele metod uczynienia dokumentów atrakcyjnych i atrakcyjnych. Metody te obejmują kolory, formatowanie tekstu, gradienty i inne. Gradienty CSS to specjalne obrazy, które wyświetlają przejścia kolorów między dwoma lub więcej kolorami. Element tła głównie używa funkcji gradientu. Ten post zapewni przewodnik na temat gradientu tła CSS.