I bordi sono fondamentali nel web design/sviluppo in quanto possono attirare l’attenzione sugli utenti o separare i contenuti in una pagina web. Puoi usare la scorciatoia border quando vuoi che tutti e quattro i bordi su un elemento HTML siano uguali.
D’altra parte, puoi anche utilizzare le proprietà longhand del colore del bordo, dello stile del bordo e della larghezza del bordo per rendere ogni bordo diverso/unico. Quando vuoi specificare il colore del bordo, usiamo il colore del bordo, usiamo la larghezza del bordo per determinare la larghezza del bordo e specifichiamo se un bordo sarà tratteggiato, doppio o continuo usando la proprietà border-style.
Puoi anche scegliere come target singoli bordi utilizzando proprietà come border-block-start e border-top
Un doppio bordo è quando due linee parallele circondano un elemento HTML. Le due linee sono separate da uno spazio che può essere lasciato trasparente o riempito con un’immagine o un colore di sfondo.
Ad esempio, possiamo avere un pulsante di registrazione/accesso circondato da un doppio bordo.
Sommario:
Perché il doppio bordo?
- Separazione: è possibile utilizzare un doppio bordo per aumentare la leggibilità e la leggibilità di una pagina Web separando diversi elementi HTML. Ad esempio, puoi avere doppi bordi per separare elementi come intestazioni, corpo e piè di pagina in una pagina web.
- Aspetto visivo: puoi utilizzare colori diversi o contrastanti sui doppi bordi per rendere i diversi elementi visivamente più accattivanti.
- Mostra gerarchia: puoi distinguere chiaramente tra gli elementi importanti e quelli meno importanti su una pagina web utilizzando i doppi bordi.
- Facilità di personalizzazione: puoi creare design personalizzati e unici con l’aiuto di doppi bordi. Ad esempio, puoi modificare il colore o la larghezza di ciascuna linea.
- Enfasi: utilizzando la proprietà del doppio bordo, puoi attirare l’attenzione su collegamenti o pulsanti specifici su una pagina web.
Puoi utilizzare i seguenti modi per creare il doppio bordo in CSS.
Utilizzo della proprietà in stile bordo
La proprietà border-style imposta lo stile dei quattro bordi di un elemento. Usiamo la double parola chiave per impostare lo stile in questo caso. Quando usiamo la parola chiave double, viene creato un riempimento automatico tra i due bordi.
A scopo dimostrativo, imposteremo la larghezza del bordo a 15px. Sceglieremo anche il colore del bordo come rosso e indicheremo lo stile del bordo come doppio.
Codice HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
Codice CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
L’output sarà:
Utilizzo della funzione linear-gradient()
Questa funzione imposta un gradiente lineare come immagine di sfondo. Il risultato è una transizione graduale tra due colori lungo una linea retta. Usiamo la parola chiave per contrassegnare il punto iniziale della linea del gradiente. Se l’ordine non è specificato, il valore predefinito è to bottom.
Il codice qui sotto dà alla nostra scatola una larghezza del bordo di 7px. Possiamo quindi specificare il gradiente lineare sulla proprietà background di ciascun lato della scatola.
Codice HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
Codice CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
L’output sarà:
Utilizzo della proprietà Contorno
Un contorno è una linea tracciata all’esterno del bordo di un elemento. Ciò ottiene l’effetto del doppio bordo e possiamo utilizzare un contorno e un bordo singolo. Dobbiamo usare outline-offset per aggiungere uno spazio tra le proprietà border e outline.
Codice HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
Codice CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
La pagina renderizzata apparirà come segue:
Utilizzo della proprietà box-shadow
La proprietà box-shadow aggiunge un effetto ombra attorno alla cornice di un elemento. Puoi avere più effetti box-shadow separati da virgole. Inizia assicurandoti che le impostazioni di offset e sfocatura siano zero, quindi imposta le ombre sulle dimensioni corrette.
codice HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
Codice CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
La pagina renderizzata apparirà come segue:
Utilizzo della proprietà background-clip
La proprietà background-clip determina quanto deve estendersi lo sfondo all’interno di un elemento. L’estensione può trovarsi su border-box, padding-box o content-box.
Codice HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
Codice CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
La pagina renderizzata apparirà come segue:
Utilizzo di pseudo elementi
Gli pseudo-elementi, rappresentati dai selettori ::before e ::after, consentono ai web designer di modellare parti di un documento HTML senza aggiungere markup al codice.
Possiamo illustrare come utilizzare pseudo-elementi per creare un doppio bordo utilizzando questo codice:
documento HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
La pagina renderizzata apparirà come segue:
Esempi reali di CSS a doppio bordo
La proprietà CSS double border è utilizzata in molti siti web. Devi combinare la proprietà del doppio bordo con altre proprietà CSS per ottenere il meglio da essa. I seguenti sono due esempi di doppia frontiera in azione;
Il pulsante “Carrello” su Amazon
Amazon è uno dei più grandi nomi nello spazio dell’e-commerce. Il pulsante del carrello ha un CSS a doppio bordo per l’estetica visiva e richiede agli utenti di agire.
I doppi bordi vengono visualizzati quando un utente passa il mouse sopra il pulsante “carrello”. I bordi sono visibili anche quando passi con il mouse sopra il menu di navigazione di Amazon.
Pulsanti Mailchimp
Mailchimp è un servizio di email marketing che consente agli utenti di creare, lanciare e tenere traccia delle campagne. Il suo sito Web utilizza effetti a doppio bordo su varie sezioni. I pulsanti di registrazione e accesso hanno doppi bordi per “creare” un senso di urgenza mentre gli utenti navigano.
Il bordo sul lato inferiore di questi pulsanti si ispessisce man mano che un utente li attraversa con il cursore.
Best practice quando si utilizza l’effetto CSS a doppio bordo
È facile lasciarsi trasportare quando si utilizza il doppio CSS. L’obiettivo finale è garantire che gli utenti navighino facilmente e mettano in risalto le aree principali del tuo sito. Segui queste best practice:
- Usa uno stile coerente: se utilizzi i bordi doppi, assicurati che lo stile sia coerente su tutti gli elementi. Ad esempio, i doppi bordi possono essere utilizzati sui pulsanti di navigazione, invito all’azione e registrazione/accesso. Se possibile, assicurati di avere gli stessi colori e spessori dei margini tra gli elementi con bordi doppi.
- Assicurati che questi doppi confini funzionino su dispositivi diversi: Viviamo in un mondo in cui le persone navigano su siti Web da smartphone, PC e tablet. Test per garantire che i doppi bordi vengano visualizzati come previsto su schermi di varie dimensioni.
- Usali con parsimonia: potresti essere tentato di abusare di un certo effetto CSS dopo averlo scoperto per la prima volta. Tuttavia, il doppio CSS si adatta a vari elementi di una pagina web. Utilizzare questa proprietà solo nelle aree in cui aggiunge valore al design.
Conclusione
Abbiamo evidenziato i principali approcci che puoi utilizzare per creare un doppio bordo in CSS. La scelta dell’approccio dipenderà da ciò che vuoi ottenere con il doppio bordo e dalle tue preferenze. Puoi decidere di utilizzare uno o una combinazione di diversi stili a doppio bordo sulla stessa pagina.
Puoi dare un’occhiata a queste risorse CSS per comprendere in dettaglio i fogli di stile a cascata.