Hranice jsou při návrhu/vývoji webu zásadní, protože mohou přitáhnout pozornost k uživatelům nebo oddělit obsah na webové stránce. Zkratku okraje můžete použít, když chcete, aby všechny čtyři okraje na prvku HTML byly stejné.
Na druhou stranu můžete také použít barvu ohraničení, styl ohraničení a vlastnosti šířky ohraničení, aby bylo každé ohraničení jiné/jedinečné. Když chcete určit barvu ohraničení, použijeme barvu ohraničení, šířku ohraničení určíme pomocí šířky ohraničení a pomocí vlastnosti border-style určíme, zda bude ohraničení přerušované, dvojité nebo plné.
Můžete také cílit na jednotlivé okraje pomocí vlastností, jako je border-block-start a border-top
Dvojité ohraničení je, když prvek HTML obklopují dvě rovnoběžné čáry. Tyto dva řádky jsou odděleny mezerou, která může být ponechána průhledná nebo vyplněná obrázkem nebo barvou pozadí.
Můžeme mít například tlačítko pro přihlášení/přihlášení obklopené dvojitým okrajem.
Table of Contents
Proč dvojité ohraničení?
- Oddělení: Dvojité ohraničení můžete použít ke zvýšení čitelnosti a skenovatelnosti webové stránky oddělením různých prvků HTML. Například můžete mít dvojité ohraničení pro oddělení prvků, jako jsou záhlaví, tělo a zápatí na webové stránce.
- Vizuální přitažlivost: Můžete použít různé/kontrastní barvy na dvojitém okraji, aby byly různé prvky vizuálně přitažlivější.
- Zobrazit hierarchii: Pomocí dvojitého ohraničení můžete jasně rozlišit důležité a méně důležité prvky na webové stránce.
- Snadné přizpůsobení: Pomocí dvojitého ohraničení můžete vytvářet personalizované a jedinečné návrhy. Můžete například změnit barvu nebo šířku každé čáry.
- Důraz: Pomocí vlastnosti dvojitého ohraničení můžete upozornit na konkrétní odkazy nebo tlačítka na webové stránce.
K vytvoření dvojitého okraje v CSS můžete použít následující způsoby.
Použití vlastnosti ve stylu ohraničení
Vlastnost border-style nastavuje styl čtyř ohraničení prvku. Pro nastavení stylu v tomto případě používáme klíčové slovo double. Když použijeme klíčové slovo double, vytvoří se mezi dvěma okraji automatické odsazení.
Pro demonstrační účely nastavíme šířku okraje na 15px. Také vybereme barvu ohraničení červenou a označíme styl ohraničení jako dvojitý.
HTML kód:
<!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 kód:
*{
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;
}
Výstupem bude:
Použití funkce linear-gradient().
Tato funkce nastaví lineární přechod jako obrázek na pozadí. Výsledkem je postupný přechod mezi dvěma barvami podél přímky. Pro označení počátečního bodu přechodové čáry používáme klíčové slovo to. Pokud není objednávka specifikována, výchozí hodnota je dolní.
Níže uvedený kód dává našemu poli šířku okraje 7 pixelů. Poté můžeme určit lineární gradient na vlastnosti pozadí každé strany krabice.
HTML kód:
<!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 kód:
*{
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);
}
Výstupem bude:
Použití vlastnosti Outline
Obrys je čára nakreslená vně okraje prvku. Tím dosáhneme efektu dvojitého ohraničení a můžeme použít obrys a jednoduchý okraj. K přidání mezery mezi vlastnosti ohraničení a obrysu musíme použít obrys-offset.
HTML kód:
<!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 kód:
*{
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;
}
Vykreslená stránka se zobrazí následovně:
Použití vlastnosti box-shadow
Vlastnost box-shadow přidává stínový efekt kolem rámečku prvku. Můžete mít více efektů box-shadow oddělených čárkami. Začněte tím, že zajistíte, aby nastavení odsazení a rozostření bylo nulové, a poté nastavte stíny na správnou velikost.
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 kód:
*{
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;
}
Vykreslená stránka se zobrazí následovně:
Použití vlastnosti klipu pozadí
Vlastnost klipu pozadí určuje, jak daleko má pozadí v rámci prvku sahat. Rozšíření může být na rámečku border-box, padding-box nebo content-box.
HTML kód:
<!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 kód:
*{
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);
}
Vykreslená stránka se zobrazí následovně:
Použití pseudoprvků
Pseudoprvky reprezentované selektory ::before a ::after umožňují webovým designérům stylizovat části dokumentu HTML bez přidávání značek do kódu.
Můžeme ilustrovat, jak používat pseudoprvky k vytvoření dvojitého okraje pomocí tohoto kódu:
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;
}
Vykreslená stránka se zobrazí následovně:
Reálné příklady CSS s dvojitým okrajem
Vlastnost CSS double border se používá na mnoha webech. Musíte zkombinovat vlastnost double border s dalšími vlastnostmi CSS, abyste z ní dostali to nejlepší. Následují dva příklady dvojitého ohraničení v akci;
Tlačítko „Košík“ na Amazonu
Amazon je jedním z největších jmen v oblasti e-commerce. Jeho tlačítko košíku má dvojitý okraj CSS pro vizuální estetiku a vybízí uživatele k akci.
Dvojité okraje se objeví, když uživatel najede na tlačítko ‚košík‘. Hranice jsou také viditelné, když najedete na navigační nabídku Amazonu.
Tlačítka Mailchimp
Mailchimp je e-mailová marketingová služba, která uživatelům umožňuje vytvářet, spouštět a sledovat kampaně. Jeho webové stránky používají efekty dvojitého ohraničení na různých sekcích. Tlačítka pro přihlášení a přihlášení mají dvojité okraje, aby „vytvářely“ pocit naléhavosti, když uživatelé procházejí.
Okraj na spodní straně těchto tlačítek se zesílí, když jimi uživatel prochází kurzorem.
Doporučené postupy při použití efektu CSS s dvojitým okrajem
Je snadné se nechat unést, když používáte dvojité CSS. Konečným cílem je zajistit, aby se uživatelé snadno orientovali a zdůraznili hlavní oblasti vašeho webu. Postupujte podle těchto doporučených postupů:
- Použijte konzistentní styl: Pokud používáte dvojité ohraničení, ujistěte se, že styl je konzistentní u všech prvků. Dvojité ohraničení lze například použít u tlačítek navigace, výzvy k akci a tlačítka pro přihlášení/přihlášení. Pokud je to možné, ujistěte se, že máte stejné barvy a tloušťky okrajů napříč prvky s dvojitým ohraničením.
- Zajistěte, aby tyto dvojité hranice fungovaly na různých zařízeních: Žijeme ve světě, kde lidé procházejí webové stránky ze smartphonů, počítačů a tabletů. Otestujte, zda se na různých velikostech obrazovky zobrazí dvojité okraje podle očekávání.
- Používejte je střídmě: Můžete být v pokušení nadužívat určitý efekt CSS poté, co jej poprvé objevíte. Dvojité CSS však vyhovuje různým prvkům na webové stránce. Tuto vlastnost používejte pouze v oblastech, kde přidává hodnotu designu.
Závěr
Zdůraznili jsme hlavní přístupy, které můžete použít k vytvoření dvojitého okraje v CSS. Výběr přístupu bude záviset na tom, čeho chcete dvojitým okrajem dosáhnout, a na vašich preferencích. Můžete se rozhodnout, že se budete držet jednoho nebo kombinace několika stylů dvojitého ohraničení na stejné stránce.
Chcete-li podrobně porozumět kaskádovým stylům, můžete si prohlédnout tyto zdroje CSS.