Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Schatten für Tiefe und Kontrast Hinzufügen | Kernkonzepte und Grundlegende Gestaltung
Tailwind CSS für Webentwicklung

bookSchatten für Tiefe und Kontrast Hinzufügen

Tailwind CSS bietet eine Vielzahl von Utilities, um Schatten zu Elementen hinzuzufügen.

Box-Schatten

Verwenden Sie das Präfix shadow- gefolgt vom Größenwert, um Box-Schatten hinzuzufügen.

index.html

index.html

copy

Textschatten

Tailwind CSS enthält standardmäßig keine text-shadow-Utilities. Sie können jedoch bei Bedarf eigene text-shadow-Utilities in Ihrer Tailwind-Konfigurationsdatei hinzufügen.

Hinweis

Für detaillierte Informationen zu spezifischen Tailwind-Schatten siehe die Dokumentation: Box Shadow.

Beispiel

Nachfolgend ein praktisches Beispiel für die Anwendung von grundlegendem Styling (Farben, Rahmen, Schatten) mit den bisher behandelten Utilities.

index.html

index.html

copy

Erklärung

  1. max-w-sm: Legt die maximale Breite des Elements auf eine kleine Größe fest (24rem oder 384px);
  2. mx-auto: Zentriert das Element horizontal durch auto-Ränder links und rechts;
  3. p-4: Fügt auf allen Seiten einen Abstand von 1rem (16px) hinzu;
  4. bg-white: Setzt die Hintergrundfarbe auf Weiß;
  5. rounded-lg: Verleiht dem Element stark abgerundete Ecken;
  6. shadow-md: Fügt dem Element einen mittleren Schatten hinzu.
  1. text-2xl: Setzt die Schriftgröße auf 2xl (1,5rem oder 24px);
  2. font-bold: Wendet fette Schriftstärke an;
  3. text-gray-900: Setzt die Textfarbe auf ein sehr dunkles Grau (nahe Schwarz);
  4. mb-2: Fügt einen unteren Außenabstand von 0.5rem (8px) hinzu;
  5. text-gray-700: Setzt die Textfarbe auf ein mittleres Grau;
  6. mb-4: Fügt einen unteren Außenabstand von 1rem (16px) hinzu.
  1. border: Fügt dem Element einen Rahmen hinzu;
  2. border-blue-500: Setzt die Rahmenfarbe auf einen Blauton;
  3. rounded-md: Wendet mittelstark abgerundete Ecken auf das Element an;
  4. p-4: Fügt auf allen Seiten einen Innenabstand von 1rem (16px) hinzu;
  5. bg-blue-50: Setzt die Hintergrundfarbe auf ein sehr helles Blau;
  6. text-blue-700: Setzt die Textfarbe auf ein dunkles Blau.
  1. mt-4: Fügt einen oberen Außenabstand von 1rem (16px) hinzu;
  2. p-4: Fügt auf allen Seiten einen Innenabstand von 1rem (16px) hinzu;
  3. bg-green-100: Setzt die Hintergrundfarbe auf ein sehr helles Grün;
  4. border: Fügt dem Element einen Rahmen hinzu;
  5. border-green-500: Setzt die Rahmenfarbe auf einen Grünton;
  6. rounded: Wendet leicht abgerundete Ecken auf das Element an;
  7. shadow-sm: Wendet einen kleinen Schatten auf das Element an;
  8. text-green-700: Setzt die Textfarbe auf ein dunkles Grün.
question mark

Welche Klasse wird verwendet, um einem Element einen mittleren Schatten hinzuzufügen?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain how to add custom text-shadow utilities in Tailwind?

What are the different box shadow sizes available in Tailwind?

Can you break down the example code for these styles?

Awesome!

Completion rate improved to 3.57

bookSchatten für Tiefe und Kontrast Hinzufügen

Swipe um das Menü anzuzeigen

Tailwind CSS bietet eine Vielzahl von Utilities, um Schatten zu Elementen hinzuzufügen.

Box-Schatten

Verwenden Sie das Präfix shadow- gefolgt vom Größenwert, um Box-Schatten hinzuzufügen.

index.html

index.html

copy

Textschatten

Tailwind CSS enthält standardmäßig keine text-shadow-Utilities. Sie können jedoch bei Bedarf eigene text-shadow-Utilities in Ihrer Tailwind-Konfigurationsdatei hinzufügen.

Hinweis

Für detaillierte Informationen zu spezifischen Tailwind-Schatten siehe die Dokumentation: Box Shadow.

Beispiel

Nachfolgend ein praktisches Beispiel für die Anwendung von grundlegendem Styling (Farben, Rahmen, Schatten) mit den bisher behandelten Utilities.

index.html

index.html

copy

Erklärung

  1. max-w-sm: Legt die maximale Breite des Elements auf eine kleine Größe fest (24rem oder 384px);
  2. mx-auto: Zentriert das Element horizontal durch auto-Ränder links und rechts;
  3. p-4: Fügt auf allen Seiten einen Abstand von 1rem (16px) hinzu;
  4. bg-white: Setzt die Hintergrundfarbe auf Weiß;
  5. rounded-lg: Verleiht dem Element stark abgerundete Ecken;
  6. shadow-md: Fügt dem Element einen mittleren Schatten hinzu.
  1. text-2xl: Setzt die Schriftgröße auf 2xl (1,5rem oder 24px);
  2. font-bold: Wendet fette Schriftstärke an;
  3. text-gray-900: Setzt die Textfarbe auf ein sehr dunkles Grau (nahe Schwarz);
  4. mb-2: Fügt einen unteren Außenabstand von 0.5rem (8px) hinzu;
  5. text-gray-700: Setzt die Textfarbe auf ein mittleres Grau;
  6. mb-4: Fügt einen unteren Außenabstand von 1rem (16px) hinzu.
  1. border: Fügt dem Element einen Rahmen hinzu;
  2. border-blue-500: Setzt die Rahmenfarbe auf einen Blauton;
  3. rounded-md: Wendet mittelstark abgerundete Ecken auf das Element an;
  4. p-4: Fügt auf allen Seiten einen Innenabstand von 1rem (16px) hinzu;
  5. bg-blue-50: Setzt die Hintergrundfarbe auf ein sehr helles Blau;
  6. text-blue-700: Setzt die Textfarbe auf ein dunkles Blau.
  1. mt-4: Fügt einen oberen Außenabstand von 1rem (16px) hinzu;
  2. p-4: Fügt auf allen Seiten einen Innenabstand von 1rem (16px) hinzu;
  3. bg-green-100: Setzt die Hintergrundfarbe auf ein sehr helles Grün;
  4. border: Fügt dem Element einen Rahmen hinzu;
  5. border-green-500: Setzt die Rahmenfarbe auf einen Grünton;
  6. rounded: Wendet leicht abgerundete Ecken auf das Element an;
  7. shadow-sm: Wendet einen kleinen Schatten auf das Element an;
  8. text-green-700: Setzt die Textfarbe auf ein dunkles Grün.
question mark

Welche Klasse wird verwendet, um einem Element einen mittleren Schatten hinzuzufügen?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 5
some-alt