Głębokie zanurzenie CSS w gradienty radialne i stożkowe

Gradienty CSS to przydatna funkcja CSS, która może być wykorzystana do tworzenia ciekawych efektów UI, a nawet pomóc nam w rysowaniu czegoś bez konieczności tworzenia do tego elementów HTML. Dwa gradienty, na których chciałbym się skupić w tym artykule, to conic-gradient radial-gradient . Każdy z nich działa inaczej (gradienty stożkowe są zakrzywione, podczas gdy gradienty radialne są linią prostą).

Aby kontynuować, nie musisz wiedzieć o radial-gradient lub conic-gradient . Postaram się je dobrze wyjaśnić.

Zanurzmy się!

• Co to jest gradient promieniowy?
  • Najbardziej podstawowy przykład
  • Jak działa gradient promieniowy?
• Co to jest gradient stożkowy?
• Przypadki użycia gradientów radialnych
  • radial-gradient w sekcji bohatera
  • Efekt przerywanego wzoru
  • Efekty obrazu
• Przypadki użycia dla gradientów stożkowych
  • Wykresy kołowe
  • Tła i wzory
  • Wzorce interfejsu użytkownika
  • Animowanie gradientów stożkowych za pomocą @property
  • Wytnij rogi o niestandardowych kształtach
  • Gradienty stożkowe
  • Tła sekcji

Co to jest gradient promieniowy?

Od ich nazwy, radial-gradient s zapewnia nam możliwość rysowania elementów radialnych, takich jak okrąg lub elipsa.

Przyjrzyjmy się najbardziej podstawowej składni.

Najbardziej podstawowy przykład

