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 der Reihe nach angewendet, sodass im Fotostil aussehen wie Vintage, Warm und Dramatik aufgebaut sind. Dieses Tool verwaltet diese Kette für Sie und gibt nur die Funktionen aus, die Sie geändert haben, wodurch das CSS sauber bleibt.

Alles passiert in Ihrem Browser Die Seite öffnet sich auf der Vintage-Voreinstellung; wählen Sie eine andere Voreinstellung, feilen Sie jede Funktion ab, und kopieren Sie die Erklärung Kein Konto, keine Uploads, und es funktioniert offline weiter, sobald die Seite geladen wurde.

Hier ist der CSS-Filtergenerator für einen warmen Foto-Look Klicken Sie auf den Warm-Voreingestellten und Generated CSS-Lesefilter: Helligkeit (105%) sättigen (140%) sepia (25%); wobei sich die Vorschau in Richtung Bernstein verschiebt Ziehen Sie Unschärfe auf 2 px und die Linie wird Filter: Unschärfe (2 px) Helligkeit (105%) sättigen (140%) sepia (25%); Klicken Sie auf Keine, oder drücken Sie auf Zurücksetzen, und es kehrt zum Filtern zurück: keine; Da die Vorschau eine feste Farbprobe und nicht Ihr eigenes Foto ist, überprüfen Sie das kopierte CSS auf dem realen Bild, bevor Sie es versenden.

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. Die wissenswerte Gotcha ist strukturell und nicht 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 an diesem Elternteil und nicht am Ansichtsport positioniert. Es erstellt auch einen neuen Stapelkontext, der die Z-Index-Reihenfolge aufbrechen kann. Wenn ein Filter ein Layout auf eine Art und Weise auflöst, die fast immer nicht groß ist.