Box-Schatten mit CSS erstellen

JavaScriptJavaScriptBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden Sie die leistungsstarke CSS-Eigenschaft box-shadow erkunden und lernen, wie Sie visuell ansprechende Schatteneffekte für Web-Elemente erstellen. Mit einem schrittweisen Ansatz werden Sie die grundlegende Syntax von Box-Schatten verstehen, grundlegende und fortgeschrittene Schattentechniken anwenden und entdecken, wie Sie die Schatteneigenschaften anpassen, um die Tiefe und das visuelle Interesse von HTML-Elementen zu erhöhen.

Das Lab behandelt Schlüsselkonzepte wie das Verständnis der Box-Schatten-Syntax, das Anwenden von Schatten auf verschiedene Formen, das Experimentieren mit Verschiebung, Blur-Radius und Farbvariationen. Am Ende dieses Labs werden Sie praktische Fähigkeiten bei der Erstellung von professionellen Schatten haben, die die visuelle Präsentation von Web-Designs verändern können und Ihrem Benutzeroberflächen subtiltiefe und -dimensionalität verleihen.

Verständnis der Box-Schatten-Syntax

In diesem Schritt werden Sie die grundlegende Syntax von CSS Box-Schatten lernen und wie sie Tiefe und visuelles Interesse für Web-Elemente hinzufügen können. Die box-shadow-Eigenschaft ist eine leistungsstarke CSS-Funktion, die Ihnen ermöglicht, Schatteneffekte für HTML-Elemente zu erstellen.

Lassen Sie uns beginnen, indem wir eine neue HTML-Datei erstellen, um die Box-Schatten-Syntax zu erkunden. Öffnen Sie die WebIDE und erstellen Sie eine Datei namens index.html im Verzeichnis ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Box Shadow Syntax</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        /* Basic box-shadow syntax */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Zergliedern wir die Box-Schatten-Syntax:

  • 5px: Horizontale Verschiebung (verschiebt den Schatten nach rechts)
  • 5px: Vertikale Verschiebung (verschiebt den Schatten nach unten)
  • 10px: Blur-Radius (weicht den Schatten ab)
  • rgba(0, 0, 0, 0.3): Schattenfarbe mit Transparenz

Die grundlegende Syntax lautet: box-shadow: [horizontal offset] [vertical offset] [blur radius] [color]

Beispielausgabe des gerenderten Boxes mit Schatten:

+------------------------+
|                        |
|    [Grauer Box mit     |
|     Weichem Schatten]   |
|                        |
+------------------------+

Wichtige Punkte, die Sie sich merken sollten:

  • Positive Offset-Werte verschieben den Schatten nach rechts und unten
  • Negative Offset-Werte verschieben den Schatten nach links und oben
  • Der Blur-Radius weicht die Schattenkanten ab
  • Sie können Farbnamen, Hexadezimalwerte, RGB- oder RGBA-Werte verwenden

Anwenden eines grundlegenden Box-Schatten auf eine Div

In diesem Schritt werden Sie lernen, wie Sie einen grundlegenden Box-Schatten auf ein Div-Element anwenden, ausgehend von der Syntax, die Sie im vorherigen Schritt gelernt haben. Wir werden die vorhandene HTML-Datei ändern, um verschiedene Schatteneffekte zu demonstrieren.

