So fügen Sie einen Randfarbverlauf in CSS hinzu [ 3 Tools]

Die Eigenschaft border in CSS ermöglicht es Webdesignern, den Stil, die Breite und die Farbe der Ränder eines Elements festzulegen.

Mit einem Farbverlauf in CSS kann ein Designer einen sanften Übergang zwischen zwei oder mehr Farben erzeugen. Sie können Farbverläufe verwenden, um visuelle Effekte wie Schattierungen, Farbverläufe und Texturen auf den Elementen Ihrer Webseite zu erzeugen.

Der Randverlauf ist eine CSS-Eigenschaft, mit der der Entwickler einen Farbverlauf auf den Rand eines Elements anwenden kann.

Ein Rahmen mit Farbverlauf erzeugt einen visuellen Effekt, bei dem die Farbe des Rahmens von einer Farbe zur anderen wechselt.

Warum einen Rahmen mit Farbverlauf verwenden?

Randverläufe gehören zu den verschiedenen Styling-Funktionen, die in CSS3 eingeführt wurden. Hier sind einige der Gründe, warum Sie sie in Ihrer nächsten Webanwendung verwenden sollten:

Ein Rahmenfarbverlauf ist flexibel: Sie können mit Verlaufsrahmen komplexe und mehrschichtige Effekte erzeugen. Das ist anders als bei einfarbigen Rahmen, die starr sind. Rahmen mit Farbverläufen sind daher nützlich, wenn es um komplexe Layouts oder Formen geht, die eine nuancierte visuelle Gestaltung erfordern.
Schaffen Sie visuelle Anreize: Mit dem Randeffekt Farbverlauf können Sie Ihren Designs auffällige visuelle Effekte hinzufügen. Sie können zum Beispiel kräftige Farbkontraste verwenden, um die Aufmerksamkeit auf ein bestimmtes Element auf Ihrer Webseite zu lenken.
Bieten Sie nahtlose Integration: Bei Rahmen mit Farbverlauf können Sie den Rahmen nahtlos in den Hintergrund Ihres Elements integrieren. Ein solcher Ansatz verleiht Ihrer Webseite ein solides und kohärentes Aussehen und zeigt ein gut durchdachtes Design.

Wie man einen Rahmen mit Farbverlauf in CSS hinzufügt

Bevor wir Ihnen zeigen, wie Sie einen Rahmenverlauf hinzufügen, können wir Ihnen zeigen, wie Sie einen Rahmen zu einem HTML-Element hinzufügen.

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="style.css">

 <title>Dokument</title>

</head>

<body>

 <div class="box contains-border">

 So fügen Sie eine Umrandung hinzu!!!

 </div> 

</body>

</html&gt>

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 so aus:

Obwohl der obige Code einen Rahmen hat, ist er für das Auge nicht so ansprechend, da er leer ist. Wir haben nur einen 5px breiten, lila Rebecca-Rahmen um unser div.

Wir können unseren Rahmen mit Hilfe von Rahmenverläufen ansprechend gestalten. Es gibt verschiedene Ansätze, um einen Rahmenverlauf hinzuzufügen. Im Folgenden finden Sie einige der wichtigsten:

Verwendung von Rahmen mit Farbverläufen (linearer Farbverlauf, radialer Farbverlauf, konischer Farbverlauf)

Wir zeigen Ihnen, wie Sie Rahmen mit Farbverläufen auf drei verschiedenen Arten verwenden können:

Linearer Farbverlauf

Ein linearer Farb verlauf erzeugt einen sanften Übergang zwischen zwei oder mehr Farben in einer geraden Linie. Wir können den folgenden Code zur Demonstration verwenden:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Linearer Farbverlauf Beispiel</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="box linear-gradient">

 Linearer Farbverlauf Illustration

 </div>

</body>

</html&gt>

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 als Rahmenstil "solid" angegeben, was bedeutet, dass der Rahmen um unsere Box eine durchgezogene Linie ist. Die Breite des Rahmens in unserem Code beträgt 10px.

Der lineare Farbverlauf 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 Randbildausschnitts ist auf "1" eingestellt.

Die gerenderte Seite wird wie folgt aussehen:

Radialer Farbverlauf

Ein radialer Farbverlauf erzeugt einen kreisförmigen Farbverlauf, der von einem zentralen Punkt ausgeht und es dem Benutzer ermöglicht, von einer Farbe zu einer anderen in einem Element der Webseite zu wechseln.

Mit diesem Code können wir veranschaulichen, wie Sie einen radialen Farbverlauf hinzufügen:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Beispiel für radiale Farbverläufe</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="box radial-gradient">

 Radialer Farbverlauf Illustration

 </div>

</body>

</html&gt>

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 solid gesetzt. Außerdem haben wir unserem Rahmen eine Breite von 5px gegeben.

Der radiale Farbverlauf beginnt mit einem dunklen Grün RGB(0,143,104) und endet mit einem hellen Gelb, das durch rgb(250,224,66) gekennzeichnet ist.

Die '1' am Ende des Codes steht für die Eigenschaft border-image-repeat. Dieser Wert weist den Browser darauf hin, das Rahmenbild nur einmal am Rand des Elements zu wiederholen.

Die gerenderte Seite sieht dann so aus:

Konischer Farbverlauf

