Schatten in Tailwind CSS

Im modernen Webdesign sind Schatteneffekte ein wichtiges Werkzeug, um visuelle Hierarchie und ein Gefühl von Tiefe zu erzeugen.

Tailwind CSS bietet eine leistungsstarke und flexible Sammlung von Schatten-Utility-Klassen, mit denen sich verschiedene Schatteneffekte einfach umsetzen lassen.

Dieser Artikel stellt das Schattensystem in Tailwind CSS umfassend vor, einschließlich box-shadow (Box-Schatten), text-shadow (Text-Schatten), Schattenfarbe und Deckkraftsteuerung sowie der Anwendung von inset-Schatteneffekten.

Was sind CSS-Schatten?

Bevor wir uns mit der spezifischen Implementierung von Tailwind befassen, wollen wir zunächst die grundlegenden Konzepte von CSS-Schatten verstehen.

CSS-Schatten lassen sich hauptsächlich in zwei Typen unterteilen:

  1. Box-Schatten (box-shadow): Wird auf das gesamte Box-Modell eines Elements angewendet
  2. Text-Schatten (text-shadow): Wird nur auf den Textinhalt eines Elements angewendet

Schatteneffekte können:

  • Die visuelle Hierarchie von Elementen verbessern
  • Einen "schwebenden" Effekt erzeugen
  • Beleuchtung und Tiefe simulieren
  • Wichtige Inhalte hervorheben

box-shadow in Tailwind

Tailwind bietet eine Reihe voreingestellter box-shadow-Utility-Klassen, unterteilt in 6 Stufen von dezent bis stark:

Beispiel

<div class="shadow-sm">Kleiner Schatten</div>
<div class="shadow">Standard-Schatten</div>
<div class="shadow-md">Mittlerer Schatten</div>
<div class="shadow-lg">Großer Schatten</div>
<div class="shadow-xl">Extragroßer Schatten</div>
<div class="shadow-2xl">Extra-extra-großer Schatten</div>

Ausprobieren »

Vergleichstabelle der Schattenstufen

Klassenname Beschreibung Anwendungsfälle
shadow-sm Sehr dezenter Schatten Button-Hover, leichtes Anheben
shadow Standard-Schatten (mittlere Größe) Karten, normale Elemente
shadow-md Mittlerer Schatten Modale, wichtige Benachrichtigungen
shadow-lg Großer Schatten Schwebende Panels, prominente Elemente
shadow-xl Extra großer Schatten Besonders hervorgehobene Elemente
shadow-2xl Extra-extra-großer Schatten Elemente, die sehr deutlich hervorstechen müssen

Codebeispiele und Übung

Beispiel

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
  <div class="text-xl font-medium text-black">Tailwind-Schatten-Beispiel</div>
  <p class="text-gray-500">Dies ist ein Kartenbeispiel, das shadow-md verwendet</p>
</div>

Ausprobieren »

Effektbeschreibung：

  • Erstellte eine Karte mit weißem Hintergrund
  • Verwendeteshadow-mdclass, um einen mittleren Schatten hinzuzufügen
  • Kombiniert mit abgerundeten Ecken (rounded-xlum den Schatteneffekt natürlicher zu machen

text-shadow in Tailwind

Tailwind enthält standardmäßig keine text-shadow-Utility-Klassen, aber sie können auf folgende Weise hinzugefügt werden:

Methode 1: Verwendung eines Plugins

Installationtailwindcss-textshadowPlugin installieren:

Beispiel

npm install tailwindcss-textshadow

Dann intailwind.config.jskonfigurieren:

Beispiel

module.exports = {
  plugins: [
    require('tailwindcss-textshadow')
  ],
  theme: {
    textShadow: {
      'sm': '1px 1px 2px rgba(0, 0, 0, 0.5)',
      'DEFAULT': '2px 2px 4px rgba(0, 0, 0, 0.5)',
      'lg': '4px 4px 8px rgba(0, 0, 0, 0.5)',
    }
  }
}

Anwendungsbeispiel:

Beispiel

<h1 class="text-shadow-lg">Überschrift mit Schatten</h1>

Methode 2: Benutzerdefinierte Utility-Klassen

In CSS hinzufügen:

Beispiel

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  .text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
}

Steuerung von Schattenfarbe und Deckkraft

Tailwind ermöglicht es dir, die Farbe und Deckkraft von Schatten durch Kombinationen von Utility-Klassen zu steuern.

1. Verwenden von Utility-Klassen für Schattenfarbe

Beispiel

