Die Border-Eigenschaft in CSS ermöglicht es Webdesignern, den Stil, die Breite und die Farbe der Rahmen eines Elements festzulegen.
In CSS ermöglicht ein Farbverlauf einem Designer, einen fließenden Übergang zwischen zwei oder mehr Farben anzuwenden. Sie können Farbverläufe verwenden, um visuelle Effekte wie Schattierungen, Farbmischungen und Texturen auf den Elementen Ihrer Webseite zu erzeugen.
Border gradient ist eine CSS-Eigenschaft, mit der Entwickler einen Farbverlauf auf den Rahmen eines Elements anwenden können.
Ein Verlaufsrahmen erzeugt einen visuellen Effekt, bei dem sich die Farbe des Rahmens von einer Farbe zur anderen ändert.
Inhaltsverzeichnis
Warum einen Verlaufsrand verwenden?
Randverläufe gehörten zu den verschiedenen Gestaltungsfunktionen, die in CSS3 eingeführt wurden. Dies sind einige der Gründe, warum Sie es in Ihrer nächsten Web-App haben sollten:
- Ein Rahmenverlauf ist flexibel: Mit Verlaufsrahmen können Sie komplexe und mehrschichtige Effekte erstellen. Dies unterscheidet sich von einfarbigen Rändern, die starr sind. Farbverlaufsränder sind daher nützlich, wenn es um komplexe Layouts oder Formen geht, die nuancierte visuelle Designs erfordern.
- Erstellen Sie einen visuellen Reiz: Mit dem Verlaufsrandeffekt können Sie Ihren Designs auffällige visuelle Effekte hinzufügen. Sie können beispielsweise kräftige Farbkontraste verwenden, um die Aufmerksamkeit auf ein bestimmtes Element auf Ihrer Webseite zu lenken.
- Sorgen Sie für eine nahtlose Integration: Farbverlaufsrahmen ermöglichen es Ihnen, den Rahmen nahtlos in den Hintergrund Ihres Elements zu integrieren. Ein solcher Ansatz verleiht Ihrer Webseite ein solides und zusammenhängendes Aussehen und zeigt ein gut durchdachtes Design.
So fügen Sie einen Randverlauf in CSS hinzu
Bevor wir zeigen, wie man einen Rahmenverlauf hinzufügt, können wir veranschaulichen, wie man einem HTML-Element einen Rahmen hinzufügt.
Wir können diesen Code verwenden;
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"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </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 wird wie folgt angezeigt:
Obwohl der obige Code einen Rahmen hat, ist er für die Augen nicht so ansprechend, da er leer ist. Wir haben nur einen 5 Pixel breiten, violetten Rebecca-Rand um unser Div.
Unsere Bordüre können wir mit Bordürenverläufen ansprechend gestalten. Es gibt verschiedene Ansätze zum Hinzufügen eines Grenzverlaufs. Die folgenden sind einige der wichtigsten:
Verwenden von Verlaufsrahmen (linearer Verlauf, radialer Verlauf, konischer Verlauf)
Wir werden veranschaulichen, wie Verlaufsränder auf drei verschiedene Arten verwendet werden:
Linearer Verlauf
Ein linearer Verlauf erzeugt einen fließenden Übergang zwischen zwei oder mehr Farben in einer geraden Linie. Wir können den folgenden Code verwenden, um zu demonstrieren:
HTML
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</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"> Linear Gradient Illustration </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 als solide angegeben, was bedeutet, dass der Rahmen um unsere Box eine durchgezogene Linie ist. Die Rahmenbreite in unserem Code beträgt 10 Pixel.
Der lineare Verlauf beginnt mit „rgb(143, 55, 0)“ und endet mit „rgb(66, 228, 250)“. Wir haben auch einen Winkel von 45 Grad angegeben. Die Breite des Randbildsegments wird auf „1“ gesetzt.
Die gerenderte Seite wird wie folgt angezeigt:
Radialer Farbverlauf
Ein radialer Farbverlauf erstellt einen kreisförmigen Farbverlauf, der von einem zentralen Punkt ausgeht und es Benutzern ermöglicht, in einem Element einer Webseite von einer Farbe zu einer anderen überzugehen.
Wir können veranschaulichen, wie Sie mit diesem Code einen radialen Farbverlauf hinzufügen:
HTML
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</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"> Radial Gradient Illustration </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 unseres Elements auf fest eingestellt. Wir haben unserem Rand auch eine Randbreite von 5px gegeben.
Der radiale Farbverlauf beginnt mit dunkelgrünem RGB(0,143,104) und endet mit hellem Gelb, gekennzeichnet durch rgb(250,224,66).
Die „1“ am Ende des Codes steht für die Eigenschaft border-image-repeat. Dieser Wert weist den Browser an, das Rahmenbild nur einmal um den Rand des Elements herum zu wiederholen.
Die gerenderte Seite wird wie folgt angezeigt:
Konischer Gradient
Ein konischer Farbverlauf erzeugt einen kreisförmigen Farbübergang. Bei diesem Effekt beginnt der Übergang an einem zentralen Punkt und breitet sich dann nach außen aus, wodurch ein kreisförmiger Effekt entsteht.
HTML
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</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"> Conic Gradient Illustration </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 solide und geben dem Rahmen eine Breite von 7,5 Pixel. Die Eigenschaft border-image legt den Randverlauf fest. Es gibt sieben Farben, 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 wird wie folgt angezeigt:
Randbilder verwenden
Rahmenbilder ersetzen die standardmäßigen durchgehenden Rahmen von HTML-Elementen. Randbilder werden verwendet, um komplexe Designs zu erstellen, anstatt Farben zu kombinieren, um einen Randverlauf zu erstellen.
HTML
<!DOCTYPE html> <html> <head> <title>Border Images Example</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"> Border Images Illustration </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 unserer Eigenschaft border-width eine Breite von 15px gegeben und den border-style auf solid gesetzt.
Das border-image-slice setzt die Breite und Höhe des Rahmens auf 60 % bzw. 30 %.
Die gerenderte Seite wird wie folgt angezeigt:
Kurzschrift-Eigenschaft verwenden
Eine abgekürzte Eigenschaft ermöglicht es Entwicklern, mehrere einzelne CSS-Eigenschaften mit einer Codezeile zu gestalten. Für diesen Fall verwenden wir border-image, um border-image-source und border-image-slice anzugeben.
HTML
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</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"> Shorthand Property Illustration </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 wird wie folgt angezeigt:
CSS-Randverlaufsgeneratoren
CSS-Grenzverlaufsgeneratoren helfen Entwicklern dabei, Verlaufseffekte zu Elementen auf einer Webseite hinzuzufügen. Mit diesen Generatoren können Sie die Einstellungen anpassen, sodass Sie nicht alles von Grund auf neu erstellen müssen. Im Folgenden sind einige der Tools aufgeführt, die Sie verwenden können:
#1. CSS-Verlaufsgenerator – Konvertieren von Farben
Mit Farben konvertieren können Sie CSS-Code mit linearem oder radialem Farbverlauf mit bis zu fünf Farben generieren. Der von Ihnen generierte CSS-Farbverlaufscode kann als Rahmen oder Hintergrundbild eines Elements verwendet werden.
Mit diesem Generator können Sie Folgendes tun;
- Wählen Sie bis zu fünf Farben aus und verwenden Sie sie im Randverlauf.
- Wählen Sie die Richtung des Farbverlaufs. Das Werkzeug hat sowohl lineare als auch radiale Farbverläufe.
- Mit der Farbstoppfunktion können Sie entscheiden, wie der Farbübergang ablaufen soll.
Sobald Sie mit dem Experimentieren und Generieren des Codes fertig sind, können Sie ihn kopieren und auf Ihrer Website verwenden.
#2. CSS Border Gradient Generator – Unbenutztes CSS
Unused-CSS hilft Entwicklern dabei, Gradientengrenzen zu generieren, die sie auf Blockelemente anwenden können, ohne Pseudoelemente oder zusätzliche Elemente zu erstellen.
Sie können Folgendes tun;
- Wählen Sie zwischen verschiedenen Farbverlaufstypen. Sie können bei der Arbeit mit diesem Werkzeug ganz einfach zwischen radialen und linearen Farbverläufen wechseln.
- Registerkarte „Vorschau“. Mit dem Tool können Sie eine Vorschau anzeigen, wie der Randverlauf auf Ihrer Webseite angezeigt wird, während Sie ihn anpassen.
- Farbe hört auf. Mit diesem Werkzeug können Sie leicht entscheiden, wie Übergänge für verschiedene Farben auftreten.
- Anpassung der Rahmengröße. Mit diesem Tool können Sie die Randgröße und den Randradius ganz 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 verfügt über acht verschiedene Hintergrundbereiche, mit denen Entwickler abgerundete Verlaufsrandeffekte erstellen können.
Sie können Folgendes erreichen;
- Erstellen Sie Verlaufsanimationen. Mit dem Tool können Sie Verlaufsanimationen erstellen, die zwischen zwei oder mehr Farben wechseln.
- Sie können JavaScript-Code einfügen. Wenn Ihr anpassbares Element JS-Code benötigt, können Sie es jederzeit über das Bedienfeld finden und anpassen.
- Live Vorschau. Sie können die Änderungen an Ihrem Code anzeigen, während Sie ihn anpassen.
Sie können den Code kopieren und einfügen, nachdem Sie Ihre Randverlaufseffekte nach Ihren Wünschen angepasst haben.
Abschluss
Beim Entwerfen Ihrer Webseiten können Sie einen der oben genannten Ansätze verwenden, um Ihren Elementen einen Verlaufsrahmen hinzuzufügen. Die Wahl des Ansatzes kann je nach Präferenz, Können und der Art des Elements, das Sie stylen, variieren.
Sie können auch unterschiedliche Ansätze für verschiedene Elemente auf derselben Webseite verwenden.
Sehen Sie sich an, wie Sie in CSS einen doppelten Rahmen erstellen, um die visuelle Attraktivität Ihrer Webseite zu verbessern.