Wofür CSS-Box-Shadow gedacht ist
Eine Zeile box-shadow stellen Sie hier aus fünf Größen zusammen: Versatz nach rechts und nach unten, der Weichzeichnungsradius, die Ausbreitung und eine Farbe mit eigener Deckkraft. Das Kästchen unter den Reglern übernimmt jede Änderung sofort, und das fertige CSS steht in rgba-Schreibweise bereit – ohne dass Sie die Reihenfolge der vier Längenwerte nachschlagen müssten.
Bedienung
- Horizontalen und vertikalen Versatz einstellen
- Weichzeichnung und Ausdehnung justieren
- Farbe und Deckkraft wählen, der Wert fließt in rgba ein
- Inset-Schalter für innen setzen und Ergebnis kopieren
Typische Anwendungen: Einer Schaltfläche einen flach unter ihr liegenden Schatten geben, der die Kiste leicht vom Hintergrund hebt, Ein innen liegendes Highlight für eine Eingabefläche bauen, als käme Licht von oben, Den Standardabstand einer Karte durch Austarieren von Versatz und Weichzeichnung ohne Probieren im Editor treffen.
Fragen und Antworten
Was ist der Unterschied zu Inset?
Ohne Inset liegt der Schatten außerhalb, mit Inset liegt er innerhalb des Elements.
Warum steht die Farbe als rgba da?
Deckkraft und Farbe werden zu einem rgba-Wert zusammengefasst, damit die Transparenz direkt sichtbar ist.
Kann ich mehrere Schatten stapeln?
Dieses Werkzeug erzeugt einen Schatten. Mehrere geben Sie durch Kommas getrennt von Hand ein.
Was bewirkt die Ausdehnung?
Sie vergrößert oder verkleinert den Schatten, ohne die Weichzeichnung zu ändern.
Einschränkungen
Der Regler erzeugt immer genau einen Schatten; mehrere Ebenen wie eine ferne Lichthülle und ein naher Schlagschatten nebeneinander fügen Sie per Komma von Hand zusammen, weil die Vorschau nur eine Lage darstellt. Mit Inset wechselt der Schatten von außen nach innen, und die Deckkraft fließt als vierter rgba-Wert ein. Negative Werte bei Versatz oder Weichzeichnung sind ausgeschlossen, da der Standard sie ungültig beschreibt.
Was das Werkzeug kann
Versatz in X und Y als Regler, Weichzeichnung und Ausdehnung, Farbe und Deckkraft wählbar, Inset-Schalter für innere Schatten
Schatten und Effekte drehen: