Gradienty stożkowe pozwalają uzyskać ciekawe efekty, np. ładny przykład obramowania.
Ten algorytm CodePen utworzony przez Adama Argyle'a, opublikowany w tym tweetie na Twitterze, pokazuje, jak użyć gradientu stożkowego do utworzenia obramowania.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
Terry Mun kreatywnie rozwinął kodek Adama i stworzył CodePen. Gdy ustawisz kursor myszy na tym elemencie, zobaczysz zmianę gradientu – w związku z tym, że skrypt JavaScript aktualizuje niestandardową właściwość CSS, która przechowuje kąt obrotu.
W tych przykładach używana jest właściwość border-image-source. Ta właściwość określa obraz źródłowy używany do tworzenia obramowania elementu. Podobnie jak w przypadku innych właściwości, które akceptują wartość obrazu, możesz też stosować każdy typ gradientu CSS.
border-image-source
Gradient stożkowy