So funktioniert dieses Werkzeug
Ein box-shadow nimmt vier Längen und eine Farbe: wie weit nach rechts, wie weit nach unten, wie stark die Kante weichgezeichnet wird und wie weit der Schatten vor alldem wächst oder schrumpft. Die ersten beiden platzieren ihn, die Weichzeichnung entscheidet, ob er als scharfe Kante oder als diffuses Leuchten wirkt, und die Ausbreitung rührt kaum jemand an — dabei ist gerade sie es, die einen knappen modernen Schatten von einem aufgeblähten unterscheidet.
Farbe und Deckkraft werden hier zu einem rgba-Wert zusammengeführt statt getrennt gesetzt, denn ein Schatten in voller Stärke sieht fast nie wie ein Schatten aus. Echte Schatten sind fehlendes Licht und keine Schicht schwarzer Farbe, der übliche Fehler ist deshalb zu viel Deckkraft und nicht zu wenig. Mit inset wandert das Ganze ins Element hinein, und so werden gedrückte oder vertiefte Bedienelemente gezeichnet.
Einen Schatten bauen, der nach Licht aussieht
- Richten Sie den Versatz an einer einzigen Lichtquelle aus: Wirft ein Element seinen Schatten nach unten rechts, sollten alle anderen auf der Seite es auch tun. Gemischte Richtungen lassen eine Oberfläche am schnellsten zusammengestückelt wirken.
- Größere Elemente brauchen größere, weichere Schatten: Eine von der Seite abgehobene Karte trägt eine größere Weichzeichnung als ein Knopf. Weichzeichnung und Versatz mit der Größe des Objekts mitzuskalieren lässt Höhe stimmig wirken.
- Ein einzelner Schatten ist selten der beste: Die Eigenschaft nimmt eine kommagetrennte Liste, und zwei Schatten — ein enger dunkler für die Auflage, ein weiter blasser für das Umgebungslicht — wirken deutlich überzeugender als einer allein.
- Die Ausbreitung darf negativ sein: Ein negativer Wert zieht den Schatten enger als das Element, was für eine dezente Anhebung nützlich ist, die nicht an den Rändern ausblutet.