6 způsobů, jak vytvořit dvojité ohraničení v CSS

autor:
Tweet
Share
Share
Pin

Při navrhování a vývoji webových stránek hrají okraje klíčovou roli. Mohou uživatele vizuálně zaujmout nebo naopak oddělit jednotlivé části obsahu. Pokud chcete, aby všechny čtyři okraje prvku HTML měly stejné vlastnosti, můžete využít zkrácený zápis.

Na druhou stranu, máte možnost upravovat barvu, styl a šířku každého okraje zvlášť, a tím dosáhnout unikátního vzhledu. Barvu okraje definujete pomocí vlastnosti `border-color`, šířku pomocí `border-width` a styl (např. čárkovaný, dvojitý nebo plný) pomocí `border-style`.

Pro individuální úpravu jednotlivých okrajů můžete použít vlastnosti jako `border-block-start` nebo `border-top`.

Dvojitý okraj se skládá ze dvou rovnoběžných linií obklopujících prvek HTML. Tyto linie jsou od sebe odděleny mezerou, která může být průhledná nebo vyplněná obrázkem či barvou pozadí.

Například tlačítko pro přihlášení může být obklopeno dvojitým okrajem.

Proč používat dvojitý okraj?

  • Oddělení prvků: Dvojitý okraj zvyšuje čitelnost a přehlednost webové stránky tím, že vizuálně odděluje různé prvky HTML, například záhlaví, tělo a zápatí.
  • Vizuální atraktivita: Použitím kontrastních barev na dvojitém okraji můžete jednotlivé prvky zvýraznit a učinit je vizuálně zajímavějšími.
  • Hierarchie: S dvojitým okrajem můžete jasně odlišit důležité prvky na webové stránce od těch méně důležitých.
  • Snadné přizpůsobení: Dvojitý okraj nabízí možnost vytvářet personalizované a jedinečné designy. Můžete měnit barvu nebo šířku každé z linií.
  • Důraz: Pomocí dvojitého okraje lze upozornit na specifické odkazy nebo tlačítka na stránce.

Nyní si ukážeme několik způsobů, jak vytvořit dvojitý okraj pomocí CSS.

Použití vlastnosti `border-style`

Vlastnost `border-style` definuje styl všech čtyř okrajů prvku. V tomto případě použijeme klíčové slovo `double`. Při použití `double` se mezi dvěma liniemi okraje automaticky vytvoří mezera.

Pro demonstraci nastavíme šířku okraje na 15 pixelů, barvu na červenou a styl na dvojitý.

HTML kód:

<html lang="cs">
  <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>Ukázka dvojitého okraje</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>Vlastnost okraje</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ýsledkem bude:

Použití funkce `linear-gradient()`

Funkce `linear-gradient()` vytváří lineární přechod jako obrázek pozadí. Výsledkem je plynulý přechod mezi dvěma barvami podél přímky. Klíčové slovo `to` slouží k určení počátečního bodu přechodové linie. Pokud není směr přechodu určen, výchozí hodnota je zdola nahoru.

Následující kód nastavuje šířku okraje pole na 7 pixelů a poté definuje lineární gradient jako pozadí pro každou stranu pole.

HTML kód:

<html lang="cs">
  <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>Ukázka s linear-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>Funkce linear-gradient()</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ýstup bude vypadat takto:

Použití vlastnosti `outline`

Obrys je čára kreslená vně okraje prvku. Pomocí obrysu a jednoduchého okraje můžeme vytvořit efekt dvojitého okraje. Pro přidání mezery mezi okrajem a obrysem je nutné použít vlastnost `outline-offset`.

HTML kód:

<html lang="cs">
  <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>Ukázka s 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>Vlastnost Outline</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;
}

Výsledný vzhled bude následující:

Použití vlastnosti `box-shadow`

Vlastnost `box-shadow` přidává stínový efekt kolem rámečku prvku. Můžeme definovat více stínových efektů oddělených čárkami. Nejprve zajistíme, aby nastavení odsazení a rozostření stínu bylo nulové a poté nastavíme stíny do správné velikosti.

