Gradienty stożkowe w CSS

Kascading Style Scheets (CSS) pozwala dodawać styl do stron internetowych na wiele sposobów, zapewniając ogromny zakres nieruchomości i metod. Oprócz nich CSS zapewnia również gradienty, które pozwalają wyświetlić równomierne przejście różnych kolorów.

W CSS jest w sumie trzy gradienty, które są liniowym gradientem, gradientem promieniowym i gradientem stożkowym. W tym samouczku omówimy gradienty stożkowe i dowiemy się, jak z nich korzystać.

Jaki jest stożkowy gradient w CSS

W CSS gradient stożkowy jest funkcją wbudowaną, która pozwala dodawać gradienty jako obrazy tła o przejściach kolorów wokół punktu środkowego.

Składnia

Imaga tła: Gradnt Gradient (stopień koloru, stopień koloru,…);

Musisz określić co najmniej dwa kolory, aby działało stożkowe (), jeśli nie okreścisz stopnia koloru, kolory będą równomiernie rozprzestrzeniać się wokół punktu środkowego.

Zbadajmy kilka przykładów.

Przykład 1

Poniższy przykład pokazuje działanie stożkowego gradientu () przy użyciu trzech kolorów.

Html

Tutaj po prostu tworzymy kontener DIV, aby zilustrować działanie stożkowych gradientów.

CSS

.div
Wysokość: 180px;
szerokość: 180px;
Image tła: stożkowe gradient (czerwony, zielony, niebieski);

Wysokość i szerokość div są ustawione na 180px, a my przypisujemy trzy podstawowe kolory do funkcji stożkową (). Ponieważ nie jest określony stopień kolorów, kolory te rozprzestrzenią się równomiernie w środkowym punkcie kontenera Div.

Wyjście

Stożkowy gradient z trzema kolorami.

Przykład 2

Poniższy przykład pokazuje działanie stożkowego gradientu () przy użyciu czterech kolorów.

CSS

.div
Wysokość: 180px;
szerokość: 180px;
Imaga tła: stożkowe gradient (różowy, fioletowy, zielony, żółty);

Tutaj przypisaliśmy cztery kolory do funkcji Conic-Gradient ().

Wyjście

Stożkowy gradient z czterema kolorami.

Teraz, gdy dobrze rozumiemy tę koncepcję, zbadajmy, jak dodać stopnie do stożkowych gradientów w CSS za pomocą niektórych przykładów.

Przykład 3: Jak dodać stopnie do gradientu stożkowego

Poniższy przykład pokazuje sposób, w jaki można określić stopnie wraz z kolorami gradientu stożkowego.

CSS

.div
Imaga tła: stożkowe gradient (różowy 45DEG, fioletowy 90DEG, żółty 230DEG);

W powyższym kodzie określamy trzy kolory wraz z stopniem dla każdego koloru.

Wyjście

Gradient stożkowy z określonymi stopniami kolorów.

Przykład 4: Jak zrobić wykresy kołowe za pomocą stożkowych gradientów

W celu wykonania wykresu kołowego, najpierw ustaw promień graniczny pojemnika Div na 50% wraz z pewną wysokością i szerokością.

CSS

.div
Wysokość: 180px;
szerokość: 180px;
Radiusz graniczny: 50%;
Image tła: stożkowe gradient (czerwony, zielony, niebieski);

Radiusz graniczny elementu DIV został ustawiony na 50%.

Wyjście

Z powodzeniem wygenerowano zaokrąglony kształt ciasta.

Teraz możesz utworzyć kreskę kołową, określając zakres stopni kolorów w funkcji Conic-Gradient (), jak pokazano w fragmencie kodu CSS poniżej:

CSS

.div
Wysokość: 180px;
szerokość: 180px;
Radiusz graniczny: 50%;
Imaga tła: Gradośnik stożkowy (czerwony 0Deg, czerwony 90DEG,
Zielony 90Deg, zielony 180 stopni,
Niebieski 180Deg, niebieski 270 stopni,
Żółty 270Deg, żółty 360DEG);

W powyższym kodzie określono cztery kolory, które są czerwone, zielone, niebieskie i żółte. Teraz dla każdego koloru określono stopień poziomego i pionowego.

Wyjście

Wykres kołowy o określonych stopniach kolorów.

Przykład 5: Jak dodać gradient stożkowy pod określonym kątem

W celu dodania gradientów stożkowych od określonego punktu, musisz określić ten kąt w funkcji stożkowych (). Oto jak to robisz.

CSS

.div
Wysokość: 180px;
szerokość: 180px;
Radiusz graniczny: 50%;
Imaga tła: GRADUM CONIC (od 270 stopni, czerwony, zielony, niebieski);

Tutaj określiliśmy, że kolory czerwone, zielone i niebieskie powinny być równomiernie rozłożone pod kątem 270 stopni.

Wyjście

Składnik kroku stożkowego z określonego kąta jest pomyślnie dodawany.

Przykład 6: Jak dodać gradient stożkowy z określonej pozycji

Ponieważ wiemy, że kolory w gradiencie stożkowym rozprzestrzeniają się równomiernie w środkowym punkcie, zatem określając pozycję, którą faktycznie definiujemy punkt środkowy gradientu stożkowego. Rozważ przykład, aby dowiedzieć się, jak to zrobić.

CSS

.div
Wysokość: 180px;
szerokość: 180px;
Radiusz graniczny: 50%;
Imaga tła: GRADUM CONIC (przy 30% 45%, czerwony, zielony, niebieski);

W powyższym kodzie zdefiniowaliśmy pozycję punktu środkowego na 30% 45%.

Wyjście

Dodano gradient stożkowy z określonej pozycji.

Przykład 7: Jak powtórzyć stożkowy gradient

W celu powtórzenia gradientu stożkowego użyj funkcji powtarzającej się-kółki-gradient (). Rozważ przykład poniżej.

CSS

.div
Wysokość: 180px;
szerokość: 180px;
Radiusz graniczny: 50%;
Image tła: powtarzający się klasowy gradient (różowy 10 stopni, różowy 20 stopni, żółty 20 stopni, żółty 30 stopni);

Tutaj używamy funkcji powtarzającej się-konizmu () i używania dwóch kolorów wraz z określeniem ich stopni.

Wyjście

Włożono powtarzający się gradient stożkowy

Wniosek

Gradient stożkowy w CSS to funkcja wbudowana, która pozwala dodawać gradienty z przejściami kolorów wokół punktu środkowego. Musisz określić co najmniej dwa kolory, aby zrobić gradient stożkowy. Istnieje wiele zabawnych rzeczy, które możesz zrobić z stożkowym gradientem, takich jak określanie stopni kolorowych, kąty lub pozycji. Poza tym, używając gradientów stożkowych. W tym artykule omówiliśmy gradienty stożkowe wraz z licznymi przykładami.