Rahmen im Webdesign: Die Bedeutung des Doppelrahmens
Im Bereich des Webdesigns und der -entwicklung spielen Rahmen eine entscheidende Rolle. Sie dienen dazu, die Aufmerksamkeit der Nutzer zu lenken oder Inhalte auf einer Webseite visuell voneinander abzugrenzen. Wenn alle vier Seiten eines HTML-Elements die gleiche Rahmenstärke, -farbe und -stil aufweisen sollen, ist die Verwendung der Kurzschreibweise für Rahmen empfehlenswert.
Alternativ dazu bieten die einzelnen Eigenschaften `border-color`, `border-style` und `border-width` die Flexibilität, jeden Rahmen individuell zu gestalten. Mit `border-color` wird die Farbe des Rahmens festgelegt, `border-width` bestimmt dessen Dicke und `border-style` legt fest, ob der Rahmen beispielsweise gestrichelt, durchgezogen oder doppelt sein soll.
Für eine präzisere Steuerung können auch einzelne Rahmenlinien mit Eigenschaften wie `border-block-start` oder `border-top` gezielt angesprochen werden.
Ein doppelter Rahmen entsteht, wenn zwei parallele Linien ein HTML-Element umschließen. Diese Linien sind durch einen Zwischenraum voneinander getrennt, der transparent bleiben oder mit einem Bild oder einer Hintergrundfarbe gefüllt werden kann.
Ein praktisches Beispiel ist ein Anmelde- oder Login-Button, der von einem doppelten Rahmen umgeben ist, um ihn hervorzuheben.
Die Vorteile eines Doppelrahmens
- Visuelle Trennung: Ein doppelter Rahmen verbessert die Lesbarkeit und Übersichtlichkeit einer Webseite, indem er verschiedene HTML-Elemente voneinander abgrenzt. Beispielsweise können Kopf-, Haupt- und Fußzeilen auf diese Weise visuell strukturiert werden.
- Ästhetische Anziehungskraft: Durch den Einsatz von unterschiedlichen oder kontrastierenden Farben für die beiden Linien eines Doppelrahmens lassen sich Elemente optisch aufwerten.
- Hierarchiegestaltung: Doppelrahmen ermöglichen die klare Unterscheidung zwischen wichtigen und weniger wichtigen Inhalten auf einer Seite.
- Individuelle Anpassung: Die Möglichkeit, die Farbe oder Breite jeder Linie zu variieren, erlaubt es, personalisierte und einzigartige Designs zu kreieren.
- Hervorhebung: Bestimmte Links oder Schaltflächen können durch einen doppelten Rahmen besonders hervorgehoben und die Aufmerksamkeit der Nutzer gelenkt werden.
Im Folgenden werden verschiedene Methoden zur Erstellung von Doppelrahmen mit CSS vorgestellt.
Die `border-style`-Eigenschaft
Die `border-style`-Eigenschaft definiert den Stil der vier Rahmen eines Elements. In diesem Fall nutzen wir den Wert `double`, um einen doppelten Rahmen zu erzeugen. Der Zwischenraum zwischen den beiden Linien wird automatisch gefüllt, sobald `double` ausgewählt ist.
Für eine deutliche Darstellung setzen wir die Rahmenbreite auf 15 Pixel, wählen die Farbe Rot und den Stil `double`.
HTML-Code:
<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>Rahmen-Eigenschaft</h2> </div>
</body>
</html>
CSS-Code:
*{
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;
}
Das Ergebnis:
Die `linear-gradient()`-Funktion
Die `linear-gradient()`-Funktion erzeugt einen Farbverlauf als Hintergrundbild, der einen fließenden Übergang zwischen zwei Farben entlang einer geraden Linie darstellt. Das Schlüsselwort `to` definiert den Startpunkt der Gradientenlinie. Wenn keine Richtung angegeben ist, ist die Standardrichtung von oben nach unten.
Im folgenden Beispiel wird die Rahmenbreite auf 7 Pixel gesetzt und der lineare Farbverlauf als Hintergrund für jede Seite der Box definiert.
HTML-Code:
<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() Funktion</h2> </div>
</body>
</html>
CSS-Code:
*{
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);
}
Das Ergebnis:
Die `outline`-Eigenschaft
Ein Outline ist eine Linie, die außerhalb des Rahmens eines Elements gezeichnet wird. Mit der Kombination aus einem Outline und einem einfachen Rahmen entsteht ein doppelter Rahmen. Der Abstand zwischen Rahmen und Outline wird mit `outline-offset` festgelegt.
HTML-Code:
<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 Eigenschaft</h2> </div>
</body>
</html>
CSS-Code:
*{
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;
}
Das Ergebnis:
Die `box-shadow`-Eigenschaft
Mit der `box-shadow`-Eigenschaft wird ein Schatteneffekt um den Rahmen eines Elements erzeugt. Es können mehrere Schatteneffekte durch Kommas getrennt verwendet werden. Wichtig ist, dass die Offset- und Unschärfe-Werte initial auf Null gesetzt werden. Anschließend können die Schatten auf die gewünschte Größe angepasst werden.
HTML-Code:
<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 Eigenschaft</h2> </div>
</body>
</html>
CSS-Code:
*{
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;
}
Das Ergebnis:
Die `background-clip`-Eigenschaft
Die `background-clip`-Eigenschaft legt fest, wie weit sich der Hintergrund innerhalb eines Elements erstrecken soll. Der Hintergrund kann sich auf die `border-box`, `padding-box` oder `content-box` beziehen.
HTML-Code:
<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 Eigenschaft</h2> </div>
</body>
</html>
CSS-Code:
*{
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);
}
Das Ergebnis:
Die Verwendung von Pseudoelementen
Pseudoelemente wie `::before` und `::after` ermöglichen es Webdesignern, Teile eines HTML-Dokuments zu stylen, ohne zusätzlichen Markup hinzuzufügen.
Das folgende Codebeispiel zeigt, wie Pseudoelemente genutzt werden, um einen doppelten Rahmen zu erzeugen:
HTML-Code:
<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 Eigenschaft</h2> </div>
</body>
</html>
CSS-Code:
*{
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;
}
Das Ergebnis:
Doppelrahmen in der Praxis
Doppelte Rahmen werden auf vielen Webseiten eingesetzt. Für ein optimales Ergebnis sollten sie mit anderen CSS-Eigenschaften kombiniert werden. Hier sind zwei Beispiele für den Einsatz von Doppelrahmen:
Der „Warenkorb“-Button bei Amazon
Amazon, ein führender Name im E-Commerce, verwendet einen doppelten Rahmen um den „Warenkorb“-Button, um ihn visuell ansprechender zu gestalten und zum Handeln aufzufordern.
Der doppelte Rahmen erscheint, wenn ein Nutzer mit der Maus über den „Warenkorb“-Button fährt. Er wird auch sichtbar, wenn die Maus über das Navigationsmenü bewegt wird.
Mailchimp Buttons
Mailchimp, ein E-Mail-Marketing-Dienst, verwendet doppelte Rahmen an verschiedenen Stellen seiner Website. Die Anmelde- und Login-Buttons sind mit einem doppelten Rahmen versehen, um einen Eindruck von Dringlichkeit zu erzeugen.
Der untere Rand dieser Schaltflächen wird dicker, wenn ein Nutzer mit dem Mauszeiger darüber fährt.
Best Practices für die Verwendung von doppelten Rahmen
Bei der Verwendung von doppelten Rahmen ist es wichtig, einige bewährte Methoden zu beachten, damit die Webseite benutzerfreundlich bleibt und die Hauptbereiche hervorgehoben werden:
- Konsistenter Stil: Achten Sie auf einen einheitlichen Stil für alle Elemente mit doppelten Rahmen. Verwenden Sie möglichst gleiche Farben und Rahmendicken.
- Geräteübergreifende Funktionalität: Testen Sie die Anzeige auf verschiedenen Geräten, um sicherzustellen, dass die Rahmen wie gewünscht dargestellt werden.
- Sparsame Verwendung: Vermeiden Sie eine übermäßige Verwendung von Doppelrahmen. Setzen Sie sie nur dort ein, wo sie das Design wirklich aufwerten.
Fazit
Wir haben die wichtigsten Methoden zur Erstellung von Doppelrahmen in CSS vorgestellt. Die Wahl der Methode hängt von den gewünschten Effekten und persönlichen Vorlieben ab. Es ist auch möglich, verschiedene Arten von Doppelrahmen auf einer Seite zu kombinieren.
Für eine vertiefte Auseinandersetzung mit Cascading Style Sheets stehen zahlreiche Ressourcen online zur Verfügung, z.B. W3Schools CSS Tutorial.