Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Box-shadow-Generator

Dieses Tool ermöglicht es Ihnen, CSS-box-shadow-Effekte zu erstellen, um Box-Shadow-Effekte zu Ihren CSS-Objekten hinzuzufügen.

Der Box-shadow-Generator ermöglicht es Ihnen, einem Element einen oder mehrere Box-Shadows hinzuzufügen.

Beim Öffnen des Tools finden Sie ein Rechteck im oberen rechten Bereich des Tools. Das ist das Element, auf das Sie Schatten anwenden werden. Wenn dieses Element ausgewählt ist (wie es der Fall ist, wenn Sie die Seite zum ersten Mal laden), können Sie einige grundlegende Stilformatierungen darauf anwenden:

  • Stellen Sie die color des Elements mit dem Farbauswahl-Tool ein.
  • Geben Sie dem Element einen border, indem Sie das "border" Kontrollkästchen verwenden.
  • Verwenden Sie die Schieberegler, um die top, left, width und height Eigenschaften des Elements festzulegen.

Um einen Box-Shadow hinzuzufügen, klicken Sie auf die "+"-Taste oben links. Dies fügt einen Schatten hinzu und listet ihn in der Spalte auf der linken Seite auf. Jetzt können Sie die Werte des neuen Schattens festlegen:

  • Stellen Sie die color des Schattens mit dem Farbauswahl-Tool ein.
  • Setzen Sie den Schatten mit dem "inset" Kontrollkästchen auf eingekerbt.
  • Verwenden Sie die Schieberegler, um die Position, Unschärfe und Ausbreitung des Elements festzulegen.

Um einen weiteren Schatten hinzuzufügen, klicken Sie erneut auf "+". Nun werden alle von Ihnen festgelegten Werte auf diesen neuen Schatten angewendet. Ändern Sie die Reihenfolge, in der diese beiden Schatten angewendet werden, mit den ↑ und ↓ Tasten oben links. Wählen Sie den ersten Schatten erneut aus, indem Sie ihn in der Spalte links anklicken. Um die eigenen Stile des Elements zu aktualisieren, wählen Sie es aus, indem Sie die mit "element" beschriftete Taste oben anklicken.

Sie können dem Element ::before- und ::after-Pseudoelemente hinzufügen und ihnen ebenfalls Box-Shadows geben. Um zwischen dem Element und seinen Pseudoelementen umzuschalten, verwenden Sie die oben beschrifteten Tasten "element", "::before" und "::after".

Das Feld unten rechts enthält das CSS für das Element und alle ::before- oder ::after-Pseudoelemente.