CSS-Filtergenerator

Der CSS Filter Generator ist ein visueller Editor für die CSS-Filtereigenschaft Sie verschieben einen Schieberegler für jede Filterfunktion - Unschärfe, Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Invert, Farbtonrotation und Deckkraft - und beobachten, wie der Effekt in Echtzeit auf eine Vorschau zutrifft, und kopieren dann genau das CSS, das er erzeugt.

Die Filtereigenschaft wendet grafische Effekte wie Unschärfe, Farbverschiebung und Kontrastanpassung direkt im Browser an, ohne dass ein Bildeditor erforderlich ist. Mehrere Funktionen können in einer einzigen Deklaration verkettet werden und werden in der Reihenfolge angewendet, so wie Vintage, warm und dramatisch aussehen. Dieses Tool verwaltet diese Kette für Sie und gibt nur die Funktionen aus, die Sie tatsächlich geändert haben, und halten das CSS sauber.

Alles passiert in Ihrem Browser. Beginnen Sie mit einer Voreinstellung wie Vintage oder Graustufen, stimmen Sie jede Funktion ab und kopieren Sie die Deklaration. Kein Konto, kein Upload und es funktioniert weiterhin offline, sobald die Seite geladen wurde.

Filter gelten in der geschriebenen Reihenfolge, und die Reihenfolge ändert das Ergebnis: Graustufen dann Sepia ist nicht dasselbe wie Sepia dann Graustufen, weil die erste die Farbe entfernt, die die zweite tönen würde Das wissenswerte Gotcha ist eher strukturell als visuell Jedes Element mit einem anderen Filter als keinem wird zu einem enthaltenden Block für seine festen und absolut positionierten Nachkommen, sodass sich ein Dropdown oder Modal innerhalb eines gefilterten Elternteils anstelle des Ansichtsfensters gegen diesen Elternteil positioniert. Es erstellt auch einen neuen Stapelkontext, der die zuvor funktionierende Z-Index-Reihenfolge aufbrechen kann Wenn ein Filter ein Layout auf eine Weise auflöst, die nichts mit dem Aussehen zu tun hat, ist das fast immer der Grund. Filter sind GPU-beschleuniger, aber bei den meisten Radii groß.