Crea bordi multicolori usando CSS

La proprietà CSS border ha alcune opzioni di personalizzazione, come scelte come solido, tratteggiato, punteggiato, ecc. Tuttavia, quando si tratta di colore del bordo, possiamo avere solo un colore solido per lato. Ma c'è un altro modo per ottenere una linea multicolore usando alcune proprietà in più a cui potresti non aver pensato, diamo un'occhiata.

Solido

Tratteggiato

Punteggiato

Bordi multicolori

Per ottenere un bordo multicolore come mostrato sopra, utilizzeremo la proprietà position e il selettore ::after con una sfumatura di colore. Per prima cosa creeremo un'area di intestazione usando una classe HTML <div> e poi la modelleremo con CSS per avere un bordo multicolore che la divide e il contenuto sottostante.

Crea il tuo HTML:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Ora, stiliamolo un po' con i CSS.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Ora dovresti avere qualcosa che assomiglia a questo:

Con ciò, ora possiamo aggiungere ::after al .ost-multi-header selector . Ma, prima di farlo, vorrei spiegare un po' cosa fa ::after e perché abbiamo bisogno della proprietà position per il bordo multicolore. Il ::after crea uno pseudo-elemento con qualsiasi cosa sia nella proprietà del contenuto alla fine dell'elemento selezionato. Nel nostro caso, quell'elemento è .ost-multi-header . Facciamo un "Hello World!" consacrato dal tempo! esempio per illustrare.

Aggiungi questo al tuo CSS:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; } 

Come puoi vedere, ora abbiamo un "Hello World!" elemento sotto il titolo dell'intestazione. Poiché il nostro elemento padre, .ost-multi-header , ha la proprietà position come relative , possiamo assegnare a un elemento figlio una posizione absolute . Questo ci permetterà di spostare facilmente il nostro nuovo pseudo-elemento che abbiamo creato con ::after dove vogliamo all'interno dell'elemento genitore. Lo mettiamo in basso e lo spostiamo di oltre 20px da sinistra all'interno dell'elemento genitore. Nota, se l'elemento padre non aveva la proprietà position impostata su relativa, il nostro elemento posizionato assoluto sarebbe in basso e 20px a sinistra della finestra del browser.

E il nostro bordo colorato? Modelleremo lo sfondo del nostro pseudo-elemento in modo che sia il nostro bordo multicolore usando un gradiente. I gradienti CSS possono essere lineari o radiali. Per il nostro bordo, useremo linear-gradient . Molto semplicemente, questo ci darebbe il confine che cerchiamo.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Ma rallentiamo un momento per un passo. Innanzitutto, la proprietà del content è ancora presente anche se è vuota. Questo perché, senza la proprietà content , lo pseudo-elemento non viene mai creato; quindi, ne abbiamo bisogno. Dobbiamo impostare l'altezza del nostro pseudo-elemento, la nostra altezza del bordo. Perché impostare entrambe le proprietà left e right su 0? Senza una larghezza impostata, questo allungherà lo pseudoelemento in modo che sia la larghezza del 100% all'interno dell'elemento padre. Può sembrare molto, ma le impostazioni linear-gradient stanno solo dicendo al colore di fluire da sinistra "a destra" e inseriamo i colori che vogliamo a determinate percentuali dello sfondo.

Anche se tutto ciò che stiamo facendo è scegliere quali colori avere a percentuali specifiche, è un sacco di lavoro per le gambe. Fortunatamente, ci sono risorse online gratuite che aiutano enormemente con le sfumature di colore. Ultimate CSS Gradient Generator di ColorZilla è un ottimo strumento che include più proprietà del gradiente per supportare i browser più vecchi.

Abbiamo già impostato un gradiente sullo strumento, quindi possiamo usare questo link per vedere le impostazioni esatte utilizzate in questo tutorial: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,feb123+66,2184cd+66,2184cd+100. Dovrebbe sembrare come questo:

Ci sono molte impostazioni su questo sito, ma concentriamoci su quali impostazioni avevamo bisogno per creare l'aspetto che useremo per il nostro confine. Analizziamolo:

1. Preimpostazioni : possono essere un ottimo punto di partenza!
2. Barra di scorrimento : qui puoi aggiungere, rimuovere e modificare i colori
3. Interruzioni : questa sezione consente di modificare le impostazioni per l'opacità e la posizione di ciascun colore. Fai semplicemente clic sulla casella del colore sul dispositivo di scorrimento sopra per cambiare quello che stai controllando in questa sezione.
4. Anteprima - Qui puoi vedere immediatamente i risultati delle tue modifiche.
5. Orientamento e dimensioni : consente di passare da orizzontale, verticale, diagonale o radiale. E per impostare la dimensione del gradiente.
6. Codice CSS - Il codice generato con un permalink in modo da poter sempre tornare indietro e modificare facilmente il gradiente.

Nel nostro caso non stavamo cercando un gradiente sbiadito, ma piuttosto una solida transizione piatta tra due colori, quindi tutto ciò che dobbiamo fare è impilare i due colori uno sopra l'altro dove vogliamo che ciò accada. Nel nostro esempio, abbiamo impilato i colori rispettivamente al 33% e al 66%.

Sentiti libero di giocare con le impostazioni, sapendo che ciò che vedi nell'anteprima è ciò che genererà il codice. Quando ottieni l'aspetto impostato nel modo desiderato, puoi utilizzare il pulsante "copia" nella parte inferiore destra della casella del codice.

Se hai copiato il codice come lo avevo nel link, il tuo CSS finale sarà simile a questo:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

E quel CSS produrrà questa sottolineatura multicolore che è completamente reattiva:

Eccoci! Non è stato necessario aggiungere il riempimento 6px nella parte inferiore di .ost-multi-header , ma il figlio posizionato in modo absolute non influisce più sull'altezza dell'elemento padre. Possiamo lasciarlo fluttuare sopra il nostro contenuto nell'elemento genitore o aggiungere padding per assicurarci che non copra alcun contenuto che potremmo non voler ostruire.

Ecco un collegamento a questo esercizio ricreato su CodePen affinché tutti possano modificare e imparare senza preoccupazioni.

Un'ultima nota, alcuni browser più vecchi supportano solo i due punti singoli :after selector e non il moderno standard double ::after . Puoi usare i due punti singoli se desideri essere al sicuro. Per ora funzionerà anche nei browser moderni.