<div class="shadow-lg shadow-blue-500/50">Blauer halbtransparenter Schatten</div>

Syntax-Aufschlüsselung:

  • shadow-{color}: Schattenfarbe festlegen (z. B. blue-500)
  • /{opacity}: Schatten-Deckkraft festlegen (z. B. 50 bedeutet 50%)

2. Verfügbare Farben und Deckkraft

Tailwind unterstützt alle integrierten Farben und beliebige Deckkraftwerte:

Beispiel

<div class="shadow-lg shadow-red-400/30">Halbtransparenter blauer Schatten</div>
<div class="shadow-lg shadow-emerald-300/80">Kräftiger smaragdgrüner Schatten</div>
<div class="shadow-lg shadow-purple-600/20">Schwacher violetter Schatten</div>

3. Benutzerdefinierte Schattenfarben

Intailwind.config.jsErweitern in:

Beispiel

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 4px 6px -1px rgba(156, 39, 176, 0.3)',
      }
    }
  }
}

Inset-Schatteneffekt (inset)

Inset-Schatten können einen eingesenkten oder eingedrückten Effekt erzeugen und werden häufig bei interaktiven Elementen wie Schaltflächen und Eingabefeldern verwendet.

1. Verwenden vordefinierter Inset-Schattenklassen

Beispiel

<div class="shadow-inner">Inset-Schatteneffekt</div>

2. Benutzerdefinierte Inset-Schatten

In der Konfigurationsdatei hinzufügen:

Beispiel

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'inner-lg': 'inset 0 4px 6px 0 rgba(0, 0, 0, 0.1)',
      }
    }
  }
}

3. Praktische Anwendungsbeispiele

Beispiel

<button class="px-4 py-2 bg-gray-100 rounded-lg shadow-inner hover:shadow-inner-lg">
Button anklicken
</button>

Effektbeschreibung：

  • Der Standardzustand hat einen leichten Inset-Schatten
  • Inset-Schatten verstärkt sich beim Hover (hover:shadow-inner-lg)
  • wodurch der visuelle Effekt entsteht, dass der Button heruntergedrückt wird

Fortgeschrittene Techniken und Best Practices

1. Kombinieren von äußeren und inneren Schatten

Beispiel

<div class="shadow-lg shadow-inner">Kombination aus äußerem Schatten + innerem Schatten</div>

2. Responsive Schatten

Beispiel

<div class="shadow-sm md:shadow-lg">Kleiner Schatten auf kleinen Bildschirmen, großer Schatten auf großen Bildschirmen</div>

3. Hover- und Fokus-Zustände

Beispiel

<button class="shadow hover:shadow-lg focus:shadow-outline">
Interaktiver Button
</button>

4. Schattenanimationen

Beispiel

<button class="shadow-md hover:shadow-xl transition-shadow duration-300">
Button mit Übergangseffekt
</button>

Übungsaufgaben

  1. Erstelle eine Kartenkomponente, die standardmäßig einen mittleren Schatten hat; beim Hovern wird der Schatten größer und ändert seine Farbe
  2. Entwirf ein Eingabefeld mit einem Inset-Schatten; der Inset-Schatten verschwindet, wenn es den Fokus erhält
  3. Implementiere eine Textüberschrift, die text-shadow verwendet, um einen Neonlicht-Effekt zu erzeugen
  4. Kombiniere äußere und innere Schatten, um einen Button mit dreidimensionaler Wirkung zu erstellen

Zusammenfassung der wichtigsten Punkte

Kurzreferenz für Kern-Utility-Klassen

Funktion Beispiel für Klassennamen Beschreibung
Box-Schatten shadow, shadow-lg Äußere Schatten in verschiedenen Größen
Inset-Schatten shadow-inner Schatten innerhalb eines Elements
Schattenfarbe shadow-blue-500 Schattenfarbe festlegen
Schatten-Deckkraft shadow-blue-500/50 Schatten-Deckkraft festlegen
Textschatten text-shadow (erfordert Anpassung) Schatten zu Text hinzufügen

Best-Practice-Empfehlungen

  1. In Maßen verwenden: Schatten sollten das Design verbessern, nicht die Aufmerksamkeit ablenken
  2. Konsistent bleiben: Behalten Sie ähnliche Schattenstufen im gesamten Projekt bei
  3. Leistung berücksichtigen: Zu viele komplexe Schatten können die Rendering-Leistung beeinträchtigen
  4. Mit anderen Eigenschaften kombinieren: Schatten wirken besser in Kombination mit abgerundeten Ecken und Übergangseffekten
Andere Erweiterungen