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 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 (was es ist, wenn Sie die Seite das erste Mal laden), können Sie einige grundlegende Styles darauf anwenden:

• Stellen Sie die color des Elements mithilfe des Farbwahlwerkzeugs ein.
• Geben Sie dem Element eine 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 "+"-Schaltfläche oben links. Dadurch wird ein Schatten hinzugefügt und in der linken Spalte aufgelistet. Jetzt können Sie die Werte des neuen Schattens festlegen:

• Bestimmen Sie die color des Schattens mithilfe des Farbwahlwerkzeugs.
• Verwenden Sie das "inset"-Kontrollkästchen, um den Schatten einzusetzt.
• Verwenden Sie die Schieberegler, um die Position, Unschärfe und Ausbreitung des Schattens festzulegen.

Um einen weiteren Schatten hinzuzufügen, klicken Sie erneut auf "+". Alle jetzt festgelegten Werte gelten für diesen neuen Schatten. Ändern Sie die Reihenfolge, in der diese beiden Schatten angewendet werden, mithilfe der ↑ und ↓ Schaltflächen oben links. Wählen Sie den ersten Schatten erneut aus, indem Sie ihn in der linken Spalte anklicken. Um die eigenen Stile des Elements zu aktualisieren, wählen Sie es aus, indem Sie die Schaltfläche mit der Beschriftung "Element" 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 zu wechseln, verwenden Sie die oben mit "Element", "::before" und "::after" beschrifteten Schaltflächen.

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