Grenser er avgjørende i webdesign/utvikling siden de kan trekke oppmerksomhet til brukere eller separat innhold på en nettside. Du kan bruke grensestenografien når du vil at alle fire kantene på et HTML-element skal være like.
På den annen side kan du også bruke kantfarge, kantstil og langhåndsegenskaper for kantlinjebredde for å gjøre hver kant annerledes/unikk. Når du vil spesifisere kantlinjens farge, bruker vi kantlinjefarge, bruker kantlinjebredde for å bestemme kantlinjens bredde, og spesifiserer om en kantlinje skal være stiplet, dobbel eller solid ved å bruke egenskapen kantlinjestil.
Du kan også målrette mot individuelle grenser ved å bruke egenskaper som border-block-start og border-top
En dobbel kantlinje er når to parallelle linjer omgir et HTML-element. De to linjene er atskilt med et gap som kan være gjennomsiktig eller fylt med et bilde eller en bakgrunnsfarge.
For eksempel kan vi ha en registrerings-/påloggingsknapp omgitt av en dobbel kant.
Innholdsfortegnelse
Hvorfor dobbel kantlinje?
- Separasjon: Du kan bruke en dobbel kantlinje for å øke lesbarheten og skanbarheten til en nettside ved å skille forskjellige HTML-elementer. Du kan for eksempel ha doble rammer for å skille elementer som topptekst, brødtekst og bunntekst på en nettside.
- Visuell appell: Du kan bruke forskjellige/kontrastfarger på de doble kantene for å gjøre forskjellige elementer mer visuelt tiltalende.
- Vis hierarki: Du kan tydelig skille mellom de viktige og mindre viktige elementene på en nettside ved å bruke doble rammer.
- Enkel tilpasning: Du kan lage personlige og unike design ved hjelp av doble rammer. Du kan for eksempel endre fargen eller bredden på hver linje.
- Utheving: Ved å bruke egenskapen med dobbel kantlinje kan du trekke oppmerksomhet til spesifikke lenker eller knapper på en nettside.
Du kan bruke følgende måter for å lage den doble rammen i CSS.
Bruker eiendom i kantstil
Border-style-egenskapen angir stilen til de fire kantene til et element. Vi bruker det doble nøkkelordet for å angi stilen i dette tilfellet. Når vi bruker det doble nøkkelordet, opprettes automatisk polstring mellom de to kantene.
For demonstrasjonsformål vil vi sette kantbredden til 15px. Vi vil også velge kantfargen vår til å være rød og angi kantstilen som dobbel.
HTML-kode:
<!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>
CSS-kode:
*{
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;
}
Utgangen vil være:
Bruker funksjonen linear-gradient().
Denne funksjonen setter en lineær gradient som bakgrunnsbilde. Resultatet er en gradvis overgang mellom to farger langs en rett linje. Vi bruker nøkkelordet til for å markere startpunktet til gradientlinjen. Hvis rekkefølgen er uspesifisert, er standardverdien til bunnen.
Koden nedenfor gir boksen vår en kantbredde på 7 px. Vi kan deretter spesifisere den lineære gradienten på bakgrunnsegenskapen til hver side av boksen.
HTML-kode:
<!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>
CSS-kode:
*{
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);
}
Utgangen vil være:
Bruke Outline Property
En disposisjon er en linje trukket utenfor grensen til et element. Dette oppnår den doble kanteffekten, og vi kan bruke en disposisjon og en enkel kantlinje. Vi må bruke outline-offset for å legge til et mellomrom mellom kant- og disposisjonsegenskapene.
HTML-kode:
<!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>
CSS-kode:
*{
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;
}
Den gjengitte siden vil vises som følger:
Bruke box-shadow Property
Box-shadow-egenskapen legger til en skyggeeffekt rundt rammen til et element. Du kan ha flere boks-skyggeeffekter atskilt med komma. Start med å sørge for at forskyvnings- og uskarphet-innstillingene er null, og sett deretter skyggene til riktig størrelse.
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>
CSS-kode:
*{
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;
}
Den gjengitte siden vil vises som følger:
Bruker bakgrunnsklipp Property
Egenskapen for bakgrunnsklipp bestemmer hvor langt bakgrunnen skal strekke seg innenfor et element. Utvidelsen kan være på kantboksen, polstringsboksen eller innholdsboksen.
HTML-kode:
<!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>
CSS-kode:
*{
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);
}
Den gjengitte siden vil vises som følger:
Bruke Pseudo-elementer
Pseudo-elementer, representert av ::before og ::after-velgere, lar webdesignere style deler av et HTML-dokument uten å legge til markup til koden.
Vi kan illustrere hvordan du bruker pseudo-elementer for å lage en dobbel kantlinje ved å bruke denne koden:
HTML-dokument
<!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;
}
Den gjengitte siden vil vises som følger:
Eksempler fra den virkelige verden på CSS med dobbel kantlinje
CSS-egenskapen med dobbel kant brukes på mange nettsteder. Du må kombinere eiendom med dobbel kant med andre CSS-egenskaper for å få det beste ut av det. Følgende er to eksempler på den doble grensen i aksjon;
«Kurv»-knappen på Amazon
Amazon er et av de største navnene innen e-handel. Handlevognknappen har en CSS med dobbel kant for visuell estetikk og ber brukere om å handle.
De doble rammene vises når en bruker holder musepekeren over «vogn»-knappen. Grensene er også synlige når du holder musepekeren over Amazons navigasjonsmeny.
Mailchimp-knapper
Mailchimp er en e-postmarkedsføringstjeneste som lar brukere opprette, lansere og spore kampanjer. Nettstedet bruker doble kanteffekter på forskjellige seksjoner. Registrerings- og påloggingsknappene har doble rammer for å «skape» en følelse av at det haster når brukere blar gjennom.
Kanten på undersiden av disse knappene blir tykkere når en bruker fører en markør gjennom dem.
Beste praksis ved bruk av CSS-effekt med dobbel kant
Det er lett å la seg rive med når du bruker dobbel CSS. Sluttmålet er å sikre at brukerne navigerer enkelt og legger vekt på de viktigste områdene på nettstedet ditt. Følg disse beste fremgangsmåtene:
- Bruk en konsistent stil: Hvis du bruker doble kanter, sørg for at stilen er konsistent på alle elementer. For eksempel kan doble rammer brukes på navigasjons-, handlingsfremmende og påmeldings-/påloggingsknapper. Hvis mulig, sørg for at du har samme farger og margtykkelse på tvers av elementer med doble kanter.
- Sørg for at disse doble grensene fungerer på forskjellige enheter: Vi lever i en verden der folk surfer på nettsider fra smarttelefoner, PC-er og nettbrett. Test for å sikre at doble rammer vises som forventet på forskjellige skjermstørrelser.
- Bruk dem med måte: Du kan bli fristet til å overbruke en viss CSS-effekt etter å ha oppdaget den for første gang. Dobbel CSS passer imidlertid til forskjellige elementer på en nettside. Bruk denne egenskapen kun i områder der den gir verdi til designet.
Konklusjon
Vi har fremhevet de viktigste tilnærmingene du kan bruke for å lage en dobbel kantlinje i CSS. Valget av tilnærming vil avhenge av hva du ønsker å oppnå med den doble grensen og dine preferanser. Du kan velge å holde deg til en eller en kombinasjon av flere stiler med doble kantlinjer på samme side.
Du kan sjekke ut disse CSS-ressursene for å forstå Cascading Style Sheets i detalj.