W tym przykładzie mamy radial-gradient z dwoma punktami koloru. Doprowadziło to do powstania gradientu w kształcie elipsy.

 .element { background: radial-gradient(#9c27b0, #ff9800); }

Powyższe jest najbardziej podstawowym radial-gradient jaki możemy zrobić w CSS. Możesz się zastanawiać, dlaczego domyślnie jest to elipsa? Cóż, pozwól mi wyjaśnić.

Jeśli nie ma zdefiniowanej nazwy kształtu w gradiencie (okrąg lub elipsa), domyślnie będzie to elipsa w przypadku:

• Nie ma określonego rozmiaru;
• Lub są dwie wartości (dla szerokości i wysokości).

Jak działa gradient promieniowy?

Przejdę przez serię wizualizacji, które pokażą, jak działa gradient, zwiększając różne słowa kluczowe i dodatki.

Najpierw wróćmy do pierwszego przykładu.

 .element { background: radial-gradient(#9c27b0, #ff9800); }

Gdy istnieją dwa kolory bez identyfikacji kształtu, gradient będzie domyślnie przyjmowany jako elipsa, na przykład:

Elipsa wypełnia szerokość i wysokość swojego pojemnika. Wygląda na niewyraźne, ponieważ przeglądarka założyła, że ​​punkty początkowe i końcowe to odpowiednio 0% i 100% .

Oto jak przeglądarka widzi gradient:

 .element { background: radial-gradient(#9c27b0 0%, #ff9800 100%); }

Jeśli dodamy circle przed pierwszym przystankiem koloru, to wygląda to tak:

 .element { background: radial-gradient(circle, #9c27b0, #ff9800); }

Teraz, gdy już wiesz, jak okrąg i elipsa wyglądają domyślnie, przejdźmy do pozycjonowania .

Domyślnie oba są wyśrodkowane poziomo i pionowo w swoim kontenerze. Innymi słowy, przy 50% 50% :

Należy zauważyć, że pozycjonowanie odbywa się ze środka okręgu lub elipsy, więc umieszczamy okrąg w top left , co zostanie umieszczone w środku .

Przyjrzyjmy się bliżej kilku przykładom.

 .element { background: radial-gradient(circle at top left, #9c27b0, #ff9800); }

Moglibyśmy również wyśrodkować go po prawej stronie. Dodanie tylko right spowoduje wyśrodkowanie koła na right 50% :

 .element { background: radial-gradient(circle at right, #9c27b0, #ff9800); }

Oto jak to wygląda:

Co to jest gradient stożkowy?

Funkcja CSS conic-gradient() tworzy gradient, który jest obracany wokół środka elementu. Zobaczmy podstawowy przykład.

 .element { background: conic-gradient(#9c27b0, #ff9800); }

Zobacz, jak gradient zaczyna się od punktu środkowego elementu. Domyślnie obraca się od 0deg do 360 .

Zobaczmy, co się stanie, gdy dodamy wartość twardego stopu dla pierwszego koloru.

 .element { background: conic-gradient(#9c27b0 50%, #ff9800); }

Teraz pierwszy kolor wypełnia 50% elementu, natomiast drugi będzie się stopniowo pokazywał aż do 100% .

Co się stanie, jeśli zastosujemy mocny stop również na drugim kolorze? W poniższym fragmencie pierwszy kolor wypełni 50% elementu, drugi rozpocznie się od 50% do końca ( 100% ).

 .element { background: conic-gradient(#9c27b0 50%, #ff9800 0); }

Zwiększenie pierwszej wartości zatrzymania koloru spowoduje utworzenie wypełnienia pod kątem:

 .element { background: conic-gradient(#9c27b0 65%, #ff9800 0); }

Nie tylko to, ale możemy również utworzyć powtarzający się gradient za pomocą funkcji CSS repeating-conic-gradient() , jak pokazano poniżej.

 .element { background: repeating-conic-gradient( #9c27b0 0 15deg, #ff9800 15deg 30deg ); }

Powyższe fragmenty kodu wypełniają pierwszy kolor od 0deg do 15deg , następnie drugi kolor jest wypełniany od 15deg do 30deg . Przy powtórzeniu będzie to wyglądało jak na poniższym rysunku:

Przypadki użycia gradientów radialnych

Często jako tło musimy dodać ilustrację lub wzór. Oczywiście w przypadku nagłówka i/lub dodatkowego tekstu może być trudno je przeczytać.

radial-gradient w sekcji bohatera

Użycie gradientu elipsy w tym samym kolorze co tło może pomóc wyróżnić zawartość. W poniższym przykładzie zwróć uwagę, jak treść nakłada się na tło. To sprawia, że ​​trochę trudniej jest skupić się na czytaniu niż na patrzeniu na wzór:

Częstym rozwiązaniem tego problemu jest dodanie elipsy w tym samym kolorze co tło pod spodem (aby zmieszać się z nią).

Oto sekcja bohatera z elipsą (w kolorze szarym, tylko do celów demonstracyjnych):

Oto jak odzwierciedlić to w CSS:

 .hero { background-color: #fbfafa; background-image: radial-gradient(#fbfafa, rgba(0,0,0,0) center/70% 70% no-repeat, url("hero-bg.svg"); background-position: center; background-size: 70% 70%, cover; background-repeat: no-repeat; }

W ten sposób zakryliśmy wzór pod treścią, teraz o wiele łatwiej go przeczytać.

Efekt przerywanego wzoru

Aby uzyskać efekt wzoru w kropki, możemy użyć radial-gradient . Oto jak to wygląda:

Aby to osiągnąć, możemy stworzyć małe kółko, a reszta gradientu będzie przezroczysta.

Oto jak to wygląda samodzielnie:

Kiedy ten wzór się powtarza, oto jak to wygląda:

Aby odzwierciedlić to w CSS, musimy dodać szerokość i wysokość gradientu. Ponieważ gradienty domyślnie się powtarzają, spowoduje to powyższy wzór.

 .dot-pattern { --color-1: #9c27b0; --color-2: rgba(0,0,0,0); background-image: radial-gradient(circle at 2px 2px, var(--color-1) 1px, var(--color-2) 0); background-size: 15px 15px; }

Efekty obrazu

W połączeniu z mix-blend-mode gradienty radialne mogą tworzyć interesujące efekty interfejsu użytkownika dla obrazów. W poniższym przykładzie zwróć uwagę, jak okrąg jest umieszczony w lewym górnym rogu. Możemy z tego skorzystać, bawiąc się trybami mieszania, aby osiągnąć określony efekt.

 .thumb:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, #9c27b0, #ff9800); mix-blend-mode: hard-light; opacity: 0.4; }

Przypadki użycia dla gradientów stożkowych

Wykresy kołowe

Pierwszym przypadkiem użycia, jaki przychodzi mi do głowy dla gradientów stożkowych, są proste wykresy kołowe. To była rzecz, którą chcieliśmy zrobić w CSS jakiś czas temu, a teraz jest to możliwe z łatwością.

 .pie-chart { width: 100px; height: 100px; background: conic-gradient(from 0deg, #b2daf9 128deg, #2096f3 0); border-radius: 50%; }

Tła i wzory

Istnieje mnóstwo możliwości stworzenia wzoru ze stożkowymi gradientami. W tym przykładzie skupię się na wzorze szachownicy.

Oto, co dzieje się w następującym gradiencie:

• Kolor #fff pokrywa 90deg elementu;
• Potem następuje #000 do 180deg ;
• Następnie następuje #fff do 270deg ;
• Wreszcie #000 wypełnione do kąta końcowego ( 360deg ).

 .checkerboard { --size: 25px; width: 200px; height: 100px; background-image: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0); background-size: var(--size) var(--size); }

Powtórzone i kontrolowane przez background-size , będzie wyglądać tak:

Nie tylko to, ale możemy osiągnąć naprawdę ciekawe efekty, obracając niektóre wartości w inny sposób. Oto przykład:

 .element { background-image: conic-gradient(#fff 90deg, #000 0 136deg, #fff 0 313deg, #000 0); }

Wzorce interfejsu użytkownika

Czasami może być konieczne wygenerowanie losowego wzorca interfejsu użytkownika, który przybiera różne kształty. Aby to osiągnąć, możemy użyć conic-gradient . Pomysł polega na tym, że kontrolujemy rozmiar gradientu za pomocą background-size , a następnie zmieniamy kąt conic-gradient , aby uzyskać różne efekty.

Posiadamy element o szerokości i wysokości 200px . W ramach tego elementu powtórzymy tło.

 .element { --size: 20px; width: 200px; height: 200px; background-size: var(--size) var(--size); }

Aby lepiej to sobie wyobrazić, każde tło będzie miało rozmiar 20 20px zarówno dla szerokości, jak i wysokości, i będzie powtarzane w poziomie iw pionie.

Teraz każdy widoczny kwadrat będzie zawierał conic-gradient . Na razie dodam dwa niebieskie odcienie, aby lepiej zademonstrować koncepcję.

 .element { --size: 20px; width: 200px; height: 200px; background: conic-gradient(#2296F3 0.13turn, rgba(255,255,255,0) 0); background-size: var(--size) var(--size); }

Tak wygląda gradient stożkowy bez powtarzania go:

Z powtarzaniem wygląda to tak. Teraz chodzi o to, aby drugi kolor był przezroczysty, co da w efekcie trójkąt.

Mając inny kąt, możemy losowo kształtować wzór, aby uzyskać ciekawe efekty.

Animowanie gradientów stożkowych za pomocą @property

Możemy stworzyć ciekawe efekty animacji ze conic-gradient . Jednak domyślnie nie jest to możliwe. Musimy użyć definicji @property , aby zdefiniować niestandardową właściwość, której użyjemy do animacji.

 @property --conic-mask { syntax: '<percentage>'; inherits: false; initial-value: 0%; } .conic-mask { --conic-mask: 0%; -webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--conic-mask), #0000); transition: --conic-mask 1s ease-out; } .conic-mask: hover { --conic-mask: 100%; }

Wytnij rogi o niestandardowych kształtach

To jest demo autorstwa Temaniego Afifa. Pomysł polega na użyciu conic-gradient jako maski do tworzenia efektów cięcia narożników:

Gradienty stożkowe

Możemy użyć conic-gradient aby stworzyć subtelne efekty gradientowe, które mają ciemniejsze lub jaśniejsze rogi z innymi kolorami. Conic.css to niewielka biblioteka CSS autorstwa Adama Argyle'a, która zawiera wiele uroczych stożkowych gradientów.

Korzystanie z gradientów stożkowych dla tła sekcji

Widziałem to na demo udostępnione przez Scotta Kelluma. Bardzo podobał mi się sposób, w jaki działa ta technika polegająca na dodaniu częściowego koloru do stopki, a jednocześnie wygląda gładko.

 .footer { background: conic-gradient(from 0.25turn at 25% 0%, #FFD9CE, rgba(#FFD9CE, 0) 50%); }

• Sprawdź demo →

Wniosek

Jak już widzieliście, użycie funkcji radial-gradient i conic-gradient w CSS może skutkować bardzo interesującymi (i użytecznymi) interfejsami użytkownika. Jednak nie ma czerni i bieli, jeśli chodzi o użycie każdego z nich. W większości przypadków zależy to od przypadku użycia.

Mam nadzieję, że artykuł okaże się przydatny. Wielkie dzięki za przeczytanie!

Dalsza lektura na Smashing Magazine

• Głębokie zagłębienie się w object-fit i background-size w CSS
• Typowe problemy CSS dla projektów front-end
• Używanie kolorów HSL w CSS
• Problemy z przepełnieniem w CSS