Veröffentlicht in Web.

Animated Gradient Border Effect

Daria Nikekhina | 11.2023.

Co-Autor(en): Elda Ahmeti

Bist du bereit, deine Website mit einer coolen Animation zum Leben zu erwecken? Dann bist du hier genau richtig! In diesem Tutorial führen wir dich schrittweise durch die Erstellung eines Animated Gradient Border Effects. Dabei handelt es sich um einen Verlaufsrandeffekt, der die Farbe verändert und somit einen visuellen Effekt erzeugt.

Video: Animated Gradient Border Effect

Wie starte ich ?

Um beginnen zu können, benötigst du einen Code-Editor sowie auch einen Browser, wie zum Beispiel Visual Studio Code und Google Chrome.

Im nächsten Schritt erstellst du eine HTML-Datei mit dem Dateinamen ´index.html´. Gleichzeitig erstellst du eine CSS-Datei mit dem Namen ´style.css´. Beide Dateien müssen sich im selben Ordner befinden.

HTML-Grundgerüst:

Das HTML-Grundgerüst ist die Basis einer Website. Es besteht aus drei Hauptelementen:

Dem Tag „<html>“, der den Anfang der Seite markiert.
Dem Tag „<head>“, der den Titel, das Erscheinungsbild, Skripte und andere wichtige Informationen festlegt.
Dem „<body>“ – Teil, der eigentliche Inhalt der Website wie Text, Bilder und Links platziert.

Dadurch können Webseiten entworfen und erstellt werden, indem eine Grundstruktur eingerichtet wird, um das Erscheinungsbild und die Funktionalität der Seite anzupassen.

Nun kannst du loslegen und deinen eigenen Animated Gradient Border Effect erstellen!

HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <html lang="en"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/style.css" rel="stylesheet">
    <title>Animated gradient border effect</title>
</head>
<body>
    <div class="gradient-border">
        <h1>Welcome</h1>
    </div>
</body>
</html>

Erklärung:

<html lang=„en“>: Dieser HTML-Tag öffnet das Dokument und gibt die gewünschte Sprache für die Website an. In diesem Fall wird sie auf Englisch („en“) festgelegt

<meta charset="UTF-8">: Das Meta-Tag definiert die Zeichenkodierung der Seite als UTF-8, um sicherzustellen, dass Texte in verschiedenen Zeichen und Sprachen korrekt angezeigt werden.

<meta name="viewport" content="width=device-width, initial-scale=1.0">: Dieses Meta-Tag soll die Darstellung deiner Website auf mobilen Geräten optimieren.

<link href="/style.css" rel="stylesheet">: Der Link-Tag wird hier verwendet, um auf eine externe CSS-Datei mit dem Namen „style.css“ zu verweisen, die das Erscheinungsbild der Webseite definiert.

<title>Animated gradient border effect</title>: Der Title-Tag legt den Titel der Webseite fest, der in einer Registerkarte oder Leiste oben im Browser angezeigt wird.

<div class="gradient-border">: In diesem Abschnitt wird ein Div-Element erstellt und mit der CSS-Klasse "gradient-border" versehen, um die Darstellung und das Verhalten des Elements über CSS anzupassen.

<h1>Welcome</h1>: Dieser Code legt die Hauptüberschrift der ersten Ebene (H1) für die Seite fest. Als Titel wird der Text „Welcome“ angezeigt.

Nachdem du den HTML Code geschrieben hast, klicke auf den erstellten CSS Link ("/style.css" ). Dieser öffnet sich automatisch in Visual Studio Code und wird gespeichert.

CSS Code:

CSS ist eine ziemlich einfache Möglichkeit, etwas auf einer HTML-Seite global zu gestalten, sei es Layout, Farben, Schriftarten usw.

html, body {
  height: 100%;}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: rgb(48, 48, 48);}

Erklärung:

html, body {

height: 100%;}: Die HTML- und Body-Elemente wird so gestaltet, dass sie den gesamten vertikalen Platz einnehmt.

body {

display: flex;: Die Informationen im Body werden in einem Flex-Container (Viereck) dargestellt. Dadurch können die enthaltenen Elemente einfach horizontal und vertikal zentriert werden.

align-items: center;: Die Inhalte werden vertikal und horizontal in der Mitte des Containers zentriert.justify-content: center;

height: 100%;: Der Body wird so positioniert, dass er die volle Höhe des sichtbaren Bereichs abdeckt.

background: rgb(48, 48, 48);}: Der Hintergrund des Bodys wird in die angegebene Farbe geändert.

