Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Much blend! So filter! Dieses Tool legt per CSS Bilder übereinander

Filter Blend. (Screenshot: Filter Blend)

Filter Blend ist eine quelloffene Web-App, die es euch erlaubt, mit den CSS-Properties background-blend-mode und filter zu experimentieren.

Filter Blend: Spielplatz für CSS-Property background-blend-mode

Filter Blend ist eine gut gemachte Web-App, mit der ihr Bilder übereinanderlegen und mithilfe von verschiedenen Blend-Modes verschmelzen könnt. Außerdem könnt ihr anschließend verschiedene Filter über das Bild legen. Das Ergebnis könnt ihr allerdings nicht abspeichern. Filter Blend dient eher als Spielwiese, auf der ihr euch mit den Möglichkeiten der CSS-Properties background-blend-mode und filter vertraut machen könnt.

Filter Blend: Die Web-App macht durchaus Spaß. (Screenshot: ilyashubin.github.io/FilterBlend/)
Filter Blend: Die Web-App macht durchaus Spaß. (Screenshot: ilyashubin.github.io/FilterBlend/)

Immerhin könnt ihr aber eure eigenen Bilder zur Bearbeitung hochladen. Den Quellcode von Filter Blend findet ihr auf GitHub. Die App wurde auf Basis der JavaScript-Library Vue.js erstellt. Ebenfalls zum Einsatz kommt das jQuery-Plugin nanoScrollerJS.

Filter Blend: Unterstützung für background-blend-mode hält sich in Grenzen

Das CSS-Property background-blend-mode könnt ihr leider längst nicht in allen gebräuchlichen Browsern verwenden. Der Internet Explorer, aber auch sein Nachfolger Edge können damit nichts anfangen und Safari unterstützt das Property nur teilweise. Genaue Informationen zum Browser-Support von background-blend-mode findet ihr auf canisue.com.

Ebenfalls interessant ist der Artikel „CSS-Shapes und clip-path: So funktionieren die neuen Stylesheet-Techniken“ aus dem t3n Magazin Nr. 39.

via www.webdesignernews.com

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst