Lag dobbel kantlinje i CSS: 6 enkle metoder

by
Tweet
Share
Share
Pin
0 Shares

Viktigheten av grenser i webdesign

Grenser spiller en essensiell rolle i webdesign og -utvikling, da de har evnen til å lede brukernes oppmerksomhet eller å tydelig separere innholdselementer på en nettside. For å oppnå en uniform stil på alle fire sidene av et HTML-element, kan man benytte seg av grense-stenografi.

Alternativt, for å skape unike kanter, kan man spesifisere kantfarge, kantstil, og kantbredde individuelt. Egenskapen `border-color` definerer fargen på kanten, `border-width` bestemmer dens tykkelse, og `border-style` angir om kanten skal være stiplet, dobbel, eller hel.

Man kan også målrette spesifikke sider av en kant ved hjelp av egenskaper som `border-block-start` og `border-top`.

En dobbel kantlinje består av to parallelle linjer som omkranser et HTML-element, separert av et mellomrom. Dette mellomrommet kan være gjennomsiktig, fylt med et bilde eller ha en bakgrunnsfarge.

Et eksempel på bruk av dobbel kantlinje er rundt en registrerings- eller påloggingsknapp.

Hvorfor benytte dobbel kantlinje?

  • Separasjon: Doble kantlinjer kan forbedre lesbarheten og skannbarheten på nettsider ved å tydelig skille mellom forskjellige HTML-elementer, som for eksempel topptekst, hovedinnhold og bunntekst.
  • Visuell appell: Ved å bruke kontrasterende farger på de doble kantlinjene, kan man forbedre det visuelle uttrykket til forskjellige elementer.
  • Hierarki: Doble rammer kan effektivt skille mellom viktige og mindre viktige elementer på en nettside.
  • Tilpasning: Doble rammer gir mulighet for unike design, for eksempel ved å justere fargen eller tykkelsen på hver linje.
  • Utheving: Doble kantlinjer kan effektivt trekke oppmerksomhet til spesifikke lenker eller knapper på en nettside.

CSS gir ulike metoder for å generere doble rammer.

Bruk av `border-style`

Egenskapen `border-style` setter stilen for alle fire kantene til et element. Ved bruk av nøkkelordet `double`, opprettes en dobbel kantlinje. Denne metoden genererer automatisk en polstring mellom de to linjene.

For å illustrere, setter vi kantbredden til 15px, velger rød som kantfarge, og definerer stilen 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>Dokument</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> Kantlinjeegenskap </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;
}

Resultatet:

Bruk av `linear-gradient()`

Denne funksjonen definerer en lineær gradient som bakgrunnsbilde, som skaper en myk overgang mellom to farger langs en rett linje. Nøkkelordet `to` markerer gradientlinjens startpunkt. Hvis rekkefølgen ikke er spesifisert, er standardverdien bunnen.

I koden nedenfor får boksen en kantbredde på 7 px. Vi spesifiserer deretter den lineære gradienten for bakgrunnsegenskapen på 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>Dokument</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() funksjon</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); 
}

Resultatet:

Bruk av `outline`

En `outline` er en linje trukket utenfor elementets grense. Dette gir en dobbel kanteffekt ved å kombinere en `outline` med en enkel kantlinje. For å skape et mellomrom mellom kant- og `outline`-egenskapene, må `outline-offset` brukes.

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>Dokument</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 Egenskap</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;
}

Resultatet:

Bruk av `box-shadow`

Egenskapen `box-shadow` gir en skyggeeffekt rundt et element. Flere skyggeeffekter kan legges til, separert med komma. Sørg for at forskyvnings- og uskarphetsinnstillingene er null, og tilpass skyggenes størrelse.

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>Dokument</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 Egenskap</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;
}

Resultatet:

Bruk av `background-clip`

Egenskapen `background-clip` bestemmer hvor langt bakgrunnen skal strekke seg innenfor et element, enten til 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>Dokument</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 Egenskap</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);
}

Resultatet:

Bruk av Pseudo-elementer

Pseudo-elementer, som `::before` og `::after`, gjør det mulig å style spesifikke deler av et HTML-dokument uten å legge til ekstra markup.

Koden nedenfor illustrerer hvordan man bruker pseudo-elementer for å generere en dobbel kantlinje:

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>Dokument</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-kode:

*{
  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;
}

Resultatet:

Reelle eksempler på bruk av dobbel kantlinje

Dobbel kantlinje brukes på mange nettsteder. For best resultat, kombiner den med andre CSS-egenskaper. Her er to eksempler i praksis:

«Handlekurv»-knappen på Amazon

Amazon er en av de største aktørene innen e-handel. Handlekurvknappen bruker en dobbel kantlinje for visuell appell og for å oppmuntre til handling.

De doble rammene vises når brukeren holder musepekeren over handlekurvknappen. Grensene er også synlige i Amazons navigasjonsmeny.

Mailchimp-knapper

Mailchimp er en e-postmarkedsføringstjeneste som lar brukere opprette, lansere og spore kampanjer. Siden benytter doble kanter på forskjellige seksjoner. Registrerings- og påloggingsknappene har doble rammer som gir en følelse av at det haster.

Kanten på undersiden av knappene blir tykkere når brukeren holder musepekeren over dem.

Anbefalte praksiser ved bruk av dobbel kantlinje

Det er lett å la seg rive med når man bruker dobbel kantlinje i CSS. Det overordnede målet er å sørge for at brukerne enkelt navigerer og at viktige områder på nettsiden er fremhevet. Følg disse anbefalte praksisene:

  • Bruk en konsistent stil: Sørg for at stilen for doble kanter er konsistent på tvers av alle elementer der de brukes, for eksempel navigasjon, handlingsfremmende og påloggingsknapper. Benytt samme farger og margtykkelse.
  • Testing på tvers av enheter: Doble rammer må fungere korrekt på forskjellige enheter som smarttelefoner, datamaskiner og nettbrett.
  • Bruk med måte: Doble kantlinjer er effektive når de brukes på riktig sted og gir verdi til designet.

Konklusjon

Vi har sett på de viktigste metodene for å lage doble kantlinjer i CSS. Valget av metode avhenger av det ønskede resultatet og personlige preferanser. Man kan også kombinere ulike stiler av doble kantlinjer på samme side.

For en dypere forståelse av CSS, se disse ressursene.