Ö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>Basic Box Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
      }

      /* Leichter Schatten */
      .light-shadow {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
      }

      /* Dunkler Schatten */
      .dark-shadow {
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box light-shadow"></div>
      <div class="box dark-shadow"></div>
    </div>
  </body>
</html>

Zergliedern wir die Anwendung des Box-Schatten:

  1. Wir haben zwei Div-Elemente mit unterschiedlichen Schattenintensitäten erstellt

  2. .light-shadow verwendet einen subtilen Schatten mit:

    • 5px horizontale Verschiebung
    • 5px vertikale Verschiebung
    • 10px Blur-Radius
    • Hellschwarze Farbe mit 20% Opazität
  3. .dark-shadow verwendet einen deutlichen Schatten mit:

    • 10px horizontale Verschiebung
    • 10px vertikale Verschiebung
    • 15px Blur-Radius
    • Dunkler schwarze Farbe mit 50% Opazität

Beispielvisuelle Ausgabe:

+------------------------+------------------------+
|                        |                        |
|   [Leichter Schatten-Box]   |   [Dunkler Schatten-Box]    |
|                        |                        |
+------------------------+------------------------+

Wichtige Beobachtungen:

  • Erhöhen der Offset-Werte bewegt den Schatten weiter vom Element entfernt
  • Erhöhen des Blur-Radius macht den Schatten weicher
  • Anpassen der Opazität ändert die Schattenintensität

Anpassen von Box-Schatteneigenschaften

In diesem Schritt werden Sie fortgeschrittene Anpassungsmöglichkeiten für Box-Schatten erkunden, einschließlich Einschubschatten, Ausbreitungsradius und Farbvariationen. Wir werden die Datei index.html aktualisieren, um diese fortgeschrittenen Eigenschaften zu demonstrieren.

Öffnen Sie die Datei index.html in der WebIDE und ersetzen Sie ihren Inhalt mit dem folgenden Code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Customized Box Shadows</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: #f0f0f0;
      }

      /* Einschubschatten */
      .inset-shadow {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
      }

      /* Ausbreitungsradius */
      .spread-shadow {
        box-shadow: 5px 5px 0 10px rgba(0, 0, 255, 0.2);
      }

      /* Farbiger Schatten */
      .colored-shadow {
        box-shadow: 8px 8px 12px rgba(255, 0, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box inset-shadow"></div>
      <div class="box spread-shadow"></div>
      <div class="box colored-shadow"></div>
    </div>
  </body>
</html>

Lassen Sie uns die neuen Box-Schattenanpassungen erkunden:

  1. Einschubschatten:

    • Verwendet das Schlüsselwort inset, um einen inneren Schatten zu erstellen
    • Gibt den Effekt eines gedrückten oder eingerückten Elements
    • Syntax: box-shadow: inset [horizontal offset] [vertical offset] [blur radius] [color]
  2. Ausbreitungsradius:

    • Fügt einen zusätzlichen Wert hinzu, um den Schatten zu erweitern
    • Das vierte numerische Wert steuert die Schattenausbreitung
    • Im Beispiel erzeugt die 10px-Ausbreitung einen blautingierten Schattenrand
  3. Farbiger Schatten:

    • Verwenden Sie RGBA, um farbige Schatten mit Transparenz zu erstellen
    • Beispiel verwendet einen roten Schatten mit 40% Opazität

Beispielvisuelle Ausgabe:

+------------------------+------------------------+------------------------+
|                        |                        |                        |
| [Einschubschatten-Box]  | [Ausbreitungsschatten-Box] | [Farbiger Schatten-Box] |
|                        |                        |                        |
+------------------------+------------------------+------------------------+

Wichtige Punkte:

  • inset erzeugt einen inneren Schatten
  • Ausbreitungsradius erweitert den Schatten
  • Verwenden Sie RGBA für farbige, transparente Schatten

Erstellen eines kreisförmigen Elements mit Schatten

In diesem Schritt werden Sie lernen, wie Sie ein kreisförmiges Element mit einem Box-Schatten mithilfe der CSS-Eigenschaften border-radius und box-shadow erstellen. Ö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>Circular Element with Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }

      .circular-element {
        width: 200px;
        height: 200px;
        background-color: #ffffff;

        /* Erstellt eine kreisförmige Form */
        border-radius: 50%;

        /* Fügt einen Box-Schatten hinzu */
        box-shadow:
          0 10px 20px rgba(0, 0, 0, 0.2),
          0 6px 6px rgba(0, 0, 0, 0.15);

        /* Zentriert den Inhalt */
        display: flex;
        justify-content: center;
        align-items: center;

        /* Optional: fügt Text hinzu */
        font-family: Arial, sans-serif;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="circular-element">Kreisförmiger Schatten</div>
    </div>
  </body>
</html>

Wichtige Techniken zum Erstellen eines kreisförmigen Elements mit Schatten:

  1. Kreisförmige Form:

    • Verwenden Sie border-radius: 50%, um einen perfekten Kreis zu erstellen
    • Stellen Sie sicher, dass die Breite und die Höhe gleich sind
  2. Box-Schatten:

    • Erster Schatten: 0 10px 20px rgba(0, 0, 0, 0.2)
      • Vertikale Verschiebung von 10px
      • 20px Blur-Radius
      • Weicher schwarzer Farbe mit 20% Opazität
    • Zweiter Schatten: 0 6px 6px rgba(0, 0, 0, 0.15)
      • Fügt Tiefe hinzu mit einem näheren, weicheren Schatten

Beispielvisuelle Ausgabe:

+------------------------+
|                        |
|    [Kreisförmiges Element   |
|     mit Weichem Schatten]  |
|                        |
+------------------------+

Wichtige Punkte:

  • border-radius: 50% erstellt einen perfekten Kreis
  • Mehrere Box-Schatten können Tiefe erzeugen
  • Anpassen der Opazität und des Blurs für den gewünschten Effekt

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:

  1. Gestapelte Schatten:

    • Erster Schatten: Weicher Außenster Schatten
    • Zweiter Schatten: Subtiler Innerer Schatten
    • Dritter Schatten: Farbiger Akzent-Schatten
  2. 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
  3. 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

Zusammenfassung

In diesem Labyrinth erkunden die Teilnehmer die leistungsstarke CSS-Eigenschaft box-shadow, um für Web-Elemente visuell ansprechende Tiefe und Dimension zu schaffen. Indem sie die grundlegende Syntax von Box-Schatten lernen, entdecken die Schüler, wie sie Schatteneffekte mit horizontaler und vertikaler Verschiebung, Blur-Radius und Farbparametern anwenden können, was es ihnen ermöglicht, das visuelle Design von HTML-Elementen zu verbessern.

Das Lab führt die Lernenden durch praktische Übungen, darunter das Erstellen von grundlegenden Box-Schatten, die Anpassung von Schatteneigenschaften und das Experimentieren mit mehreren Schatteneffekten. Die Teilnehmer werden praktische Erfahrungen bei der Manipulation von Schattenmerkmalen wie Verschiebungsrichtung, Blur-Intensität und Farbtransparenz sammeln, was die Ästhetik und die visuelle Hierarchie von Webseitenelementen erheblich verbessern kann.