Corsi on-line

Definire gradienti per i bordi con CSS

La proprietà CSS z-index consente di specificare la collocazione di un elemento rispetto ad un altro in caso di sovrapposizione, tecnicamente parliamo di quello che viene definito lo stack order di una componente di pagina. In sostanza una componente associata ad uno stack order con valore più elevato verrà posizionata davanti ad un’ulteriore componente con stack order inferiore (ad esempio z-index: -1) sovrapponendosi ad essa. Tale proprietà potrebbe risultare utile per collocare un testo in sovrimpressione su un’immagine, ma nel caso di questo post sarà sfruttata per la definizione di gradienti sui bordi.

CatturaSi ipotizzi per esempio di voler stilizzare i bordi di tre divbox tramite dei gradienti, richiamare queste ultime all’interno dell’HTML sarà abbastanza semplice:

<div class="square a"></div>
<div class="square b"></div>
<div class="square c"></div>

Ora, il prossimo passaggio sarà quello relativo alla definizione delle caratteristiche delle divbox che saranno tutte delle medesime dimensioni nonché dotate dello stesso colore di sfondo, posizionamento (relative) e float (left):

.square {
  margin: 60px 20px;
  width: 180px;
  height: 180px;
  position: relative;
  background: azure;
  float: left;
}

Si passi quindi alla parte riguardante lo stack order delle divbox che, nel caso specifico, avrà un valore negativo per consentire la sovrapposizione dei gradienti; si noti l’utilizzo dello pseudo-elemento :before con cui è possibile inserire in un documento un contenuto non presente in quest’ultimo; nel caso specifico :before inserisce tale contenuto prima dell’elemento che viene definito tramite il selettore.

.square:before {
  content: '';
  z-index: -1;
  position: absolute;
  width: 200px;
  height: 200px;
  top: -9px;
  left: -9px;
}

L’ultimo passaggio riguarderà la definizione dei gradienti per le singole divbox, tale procedura verrà effettuata tramite linear-gradient, argomento passato alla proprietà background-image, che accetta come parametri l’angolo tra una linea orizzontale e quella del gradiente nonché i colori che verranno utilizzati per il gradiente:

.a:before {
  background-image: linear-gradient(90deg, red, yellow, green);
}
.b:before {
  background-image: linear-gradient(90deg, blue, yellow, green);
}
.c:before {
  background-image: linear-gradient(90deg, red, orange, green);
}

L’applicazione di tali gradienti porterà alla generazione di un output simile a quello mostrato nell’immagine proposta in precedenza; come alternativa a linear-gradient è possibile utilizzare radial-gradient con il quale il gradiente viene definito a partire dal centro dell’elemento coinvolto.

Post correlati
I più letti del mese
Tematiche