Experimentieren mit mehreren Schatteneffekten
In diesem Schritt werden Sie fortgeschrittene Techniken zur Erzeugung komplexer Schatteneffekte mit mehreren Box-Schatten erkunden. Öffnen Sie die Datei index.html
in der WebIDE und aktualisieren Sie ihren Inhalt mit dem folgenden Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple Shadow Effects</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.card {
width: 300px;
height: 400px;
background-color: white;
border-radius: 10px;
/* Mehrere Schatteneffekte */
box-shadow:
/* Außenster Schatten */
0 10px 20px rgba(0, 0, 0, 0.1),
/* Innerer Schatten */ inset 0 -5px 10px rgba(0, 0, 0, 0.05),
/* Farbiger Akzent-Schatten */ 0 15px 25px rgba(0, 123, 255, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
inset 0 -5px 10px rgba(0, 0, 0, 0.1),
0 20px 35px rgba(0, 123, 255, 0.3);
}
</style>
</head>
<body>
<div class="card">
<h2>Schattenexperiment</h2>
<p>Über den Mauszeiger fahren, um den Schatteneffekt zu sehen!</p>
</div>
</body>
</html>
Wichtige Techniken für mehrere Schatteneffekte:
-
Gestapelte Schatten:
- Erster Schatten: Weicher Außenster Schatten
- Zweiter Schatten: Subtiler Innerer Schatten
- Dritter Schatten: Farbiger Akzent-Schatten
-
Schattenzusammensetzung:
0 10px 20px rgba(0, 0, 0, 0.1)
: Weicher Außenster Schatten
inset 0 -5px 10px rgba(0, 0, 0, 0.05)
: Subtiler Innerer Schatten
0 15px 25px rgba(0, 123, 255, 0.2)
: Blauer Akzent-Schatten
-
Hover-Effekt:
- Erhöhen der Schattenintensität beim Hovern
- Hinzufügen einer Skalierungstransformation für ein interaktives Gefühl
Beispielvisuelle Ausgabe:
+------------------------+
| |
| [Karte mit komplexen |
| Schatteneffekten] |
| |
+------------------------+
Wichtige Punkte:
- Verbinden mehrerer Schatten für Tiefe
- Verwenden Sie
inset
für innere Schatten
- Erzeugen Sie interaktive Effekte mit Hovern