.gradient-border { 
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(194, 190, 190);
  font-family: 'Raleway';
  font-size: 2rem;

  width: 600px;
  height: 200px;
  --borderWidth: 10px;
  background: rgb(48, 48, 48);
  position: relative;
  border-radius: var(--borderWidth);
}

Erklärung:

.gradient-border { : Dies sind die Regeln für das <div>-Element mit der Klasse "gradient-border", das den Hauptinhalt darstellt.

Im ersten Teil des Codes wurden Eigenschaften wie Größe, Farbe, Schriftfamilie und die Position des "Welcome" -Textes angegeben.

width: 600px;

height: 200px;: Die Breite und Höhe des Containers werden hier auf feste Werte festgelegt.

--borderWidth: 10px;: Hier wird die Breite des Randes erstellt und auf 10 Pixel gesetzt.

background: rgb(48, 48, 48);: Der Hintergrund des Containers wird auf angegebene Farbe gesetzt.

position: relative;: Diese Funktion legt die Positionierung des Hintergrunds fest.

border-radius: var(--borderWidth);: Die Ecken des Elements werden damit abgerundet.

}

.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f8932d, #f56c50, #f64b7c, #c869d9, #4870c1, #0ea0b7, #07b39b, #68c27e);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 5s ease alternate infinite;
  background-size: 300% 300%;
}

Erklärung:

}

.gradient-border:after {: Um den animierten Gradienten-Hintergrund zu erstellen, wird in diesem Abschnitt ein Pseudoelement (:after) erstellt, das dem Hauptcontainer hinzugefügt wird.

content: '';: Ein leeres Inhaltselement wird erstellt.

position: absolute;: Das Pseudo-Element wird absolut positioniert. Position: absolut ordnet sich relativ zum nahegelegenen Positionierungselement an.

top, left, height, width: Die Position und Größe des Pseudoelements, um es über den Hauptcontainer zu legen, werden durch diese Eigenschaften festgelegt.

background: linear-gradient(...): Ein linearer Gradient, der aus verschiedenen Farben besteht, wird hier definiert. Im Pseudo-Element wird dieser Gradient als Hintergrund verwendet.

border-radius: calc(2 * var(--borderWidth));: Der Rand des Pseudo-Elements wird so gestaltet, dass er die gleiche Breite wie der Hauptcontainer hat.

z-index: -1;: Das Pseudo-Element wird unterhalb des Hauptinhalts positioniert.

animation: animatedgradient 5s ease alternate infinite;: Diese Eigenschaft definiert die Schnelligkeit des Gradients.

background-size: 300% 300%;: Die Größe des Hintergrundbildes wird durch diese Funktion bestimmt.

}

@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

Erklärung:

Hier wird die Definition einer CSS-Animation namens „animatedgradient“ festgelegt. Um einen animierten Verlauf zu erstellen, ändert diese Animation die Hintergrundposition des Pseudoelements. Um eine Bewegung zu erzeugen, wechselt die Animation zwischen verschiedenen Farbverlaufspositionen.

Insgesamt erstellt dieser CSS-Code ein ansprechendes Layout mit einem beweglichen Hintergrund, der den Hauptinhalt umgibt.

Fertig! Nun hast du deinen eigenen erstellten Animated Gradient Boder Effect.

Quellen:

Code:

animated_gradient_border_effect.zip

Schlagworte

#html
#css

Vorheriger Artikel
Hyperfocus: Wie man weniger arbeitet und mehr erreicht

Animated Gradient Border Effect

Video: Animated Gradient Border Effect

Wie starte ich ?

HTML-Grundgerüst:

HTML CODE:

Erklärung:

CSS Code:

Erklärung:

Erklärung:

Erklärung:

Erklärung:

Fertig! Nun hast du deinen eigenen erstellten Animated Gradient Boder Effect.

Schlagworte

Auch interessant

Webflow

Animated Path for Interactive Storytelling

Transitions & Animationen in CSS

Lade-Animation

Card-Hover Effect

Enter/Eingabe drücken um die Suche zu starten

Video: Animated Gradient Border Effect

Wie starte ich ?

HTML-Grundgerüst:

HTML CODE:

Erklärung:

CSS Code:

Erklärung:

Erklärung:

Erklärung:

Erklärung:

Fertig! Nun hast du deinen eigenen erstellten Animated Gradient Boder Effect.

Schlagworte

Auch interessant

Webflow

Animated Path for Interactive Storytelling

Transitions & Animationen in CSS

Lade-Animation

Card-Hover Effect

Cookies