Utilizza gradienti conici per creare un bordo freddo

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

Questo CodePen creato da Adam Argyle, condiviso originariamente tramite questo tweet su Twitter, mostra come usare una conica gradiente su 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 in modo creativo forked il codepen di Adam e l'ha creato CodePen. Sposta il mouse sopra e vedrai che il gradiente cambia, grazie a un po' di JavaScript aggiornare una proprietà personalizzata CSS che memorizza l'angolo di rotazione.

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

border-image-source

Supporto dei browser

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

Origine

Gradiente conico

Supporto dei browser

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 83.
  • Safari: 12.1.

Origine