Ein konischer Farbverlauf erzeugt einen kreisförmigen Farbübergang. Bei diesem Effekt beginnt der Übergang an einem zentralen Punkt und weitet sich dann nach außen aus, so dass ein kreisförmiger Effekt entsteht.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Konischer Farbverlauf Beispiel</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="box conic-gradient">

 Konischer Farbverlauf Illustration

 </div>

</body>

</html&gt>

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(rot, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blau, rgb(0, 255, 4), rgb(255, 0, 38)) 1;

}

In diesem Code legen wir den Rahmenstil als solid fest und geben dem Rahmen eine Breite von 7,5px. Die Eigenschaft border-image legt den Farbverlauf des Rahmens fest. Es gibt sieben Farben, beginnend mit rot und endend mit rgb(255, 0, 38).

Die Zahl '1' am Ende des Codes gibt die Breite des Rahmens mit 1 Pixel an.

Die gerenderte Seite sieht dann so aus:

Randbilder verwenden

Rahmenbilder ersetzen die standardmäßigen festen Rahmen von HTML-Elementen. Rahmenbilder werden verwendet, um komplexe Designs zu erstellen, anstatt Farben zu kombinieren, um einen Rahmenverlauf zu erstellen.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Beispiel für Umrandungsbilder</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="box border-images">

 Randbilder Illustration

 </div>

</body>

</html&gt>

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 unsere Eigenschaft border-width eine Breite von 15px gegeben und den border-style auf solide gesetzt.

Die Eigenschaft border-image-slice setzt die Breite und Höhe des Rahmens auf 60% bzw. 30%.

Die gerenderte Seite wird wie folgt aussehen:

Shorthand-Eigenschaft verwenden

Eine Shorthand-Eigenschaft ermöglicht es Entwicklern, mehrere individuelle CSS-Eigenschaften mit einer einzigen Codezeile zu gestalten. 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 Shorthand-Eigenschaften</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="box shorthand">

 Shorthand Property Illustration

 </div>

</body>

</html&gt>

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 so aus:

CSS-Generatoren für Rahmenverläufe

CSS-Generatoren für Rahmenverläufe helfen Entwicklern, Elemente auf einer Webseite mit Verlaufseffekten zu versehen. Diese Generatoren ermöglichen es Ihnen, die Einstellungen anzupassen, so dass Sie nicht alles von Grund auf neu erstellen müssen. Im Folgenden finden Sie einige der Tools, die Sie verwenden können:

#1. CSS Farbverlaufsgenerator - Farben umwandeln

Mit Farben umwandeln können Sie linearen oder radialen CSS-Code für Farbverläufe mit bis zu fünf Farben generieren. Der von Ihnen generierte CSS-Verlaufscode 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 diese für den Rahmenverlauf.
Wählen Sie die Richtung des Farbverlaufs. Das Werkzeug bietet sowohl lineare als auch radiale Farbverläufe.
Mit der Funktion Farbstopp können Sie festlegen, wie der Übergang der Farben erfolgen soll.

Sobald Sie mit dem Experimentieren und der Erstellung des Codes fertig sind, können Sie ihn kopieren und auf Ihrer Website verwenden.

#2. CSS-Rahmen-Gradient-Generator-Unbenutzt-CSS

Unbenutzte-CSS hilft Entwicklern bei der Generierung von Rahmen mit Farbverläufen, 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 Arten von Farbverläufen. Sie können bei der Arbeit mit diesem Tool ganz einfach zwischen radialen und linearen Farbverläufen wechseln.
Registerkarte Vorschau. Mit diesem Werkzeug können Sie in der Vorschau sehen, wie der Randverlauf auf Ihrer Webseite aussehen wird, während Sie ihn anpassen.
Farbstopps. Mit diesem Tool können Sie ganz einfach festlegen, wie die Übergänge für verschiedene Farben aussehen sollen.
Anpassen der Rahmengröße. Mit diesem Tool können Sie die Größe des Rahmens und den Radius des Rahmens 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, die es Entwicklern ermöglichen, abgerundete Randeffekte mit Farbverlauf zu erstellen.

Sie können Folgendes erreichen;

Erstellen Sie Animationen mit Farbverläufen. Mit diesem Tool können Sie Animationen mit Farbverläufen erstellen, die zwischen zwei oder mehr Farben übergehen.
Sie können JavaScript-Code einfügen. Wenn Ihr anpassbares Element JS-Code benötigt, können Sie ihn jederzeit über das Bedienfeld finden und anpassen.
Live-Vorschau. Sie können die Änderungen an Ihrem Code sehen, während Sie ihn anpassen.

Sie können den Code kopieren und einfügen, nachdem Sie die Effekte des Randverlaufs nach Ihren Wünschen angepasst haben.

Fazit

Bei der Gestaltung Ihrer Webseiten können Sie jeden der oben genannten Ansätze verwenden, um Ihren Elementen einen Rahmen mit Farbverlauf hinzuzufügen. Welche Methode Sie wählen, hängt von Ihren Vorlieben, Ihren Fähigkeiten und der Art des Elements ab, das Sie gestalten möchten.

Sie können auch verschiedene Ansätze für verschiedene Elemente auf derselben Webseite verwenden.

Sehen Sie sich an, wie Sie einen doppelten Rahmen in CSS erstellen können, um die visuelle Attraktivität Ihrer Webseite zu verbessern.

Titus Kamunya

Autor