Kostenloser CSS-Code-Generator für Instagram-Style-Filter

Wie cool wäre es, Ihrer Website Bildfilter hinzuzufügen? Vor Jahren hätte dies JavaScript erfordert, aber heutzutage können Sie benutzerdefinierte Bildfilter mit gutem alten HTML und CSS erstellen.

Und mit der cssFilters-Webapp müssen Sie gar keinen CSS-Code schreiben!

Dieses kostenlose Tool hilft Ihnen beim Erstellen benutzerdefinierter Bildfilter mit CSS3-Filtern. Sie finden viele Handbücher, die die CSS-Filtereigenschaft ausführlich behandeln. Mit cssFilters müssen Sie sich jedoch keine Gedanken darüber machen, wie alles funktioniert. Sie müssen lediglich Ihre Einstellungen anpassen und den Code kopieren.

Oben auf dem Bildschirm sehen Sie eine lange Leiste mit benutzerdefinierten Instagram-Filtern. Diese Filter umfassen alle gängigen Optionen wie Hudson, Toaster, Inkwell, Lofi und viele andere.

Klicken Sie einfach auf den gewünschten Filter und klicken Sie dann auf “CSS-Code” Registerkarte in der oberen rechten Ecke. Von dort erhalten Sie sowohl den HTML- als auch den CSS-Code. Einfach in Ihre Website kopieren / einfügen und schon kann es losgehen.

Sie können diese Filter jedoch auch mit den Einstellungs-Schiebereglern anpassen. Unter dem “Generator” Auf der Registerkarte können Sie Einstellungen wie Sättigung und Kontrast sowie Unschärfe, Graustufen, Sepia und sogar den Überlagerungsstil wie einen linearen Farbverlauf oder einen radialen Farbverlauf ändern.

Jedes Mal, wenn Sie einen Schieberegler verschieben, wird der Code automatisch aktualisiert, sodass Sie nichts speichern müssen.

Sie können sogar das Standardbild austauschen, indem Sie eines von Ihrem Computer hochladen oder eines von Unsplash auswählen.

Diese Web-App wurde von Indrashish Ghosh erstellt und führt viele der Standardklassen aus der CSSgram-Bibliothek aus.

Die benutzerdefinierten Einstellungen gehen jedoch weit über die grundlegenden Voreinstellungen hinaus, und die kostenlose Codegenerierung macht dieses Programm zu einem nützlichen Werkzeug für Codierer und Nicht-Codierer. Wir haben bereits viele CSS3-Generatoren für Eigenschaften wie Hintergrundverläufe und Textschatten. Und jetzt haben wir cssFilters als CSS3-Filtergenerator für Premiere.