Skapa Effektfulla Gränser med CSS: En Djupdykning i Dubbla Gränser
Gränser spelar en vital roll inom webbdesign och utveckling. De hjälper till att dra uppmärksamheten till specifika element eller separera olika delar av innehållet på en webbsida. Det finns flera sätt att anpassa gränser, antingen genom att använda en enhetlig inställning för alla fyra sidor eller genom att skräddarsy varje kant individuellt med hjälp av egenskaper som färg, stil och bredd.
Genom att använda `border-color` för färg, `border-width` för bredd och `border-style` för stil (t.ex. streckad, dubbel eller solid), får du fullständig kontroll över utseendet. Dessutom kan du med egenskaper som `border-block-start` och `border-top` styra enskilda gränser.
En särskilt intressant effekt är den dubbla gränsen, som består av två parallella linjer som omger ett HTML-element. Mellanrummet mellan dessa linjer kan vara transparent eller fyllt med en bild eller bakgrundsfärg. Tänk dig till exempel en registrerings- eller inloggningsknapp elegant inramad av en dubbel gräns.
Varför Välja en Dubbel Gräns?
- Förbättrad Separation: Dubbla gränser kan avsevärt förbättra läsbarheten genom att avgränsa olika element som sidhuvud, innehåll och sidfot.
- Visuell Estetik: Genom att leka med kontrasterande färger på de dubbla gränserna kan du skapa visuellt tilltalande element som fångar ögat.
- Hierarkisk Presentation: Dubbla gränser kan tydligt visa hierarkin mellan viktiga och mindre viktiga element, vilket ger användaren en bättre förståelse av sidans struktur.
- Personlig Anpassning: Skapa unika mönster genom att justera färg och bredd för varje linje i den dubbla gränsen.
- Ökad Betoning: Använd dubbla gränser för att framhäva specifika länkar eller knappar och uppmuntra användarinteraktion.
Låt oss utforska de olika CSS-teknikerna för att skapa dubbla gränser:
Använda `border-style`-egenskapen
Med `border-style` kan du enkelt ange stilen på alla fyra gränser. För en dubbel gräns använder vi nyckelordet `double`. Mellanrummet mellan de två linjerna skapas automatiskt. Låt oss demonstrera med en 15px bred gräns i rött:
HTML-kod:
<!DOCTYPE html>
<html lang="sv">
<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>Dubbla Gränser med CSS</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>Gränsegenskapen</h2> </div>
</body>
</html>
CSS-kod:
*{
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 blir en div-box med en 15px bred, röd dubbel gräns.
Använda `linear-gradient()`-funktionen
`linear-gradient()` skapar en gradvis övergång mellan två färger längs en linje, vilket kan användas för att simulera en dubbel gräns. Genom att använda nyckelordet `to` anger du startpunkten för gradientlinjen, där standard är `to bottom` om den inte specificeras. Nedan skapar vi en 7px gräns med en linjär gradient som bakgrund för varje sida av rutan.
HTML-kod:
<!DOCTYPE html>
<html lang="sv">
<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>Dubbla Gränser med Gradient</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()</h2> </div>
</body>
</html>
CSS-kod:
*{
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);
}
Denna kod skapar en 7px bred gräns med en linjär gradient för att simulera den dubbla gränsens effekt.
Använda `outline`-egenskapen
En `outline` ritas utanför elementets gräns och kan användas i kombination med en vanlig gräns för att skapa en dubbelkantseffekt. För att få ett mellanrum mellan gränsen och konturen används `outline-offset`.
HTML-kod:
<!DOCTYPE html>
<html lang="sv">
<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>Dubbla Gränser med Outline</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-egenskapen</h2> </div>
</body>
</html>
CSS-kod:
*{
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;
}
Denna kod ger en röd gräns med en blå kontur, separerad med ett mellanrum.
Använda `box-shadow`-egenskapen
Med `box-shadow` kan du lägga till skuggor runt ett elements ram. Genom att använda flera skuggor, separerade med kommatecken, kan du skapa en dubbelkantseffekt. Sätt offset och oskärpa till noll, och justera storleken på skuggorna.
HTML:
<!DOCTYPE html>
<html lang="sv">
<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>Dubbla Gränser med Skugga</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-egenskapen</h2> </div>
</body>
</html>
CSS-kod:
*{
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;
}
Denna kod skapar en dubbelkantseffekt med hjälp av röda och gröna skuggor.
Använda `background-clip`-egenskapen
Med `background-clip` bestämmer du hur långt bakgrunden ska sträcka sig. Du kan välja mellan `border-box`, `padding-box` eller `content-box`. Genom att kombinera detta med en gräns och bakgrundsfärg kan en dubbelkantseffekt skapas.
HTML-kod:
<!DOCTYPE html>
<html lang="sv">
<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>Dubbla Gränser med Bakgrundsklipp</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</h2> </div>
</body>
</html>
CSS-kod:
*{
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 blir en box med en grön gräns och en bakgrundsfärg som inte sträcker sig ut till gränsen.
Använda Pseudoelement
Pseudoelement, representerade av `::before` och `::after`, möjliggör att du designar delar av ett HTML-dokument utan att lägga till extra markering. Vi kan använda detta för att skapa en dubbelkant genom att skapa ett pseudoelement som fungerar som den inre gränsen.
HTML-dokument
<!DOCTYPE html>
<html lang="sv">
<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>Dubbla Gränser med Pseudo</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-egenskapen</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;
}
Denna kod visar hur man skapar en dubbel gräns med hjälp av ett pseudoelement.
Dubbla Gränser i Praktiken
Dubbla gränser används ofta på webbplatser. Ofta kombineras de med andra CSS-egenskaper för att maximera deras effekt. Låt oss ta en titt på några exempel:
Amazons ”Korg”-knapp
Amazon använder dubbla gränser på sin ”Korg”-knapp för att öka den visuella attraktionskraften och uppmuntra användarinteraktion. Denna effekt blir synlig när användaren hovrar över knappen eller navigeringsmenyn.
Mailchimp-knappar
Mailchimp använder dubbla gränser i olika delar av sin webbplats, särskilt på registrerings- och inloggningsknapparna för att skapa en känsla av brådska. Gränserna blir tjockare när användaren hovrar över dem.
Bästa Praxis för Dubbla Gränser
Det är lätt att överanvända dubbla gränser. Här är några riktlinjer för effektiv användning:
- Konsekvens: Använd samma stil av dubbel gräns på liknande element som navigationsknappar och registreringsformulär.
- Responsivitet: Se till att dubbla gränser fungerar bra på olika enheter och skärmstorlekar.
- Måtta: Använd dubbla gränser där de bäst förstärker designen och framhäver de viktigaste elementen.
Sammanfattning
Vi har utforskat flera metoder för att skapa dubbla gränser med CSS. Valet av teknik beror på önskad effekt och preferens. Du kan välja att hålla dig till en eller kombinera flera metoder på samma sida.
För att fördjupa dig i Cascading Style Sheets, kolla in dessa CSS-resurser.