CSS-Filter-Generator
Stellen Sie einen CSS-Filter (Weichzeichnung, Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Invertierung, Farbtondrehung) visuell an einem Vorschaubild ein und kopieren Sie anschließend den erhaltenen Code filter. Es wird nichts an einen Server gesendet: Alles wird direkt in Ihrem Browser berechnet.
So funktioniert es
Die CSS-Eigenschaft filter wendet grafische Effekte (Weichzeichnung, Helligkeit, Kontrast ...) direkt im Browser an, ohne das Quellbild zu bearbeiten. Mit diesem Werkzeug kombinieren Sie mehrere Effekte gleichzeitig an einer Live-Vorschau und erhalten den genauen Wert, den Sie in Ihr Stylesheet einfügen können – für ein Bild, ein Galerie-Vorschaubild oder einen Hover-Effekt.
Verändert der CSS-Filter die ursprüngliche Bilddatei?
Nein. filter ist ein rein visueller Effekt, den der Browser auf die Darstellung des Elements anwendet: Die Bilddatei bleibt auf der Festplatte unverändert. Um ein dauerhaft verändertes Bild zu erhalten, müsste es auf ein Canvas gezeichnet und anschließend exportiert werden.
Kann man einen CSS-Filter beim Hover animieren?
Ja: Kombinieren Sie die Eigenschaft mit einer Regel :hover und einer transition auf filter, dann geht der Effekt fließend von einem Zustand in den anderen über – ein gängiges Verfahren für Portfolio-Vorschaubilder oder Produktkarten.
Es werden weder Bilder noch Daten an einen Server übertragen: Die Berechnung des Filters läuft ausschließlich in Ihrem Browser.