In CSS ermöglicht die Eigenschaft `border` Webdesignern, Aussehen, Stärke und Farbe der Rahmen um Elemente festzulegen.
Ein Farbverlauf in CSS erlaubt es, einen weichen Übergang zwischen zwei oder mehr Farben zu gestalten. Farbverläufe sind nützlich, um Effekte wie Schattierungen, Farbmischungen und Texturen auf Webseitenelementen zu kreieren.
Ein `border-gradient` ist eine CSS-Funktion, die es Entwicklern gestattet, einen Farbverlauf auf den Rahmen eines Elements anzuwenden.
Ein solcher Rahmen mit Farbverlauf erzeugt einen visuellen Effekt, bei dem sich die Rahmenfarbe stetig von einer Farbe zur anderen verändert.
Warum einen Farbverlauf für Rahmen verwenden?
Rahmen mit Farbverlauf gehören zu den gestalterischen Neuerungen, die mit CSS3 eingeführt wurden. Hier sind einige Gründe, warum sie in Ihrer nächsten Webanwendung nicht fehlen sollten:
- Ein Rahmen mit Farbverlauf ist flexibel: Sie können damit vielschichtige Effekte erzeugen. Dies unterscheidet sich von einfarbigen Rahmen, die starr wirken. Farbverlaufsrahmen sind daher vorteilhaft, wenn es um komplexe Layouts oder Formen geht, die differenzierte visuelle Designs erfordern.
- Visuelle Anziehungskraft: Mit dem Rahmen-Farbverlauf können Sie auffällige visuelle Akzente setzen. Sie können beispielsweise starke Farbkontraste nutzen, um die Aufmerksamkeit auf bestimmte Bereiche Ihrer Webseite zu lenken.
- Nahtlose Integration: Farbverlaufsrahmen erlauben es Ihnen, den Rahmen harmonisch in den Hintergrund des Elements zu integrieren. Ein solcher Ansatz verleiht Ihrer Webseite ein einheitliches Erscheinungsbild und zeigt ein durchdachtes Design.
Wie man einen Rahmen mit Farbverlauf in CSS hinzufügt
Bevor wir uns mit dem Hinzufügen von Farbverlaufsrahmen befassen, zeigen wir zuerst, wie man einem HTML-Element einen einfachen Rahmen zuweist.
Hier ist der Code dafür:
HTML
<!DOCTYPE html>
<html lang="de">
<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">
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
<title>Dokument</title>
</head>
<body>
<div class="box contains-border">
So fügen Sie einen Rahmen hinzu!
</div>
</body>
</html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
Die gerenderte Seite sieht dann wie folgt aus:
Obwohl der obige Code einen Rahmen erzeugt, wirkt er durch seine Schlichtheit wenig ansprechend. Es handelt sich lediglich um einen 5 Pixel breiten, einfarbigen Rahmen um unser Div.
Wir können den Rahmen aber durch Farbverläufe optisch ansprechender gestalten. Es gibt unterschiedliche Methoden, um Farbverläufe hinzuzufügen. Die wichtigsten werden hier vorgestellt:
Farbverlaufsrahmen verwenden (linearer, radialer, konischer Verlauf)
Wir zeigen die Verwendung von Farbverlaufsrahmen mit drei verschiedenen Methoden:
Linearer Verlauf
Ein linearer Verlauf erzeugt einen sanften Übergang zwischen zwei oder mehr Farben entlang einer geraden Linie. Der folgende Code dient als Beispiel:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Beispiel für linearen Verlauf</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box linear-gradient">
Illustration eines linearen Verlaufs
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}
Wir haben den Rahmenstil auf `solid` gesetzt, was bedeutet, dass der Rahmen um die Box als durchgehende Linie dargestellt wird. Die Rahmenbreite beträgt 10 Pixel.
Der lineare Farbverlauf startet mit `rgb(143, 55, 0)` und endet mit `rgb(66, 228, 250)`. Ein Winkel von 45 Grad wurde ebenfalls definiert. Die Breite des Rahmenbildsegments ist auf „1“ eingestellt.
Die gerenderte Seite sieht dann wie folgt aus:
Radialer Verlauf
Ein radialer Verlauf erzeugt einen kreisförmigen Übergang, der von einem Mittelpunkt ausgeht und es dem Benutzer ermöglicht, innerhalb eines Elements von einer Farbe zu einer anderen überzugehen.
Der folgende Code demonstriert, wie ein radialer Farbverlauf hinzugefügt wird:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Beispiel für radialen Verlauf</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box radial-gradient">
Illustration eines radialen Verlaufs
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
Wir haben den Rahmenstil des Elements auf fest (`solid`) gesetzt. Die Rahmenbreite beträgt 5 Pixel.
Der radiale Farbverlauf beginnt mit Dunkelgrün `rgb(0,143,104)` und geht zu einem hellen Gelb `rgb(250,224,66)` über.
Die „1“ am Ende des Codes bezieht sich auf die `border-image-repeat` Eigenschaft. Dieser Wert weist den Browser an, das Rahmenbild einmal um den Rand des Elements herum zu wiederholen.
Die gerenderte Seite sieht dann wie folgt aus:
Konischer Verlauf
Ein konischer Verlauf erzeugt einen kreisförmigen Farbübergang. Dieser Effekt beginnt in einem zentralen Punkt und breitet sich dann nach außen aus, wodurch ein kreisförmiger Eindruck entsteht.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Beispiel für konischen Verlauf</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box conic-gradient">
Illustration eines konischen Verlaufs
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}
In diesem Code setzen wir den Rahmenstil auf `solid` und geben dem Rahmen eine Breite von 7,5 Pixeln. Die `border-image`-Eigenschaft definiert den Farbverlauf. Es sind sieben Farben definiert, beginnend mit Rot und endend mit `rgb(255, 0, 38)`.
Die Ziffer ‚1‘ am Ende des Codes gibt die Rahmenbreite von 1 Pixel an.
Die gerenderte Seite sieht dann wie folgt aus:
Rahmenbilder nutzen
Rahmenbilder ersetzen die standardmäßigen durchgehenden Rahmen von HTML-Elementen. Sie werden genutzt, um anspruchsvollere Designs zu kreieren, anstatt mit Farben einen Farbverlauf zu erzeugen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Beispiel für Rahmenbilder</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box border-images">
Illustration von Rahmenbildern
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}
Wir haben der `border-width`-Eigenschaft eine Breite von 15 Pixeln gegeben und den `border-style` auf `solid` gesetzt.
`border-image-slice` setzt die Breite und Höhe des Rahmens auf 60 % bzw. 30 %.
Die gerenderte Seite sieht dann wie folgt aus:
Kurzschreibweise verwenden
Eine Kurzschreibweise ermöglicht es Entwicklern, mehrere CSS-Eigenschaften mit einer einzigen Zeile Code zu definieren. In diesem Fall verwenden wir `border-image`, um `border-image-source` und `border-image-slice` festzulegen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Beispiel für Kurzschreibweise</title>
<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">
</head>
<body>
<div class="box shorthand">
Illustration einer Kurzschreibweise
</div>
</body>
</html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}
Die gerenderte Seite sieht dann wie folgt aus:
CSS-Rahmenverlaufsgeneratoren
CSS-Rahmenverlaufsgeneratoren helfen Entwicklern dabei, Farbverlaufseffekte zu Elementen auf einer Webseite hinzuzufügen. Mit diesen Generatoren können Sie die Einstellungen anpassen, ohne alles von Grund auf neu schreiben zu müssen. Im Folgenden werden einige dieser Tools vorgestellt:
#1. CSS-Verlaufsgenerator – Farbkonvertierung
Mit Farbkonvertierung können Sie CSS-Code mit linearem oder radialem Farbverlauf aus bis zu fünf Farben generieren. Der erzeugte CSS-Farbverlaufscode kann als Rahmen oder Hintergrundbild für ein Element verwendet werden.
Dieser Generator bietet folgende Möglichkeiten:
- Auswahl von bis zu fünf Farben für den Rahmenverlauf.
- Einstellung der Richtung des Farbverlaufs. Das Tool bietet lineare und radiale Farbverläufe.
- Mit der Funktion für Farbstopps können Sie den Farbverlauf genau anpassen.
Nachdem Sie Ihre Anpassungen vorgenommen und den Code generiert haben, können Sie ihn kopieren und auf Ihrer Website einfügen.
#2. CSS Border Gradient Generator – Unused CSS
Unused-CSS hilft Entwicklern, Farbverlaufsrahmen zu erzeugen, die sie auf Blockelemente anwenden können, ohne Pseudoelemente oder zusätzliche Elemente zu benötigen.
Sie können Folgendes tun:
- Auswahl zwischen verschiedenen Verlaufsarten: Es ist einfach, zwischen radialen und linearen Farbverläufen zu wechseln.
- Vorschau: Das Tool zeigt eine Vorschau an, wie der Rahmenverlauf auf Ihrer Webseite aussieht, während Sie ihn anpassen.
- Festlegen von Farbstopps: Das Tool ermöglicht eine präzise Steuerung der Übergänge zwischen verschiedenen Farben.
- Anpassung der Rahmengröße: Die Rahmengröße und der Radius lassen sich einfach anpassen.
Sobald Sie mit dem generierten Code zufrieden sind, können Sie ihn kopieren und in Ihrem Projekt verwenden.
#3. Gradient Border Generator – Amit Sheen
Dieses Tool bietet acht unterschiedliche Hintergrundbereiche, mit denen Entwickler abgerundete Farbverlaufsrahmeneffekte erzeugen können.
Mit diesem Tool können Sie:
- Farbverlaufsanimationen erstellen: Das Tool ermöglicht das Erzeugen von animierten Farbverläufen, die zwischen zwei oder mehr Farben wechseln.
- JavaScript-Code einfügen: Sollte Ihr anpassbares Element JS-Code benötigen, können Sie ihn hier im Bedienfeld anpassen.
- Live-Vorschau: Die Änderungen an Ihrem Code werden direkt angezeigt, während Sie ihn bearbeiten.
Nachdem Sie Ihre Rahmeneffekte nach Ihren Wünschen angepasst haben, können Sie den Code kopieren und einfügen.
Fazit
Beim Gestalten Ihrer Webseiten können Sie die hier beschriebenen Methoden nutzen, um Ihren Elementen einen Rahmen mit Farbverlauf zuzuweisen. Die Wahl des Ansatzes hängt von Ihren Vorlieben, Ihren Fähigkeiten und dem Element ab, das Sie gestalten möchten.
Sie können auch unterschiedliche Methoden für verschiedene Elemente auf derselben Webseite verwenden.
Informieren Sie sich, wie Sie in CSS einen Doppelrahmen erstellen können, um die visuelle Attraktivität Ihrer Webseite weiter zu steigern.