Da sich das Web ständig weiterentwickelt, ist die Erstellung einer schönen Benutzeroberfläche eine der wichtigsten Aufgaben, um die Kundenbindung auf Ihrer Website zu steigern. Eine Möglichkeit, das Erscheinungsbild Ihres Frontends zu verbessern, besteht darin, Verlaufsschatten in CSS anzuwenden. Die beiden wichtigsten Methoden zum Anwenden von Verlaufsschattierungen sind lineare Verläufe und radiale Verläufe.
Verlaufsschatten können verwendet werden, um die Aufmerksamkeit des Benutzers auf bestimmte Informationen zu lenken, Hover- oder Fokuseffekte anzuwenden oder einer Website ein Web3-Erscheinungsbild zu verleihen. In diesem Tutorial analysieren wir zwei Farbverläufe anhand praktischer Beispiele.
Wir werden zwei wichtige CSS-Konzepte verwenden, um den Effekt zu erzielen: eines ist das Filterattribut und das andere ist die Pseudoklasse ::after. Die Pseudoklasse wird verwendet, um einen falschen Hintergrund zu erstellen, während das Filterattribut verwendet wird, um einen Unschärfeeffekt auf den umgebenden Hintergrund anzuwenden.
In diesem Beispiel sehen wir, wie man einen linearen Schatteneffekt mit Farbverlauf auf eine Karte anwendet.
.classname::after{
background: linear-gradient(direction, color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
Dabei bezieht sich der Klassenname auf die Klasse, die der angegebenen Beschriftung zugewiesen ist, und das Richtungsattribut gibt an, in welche Richtung die lineare Anordnung der Farben angeordnet werden soll. Dies kann als „deg“ oder mithilfe einer vorgefertigten Zeichenfolge (z. B. „to right“) angegeben werden.
Schritt 1: Erstellen Sie das HTML-Dokumentgerüst der Website und geben Sie Klassennamen für Tags an, die Verlaufseffekte erfordern.
Schritt 2: Verwenden Sie die Pseudoklasse ::after mit demselben Klassennamen wie dem, der dem Tag zugewiesen ist.
Schritt 3: Füllen Sie den Hintergrund der Pseudoklasse mit der gewünschten Verlaufsfarbe mithilfe der CSS-Funktion Linear−gradient().
Schritt 4: Um sicherzustellen, dass die Pseudoklasse niemals die Originalklasse überlagert, fügen Sie der Pseudoklasse ein Z-Index-Attribut mit einem niedrigeren Wert als dem der Originalklasse zugewiesenen Wert hinzu.
Schritt 5: Fügen Sie der Pseudoklasse ein kleines Einfügungsattribut hinzu, damit die Originalklasse den Hintergrund nicht vollständig verdeckt.
Schritt 6: Wenden Sie abschließend den Verlaufsschatteneffekt an und wenden Sie Unschärfe auf die Pseudokomponenten an.
<!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>Linear Gradient Shadow</title>
</head>
<body>
<div class="gradient">
<h1>Welcome to Tutorials Point</h1>
</div>
<style>
*{
margin: 0px;
padding: 0px;
}
.gradient{
margin-top: 20px;
margin-left: 5%;
width: 90%;
position: relative;
border-radius: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 10px;
padding-left: 10px;
background-color: black;
}
h1{
color: white;
text-align: center;
}
.gradient::after{
content: "";
position: absolute;
z-index: -100;
background: linear-gradient(to right, blue, cyan,lime, green, yellow, orange, red);
inset: -0.5rem;
filter: blur(25px);
}
</style>
</body>
</html>
In diesem Beispiel sehen wir, wie man den Effekt „Radialer Verlaufsschatten“ auf denselben Karteneffekt anwendet und beobachten die Änderungen.
.classname::after{
background: radial-gradient(color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
Schritt 1: Erstellen Sie das HTML-Dokumentgerüst der Website und geben Sie Klassennamen für Tags an, die Verlaufseffekte erfordern.
Schritt 2: Verwenden Sie die Pseudoklasse ::after mit demselben Klassennamen wie dem, der dem Tag zugewiesen ist.
Schritt 3: Verwenden Sie die CSS-Funktion Radial−gradient(), um den Hintergrund der Pseudoklasse mit der gewünschten Verlaufsfarbe zu füllen.
Schritt 4: Um sicherzustellen, dass die Pseudoklasse niemals die Originalklasse überlagert, fügen Sie der Pseudoklasse ein Z-Index-Attribut mit einem niedrigeren Wert als dem der Originalklasse zugewiesenen Wert hinzu.
Schritt 5: Fügen Sie der Pseudoklasse ein kleines Einfügungsattribut hinzu, damit die Originalklasse den Hintergrund nicht vollständig verdeckt.
Schritt 6: Wenden Sie abschließend den Verlaufsschatteneffekt an und wenden Sie Unschärfe auf die Pseudokomponenten an.
<!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>Radial Gradient Shadow</title>
</head>
<body>
<div class="gradient">
<h1>Welcome to Tutorials Point</h1>
</div>
<style>
*{
margin: 0px;
padding: 0px;
}
.gradient{
margin-top: 20px;
margin-left: 5%;
width: 90%;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: black;
}
h1{
color: white;
text-align: center;
}
.gradient::after{
content: "";
position: absolute;
z-index: -100;
background: radial-gradient(yellow, red, blue);
inset: -1rem;
filter: blur(10px);
}
</style>
</body>
</html>
Der radiale Farbverlauf hat seinen Ursprung in der Mitte des Etiketts, wie Sie im obigen Beispiel sehen können. Das Gelb wird vollständig vom schwarzen Hintergrund überlagert, während in der Mitte der Kartenseite einige Spuren von Rot zu finden sind. Bei einem linearen Farbverlauf hingegen ist keine Überlagerung zu beobachten, da alle Farben entsprechend der vorgegebenen Richtung gleichmäßig entlang aller Kanten verteilt werden.
Wir können auch die Werte für Einfügung und Unschärfe anpassen, um den vom Verlaufseffekt abgedeckten Bereich zu vergrößern oder zu verkleinern. Je negativer die Werte sind, desto ausgeprägter ist der Farbverlauf, während Unschärfewerte dafür sorgen, dass sich der Effekt an den Seiten stärker ausbreitet.
Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Verlaufsschatten mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
