CSS-Box-Schattengenerator

Der CSS-Box-Schattengenerator ist ein visueller Editor für die CSS-Box-Shadow-Eigenschaft. Sie passen Offset, Unschärferadius, Spreizradius, Farbe und Deckkraft mit Schiebereglern an und sehen das Ergebnis live auf einem Vorschauelement und kopieren dann das genaue CSS. Anstatt Pixelwerte zu erraten und die Seite neu zu laden, formen Sie den Schatten direkt und lesen den von ihm erzeugten Code.

Die Box-Shadow-Eigenschaft ist täuschend tief. Eine einzelne Deklaration kann mehrere Schatten mit jeweils eigenen Offsets, Unschärfe, Ausbreitung, Farbe und einem optionalen Einfügungsschlüsselwort stapeln, das den Schatten im Element und nicht nach außen malt. Echte Schnittstellenschatten verwenden fast immer zwei oder mehr Ebenen, um natürlich auszusehen, was beim Handschreiben mühsam ist. Dieses Tool verwaltet die Layer für Sie und gibt eine Spezifikations-gültige Deklaration in der richtigen durch Kommas getrennten Reihenfolge aus.

Alles passiert in Ihrem Browser. Wählen Sie ein Preset aus, stimmen Sie die Ebenen ab, wechseln Sie die Vorschau zwischen hellen und dunklen Hintergründen und kopieren Sie entweder die Standardeigenschaft oder einen Block, der auch das Präfix -webkit- enthält. Kein Konto, kein Upload und es funktioniert weiterhin offline, sobald die Seite geladen wurde.

Schatten werden außerhalb des Kastens gemalt und nehmen keinen Platz ein, also schieben sie Nachbarn niemals herum und werden von jedem Vorfahren mit verstecktem Überlauf abgeschnitten. Die Ausbreitung ist der am wenigsten verstandene Wert: Sie wächst oder schrumpft die Schattenform, bevor sie verschwimmt. Eine positive Ausbreitung mit null Unschärfe ergibt also einen festen versetzten Umriss, wodurch Grenzeffekte gefälscht werden, ohne das Layout zu beeinträchtigen. Der Einschub bewegt den Schatten innerhalb des Elements, nützlich für gedrückte Zustände und innere Leuchten. Durch die Schichtung mehrerer Schatten mit zunehmendem Versatz und Unschärfe wird eine überzeugende Tiefe aufgebaut, da eine einzelne große Unschärfe als Nebel und nicht als Schatten liest. Jede Schicht kostet Zeit, und Schatten, die während des Scrollens oder Animationen neu lackern, sind eine häufige Quelle von Jank auf Geräten mit geringererleistung.