HTML:

<html lang="cs">
  <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>Ukázka s box-shadow</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>Vlastnost box-shadow</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;
}

Výsledný vzhled:

Použití vlastnosti `background-clip`

Vlastnost `background-clip` určuje, do jaké míry má pozadí prvku sahat. Může se rozšiřovat až k okraji `border-box`, `padding-box` nebo `content-box`.

HTML kód:

<html lang="cs">
  <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>Ukázka s background-clip</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>Vlastnost background-clip</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);
}

Výsledný vzhled:

Použití pseudoprvků

Pseudoprvky reprezentované selektory `::before` a `::after` umožňují webovým designérům stylovat části HTML dokumentu bez nutnosti přidávat další značky do kódu.

Ukážeme si, jak lze pomocí pseudoprvků vytvořit dvojitý okraj:

HTML dokument:

<html lang="cs">
  <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>Ukázka s pseudoprvky</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>Pseudoprvky</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;
}

Výsledný vzhled:

Reálné příklady CSS s dvojitým okrajem

Dvojitý okraj se používá na mnoha webových stránkách. Pro dosažení nejlepšího výsledku je nutné kombinovat vlastnost dvojitého okraje s dalšími vlastnostmi CSS. Zde jsou dva příklady použití dvojitého okraje v praxi:

Tlačítko „Košík“ na Amazonu

Amazon je jeden z nejvýznamnějších hráčů v oblasti e-commerce. Jeho tlačítko „Košík“ používá dvojitý okraj CSS pro estetický vzhled a k povzbuzení uživatelů k akci.

Dvojité okraje se objeví, když uživatel najede myší na tlačítko „košík“. Okraje jsou také viditelné při najetí na navigační nabídku Amazonu.

Tlačítka Mailchimp

Mailchimp je služba pro e-mailový marketing, která uživatelům umožňuje vytvářet, spouštět a sledovat kampaně. Na svých webových stránkách používá efekty dvojitého okraje v různých sekcích. Tlačítka pro registraci a přihlášení mají dvojité okraje, aby vytvořily pocit naléhavosti, když uživatelé procházejí webem.

Okraj na spodní straně těchto tlačítek zesílí, když uživatel přejede myší.

Doporučené postupy při používání efektu CSS s dvojitým okrajem

Je snadné se nechat unést při používání dvojitého okraje. Klíčové je zajistit, aby se uživatelé na vašem webu snadno orientovali a aby byly zdůrazněny hlavní oblasti vašeho webu. Dodržujte následující doporučené postupy:

  • Konzistentní styl: Pokud používáte dvojitý okraj, ujistěte se, že je styl konzistentní u všech prvků. Dvojitý okraj můžete například použít u navigačních tlačítek, tlačítek s výzvou k akci a tlačítek pro přihlášení/registraci. Pokud je to možné, snažte se udržovat stejné barvy a tloušťky okrajů u všech prvků s dvojitým okrajem.
  • Funkčnost na různých zařízeních: V dnešním světě uživatelé prohlížejí webové stránky z různých zařízení, jako jsou chytré telefony, počítače a tablety. Otestujte si, zda se dvojité okraje na různých velikostech obrazovky zobrazují tak, jak očekáváte.
  • Používejte střídmě: Může vás lákat nadužívat určitý efekt CSS, když ho poprvé objevíte. Dvojitý okraj však sedí lépe k některým prvkům na webové stránce než k jiným. Používejte tuto vlastnost pouze v místech, kde má design smysl.

Závěr

Probrali jsme hlavní přístupy, které můžete použít k vytvoření dvojitého okraje v CSS. Volba přístupu záleží 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 stylu nebo kombinace několika stylů dvojitého okraje na jedné stránce.

Pro hlubší porozumění kaskádovým stylům si můžete prostudovat tyto zdroje o CSS.