Eingefügter CSS-Box-Schatten – vorgefertigter Code
Erstellen Sie visuell CSS-Box-Shadow-Code: Schieberegler für Versatz, Unschärfe, Ausbreitung, Farbe mit Deckkraft, Einfügungsmodus und bis zu vier Ebenen mit Live-Vorschau.
Ergebnis
Auf dieser Seite wird der Box-Shadow-Generator geöffnet, wobei das Kontrollkästchen „Einfügen“ bereits aktiviert ist, sodass der Schatten innerhalb des Elements und nicht dahinter gezeichnet wird. Die Vorschaukarte zeigt sofort den versunkenen Effekt und jeder Schieberegler aktualisiert die CSS-Zeile live.
Eingefügte Schatten sind die Art und Weise, wie CSS nach innen gerichtete Tiefe vortäuscht: Gedrückte Schaltflächenzustände, Suchfelder und Eingabefelder, Fortschrittsbalkentäler und gravierte Bedienfelder basieren alle auf ihnen. Da der Schatten an der Innenkante anliegt, verhalten sich Unschärfe und Ausbreitung etwas anders als bei einem normalen Schlagschatten – mit den Schiebereglern hier können Sie diesen Unterschied sofort spüren.
Wenn das versunkene Erscheinungsbild stimmt, kopieren Sie die Box-Shadow-Linie in Ihr Stylesheet. Sie können eine Einfügungsebene auch mit regulären Außenebenen kombinieren – fügen Sie eine zweite Ebene hinzu und deaktivieren Sie die Einfügung darauf, um beide in einer Deklaration zu mischen.