6 Wege zur Erstellung eines doppelten Rahmens in CSS
Unter
Titus Kamunya
Rahmen sind beim Webdesign/bei der Webentwicklung von entscheidender Bedeutung, da sie die Aufmerksamkeit der Benutzer auf sich ziehen oder den Inhalt einer Webseite abtrennen können. Sie können das Kürzel border verwenden, wenn Sie möchten, dass alle vier Ränder eines HTML-Elements identisch sind.
Andererseits können Sie auch die Eigenschaften Farbe des Rahmens, Stil des Rahmens und Breite des Rahmens verwenden, um jeden Rahmen unterschiedlich/einzigartig zu gestalten. Wenn Sie die Farbe des Rahmens festlegen möchten, verwenden wir border color, verwenden border width, um die Breite des Rahmens zu bestimmen, und legen mit der Eigenschaft border-style fest, ob ein Rahmen gestrichelt, doppelt oder einfarbig sein soll.
Sie können auch einzelne Rahmen mit Eigenschaften wie border-block-start und border-top festlegen
Ein doppelter Rahmen liegt vor, wenn zwei parallele Linien ein HTML-Element umgeben. Die beiden Linien sind durch eine Lücke getrennt, die transparent gelassen oder mit einem Bild oder einer Hintergrundfarbe gefüllt werden kann.
Wir können zum Beispiel eine Anmelde-/Login-Schaltfläche mit einem doppelten Rahmen versehen.
Warum ein doppelter Rahmen?
- Abgrenzung: Sie können einen doppelten Rahmen verwenden, um die Lesbarkeit und Scannbarkeit einer Webseite zu verbessern, indem Sie verschiedene HTML-Elemente voneinander trennen. So können Sie z.B. Elemente wie Kopfzeilen, Textkörper und Fußzeilen auf einer Webseite durch doppelte Rahmen voneinander trennen.
- Visuelle Attraktivität: Sie können unterschiedliche/kontrastierende Farben für die doppelten Rahmen verwenden, um verschiedene Elemente optisch ansprechender zu gestalten.
- Hierarchie anzeigen: Mit doppelten Rahmen können Sie wichtige und weniger wichtige Elemente auf einer Webseite deutlich voneinander unterscheiden.
- Erleichtert die Anpassung: Mit Hilfe von doppelten Rahmen können Sie personalisierte und einzigartige Designs erstellen. Sie können zum Beispiel die Farbe oder die Breite der einzelnen Linien ändern.
- Hervorhebung: Mit Hilfe der Eigenschaft doppelter Rahmen können Sie die Aufmerksamkeit auf bestimmte Links oder Schaltflächen auf einer Webseite lenken.
Sie können die folgenden Möglichkeiten nutzen, um den doppelten Rahmen in CSS zu erstellen.
Verwendung der Eigenschaft border-style
Die Eigenschaft border-style legt den Stil der vier Ränder eines Elements fest. Wir verwenden in diesem Fall das Schlüsselwort double, um den Stil festzulegen. Wenn wir das Schlüsselwort double verwenden, wird automatisch eine Auffüllung zwischen den beiden Rändern erstellt.
Zu Demonstrationszwecken setzen wir die Breite des Rahmens auf 15px. Außerdem wählen wir die Rahmenfarbe rot und geben den Rahmenstil double an.
HTML-Code:
<!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="./style.css" />
</head>
<body>
<div class="box"> <h2> Randeigenschaft</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;
}Die Ausgabe wird sein:
Verwendung der Funktion linear-gradient()
Diese Funktion legt einen linearen Farbverlauf als Hintergrundbild fest. Das Ergebnis ist ein allmählicher Übergang zwischen zwei Farben entlang einer geraden Linie. Wir verwenden das Schlüsselwort to, um den Startpunkt der Verlaufslinie zu markieren. Wenn die Reihenfolge nicht angegeben wird, ist der Standardwert auf unten.
Der Code unten gibt unserem Rahmen eine Breite von 7px. Anschließend können wir den linearen Farbverlauf in der Eigenschaft background für jede Seite des Kastens festlegen.
HTML-Code:
<!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="./style.css" />
</head>
<body>
<div class="box"> <h2>linear-gradient() function</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);
}Die Ausgabe wird sein:
Verwendung der Eigenschaft Outline
Ein Umriss ist eine Linie, die außerhalb des Rahmens eines Elements gezeichnet wird. Dadurch wird der Effekt eines doppelten Rahmens erzielt, und wir können einen Umriss und einen einfachen Rahmen verwenden. Wir müssen outline-offset verwenden, um einen Abstand zwischen den Eigenschaften border und outline einzufügen.
HTML-Code:
<!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="./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;
}Die gerenderte Seite wird wie folgt aussehen:
Verwendung der Eigenschaft box-shadow
Die Eigenschaft box-shadow fügt einen Schatteneffekt um den Rahmen eines Elements hinzu. Sie können mehrere Box-Shadow-Effekte haben, die durch Kommas getrennt sind. Vergewissern Sie sich zunächst, dass die Einstellungen für Offset und Blur gleich Null sind, und stellen Sie dann die Schatten auf die richtigen Größen ein.
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>Dokument</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Box Shadow Property</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 rot,
0 0 0 10px grün;
}Die gerenderte Seite wird wie folgt aussehen:
Verwendung der Eigenschaft background-clip
Die Eigenschaft background-clip legt fest, wie weit der Hintergrund innerhalb eines Elements reichen soll. Die Ausdehnung kann auf die border-box, padding-box oder content-box erfolgen.
HTML-Code:
<!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="./style.css" />
</head>
<body>
<div class="box"> <h2>Hintergrund-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);
}Die gerenderte Seite sieht dann wie folgt aus:
Pseudo-Elemente verwenden
Pseudo-Elemente, die durch ::before- und ::after-Selektoren dargestellt werden, ermöglichen es Web-Designern, Teile eines HTML-Dokuments zu gestalten, ohne dem Code Markup hinzuzufügen.
Anhand dieses Codes können wir veranschaulichen, wie Pseudo-Elemente verwendet werden, um einen doppelten Rahmen zu erstellen:
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>Dokument</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Pseudoeigenschaft</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{
Inhalt: " ";
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;
}Die gerenderte Seite sieht dann wie folgt aus:
Beispiele aus der Praxis für CSS mit doppeltem Rahmen
Die CSS-Eigenschaft double border wird in vielen Websites verwendet. Sie müssen die Eigenschaft double border mit anderen CSS-Eigenschaften kombinieren, um das Beste aus ihr herauszuholen. Im Folgenden finden Sie zwei Beispiele für den doppelten Rahmen in Aktion;
Die Schaltfläche “Warenkorb” auf Amazon
Amazon ist einer der größten Namen im Bereich des elektronischen Handels. Die Schaltfläche “Warenkorb” verfügt über einen doppelten CSS-Rahmen für die visuelle Ästhetik und fordert den Benutzer zum Handeln auf.
Die doppelten Ränder erscheinen, wenn ein Benutzer den Mauszeiger über die Schaltfläche “Einkaufswagen” bewegt. Die Rahmen sind auch sichtbar, wenn Sie den Mauszeiger über das Navigationsmenü von Amazon bewegen.
Mailchimp-Schaltflächen
Mailchimp ist ein E-Mail-Marketingdienst, mit dem Nutzer Kampagnen erstellen, starten und verfolgen können. Auf seiner Website werden in verschiedenen Bereichen doppelte Rahmeneffekte verwendet. Die Schaltflächen für die Anmeldung und das Einloggen haben doppelte Ränder, um ein Gefühl der Dringlichkeit zu erzeugen, wenn die Benutzer durch die Seite blättern.
Der Rahmen an der Unterseite dieser Schaltflächen verdickt sich, wenn der Benutzer mit dem Cursor darüberfährt.
Bewährte Verfahren bei der Verwendung des CSS-Effekts mit doppeltem Rand
Bei der Verwendung von doppeltem CSS kann man sich leicht verzetteln. Das Ziel ist es, dass die Benutzer leicht navigieren können und die wichtigsten Bereiche Ihrer Website hervorgehoben werden. Befolgen Sie diese bewährten Verfahren:
- Verwenden Sie einen einheitlichen Stil: Wenn Sie doppelte Rahmen verwenden, achten Sie darauf, dass der Stil bei allen Elementen einheitlich ist. Doppelte Rahmen können zum Beispiel für die Navigation, die Call-to-Action- und die Anmelde-/Login-Schaltflächen verwendet werden. Achten Sie nach Möglichkeit darauf, dass alle Elemente mit doppelten Rändern die gleichen Farben und Randstärken haben.
- Stellen Sie sicher, dass diese doppelten Rahmen auf verschiedenen Geräten funktionieren: Wir leben in einer Welt, in der Menschen Websites von Smartphones, PCs und Tablets aus besuchen. Testen Sie, ob die doppelten Ränder auf verschiedenen Bildschirmgrößen wie erwartet angezeigt werden.
- Verwenden Sie sie sparsam: Vielleicht sind Sie versucht, einen bestimmten CSS-Effekt übermäßig zu nutzen, nachdem Sie ihn zum ersten Mal entdeckt haben. Doppeltes CSS passt jedoch zu verschiedenen Elementen auf einer Webseite. Verwenden Sie diese Eigenschaft nur in Bereichen, in denen sie einen Mehrwert für das Design darstellt.
Fazit
Wir haben die wichtigsten Ansätze aufgezeigt, mit denen Sie einen doppelten Rahmen in CSS erstellen können. Welchen Ansatz Sie wählen, hängt davon ab, was Sie mit dem doppelten Rahmen erreichen wollen und welche Vorlieben Sie haben. Sie können sich für einen oder eine Kombination mehrerer Stile für doppelte Umrandungen auf derselben Seite entscheiden.
Sie können sich diese CSS-Ressourcen ansehen, um Cascading Style Sheets im Detail zu verstehen.
-
Titus KamunyaAutor
