Użyj stożkowych gradientów, aby utworzyć modne obramowanie

Gradienty stożkowe można wykorzystać do tworzenia ciekawych efektów, takich jak to ładne obramowanie.

Ten CodePen stworzony przez Adama Argyle, pierwotnie udostępniony na Twitterze za pomocą tego tweeta, 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 w sposób twórczy przejęli kodpen Adama i utworzyli CodePen. Przesuń kursor nad elementem, aby zobaczyć, jak gradient zmienia się dzięki niewielkiemu fragmentowi kodu JavaScript, który aktualizuje właściwość niestandardową CSS przechowującą kąt obrotu.

W tych przykładach użyto właściwości border-image-source. Ta właściwość ustawia obraz źródłowy służący do utworzenia obramowania elementu. Podobnie jak w przypadku innych właściwości, które akceptują wartość obrazu, dowolny typ gradientu CSS jest prawidłowy.

border-image-source

Obsługa przeglądarek

  • Chrome: 15.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

Źródło

Gradient stożkowy