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
colordes 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,widthundheightEigenschaften 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
colordes 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.
Siehe auch
- Andere Tools:
- CSS-Hintergründe und -Rahmen-Modul