Utilizza gradienti conici per creare un bordo freddo

I gradienti conici possono essere utilizzati per creare effetti interessanti, come questo bel bordo.

Questo CodePen creato da Adam Argyle, originariamente condiviso tramite questo tweet su Twitter, mostra come utilizzare un gradiente conico per creare un bordo.

.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 ha forkato il codepen di Adam e creato questo CodePen. Passa il mouse sopra l'elemento e vedrai il cambiamento di gradiente, grazie a un po' di JavaScript che aggiorna una proprietà CSS personalizzata che memorizza l'angolo di rotazione.

Questi esempi utilizzano la proprietà border-image-source. Questa proprietà imposta l'immagine di origine utilizzata per creare il bordo di un elemento. Come per le altre proprietà che accettano un valore immagine, è valido anche qualsiasi tipo di gradiente CSS.

border-image-source

Supporto dei browser

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

Origine

Gradiente conico