cssfilters-teaser

CSS Only No.4: Filter Effects & Blend Modes

Kommentare 0
Blog

Die Verwendung von Filter-Effekten wie Grayscale, Contrast, Hue, Brightness oder Blur per CSS sind in der letzten Zeit immer populärer geworden. Nicht zuletzt weil Web-Designer diese Effekte aus professionellen Bildbearbeitungs – und Designtools wie Photoshop kennen und seit jeher anwenden. Auch die CSS-BlendModes (Overlay, Multiply, Screen etc.) sind in der Webentwicklung (zumindest unter Gestaltern) eine sehr gefragte Darstellungsform.

Mittlerweile werden diese Effekte laut caniuse.com auch auf den gängigen Browsern unterstützt. Nur der Internet Explorer (wer auch sonst) und Opera Mini bilden die Ausnahme.

caniuse-blendmodes

caniuse-filters

CSSFilters

Das Online-Tool cssFilters.co bietet die Möglichkeit, eigene Bilder hochzuladen und neben vorgegebenen Bildstilen mittels Schiebereglern eigene Stile zu erstellen. Hierbei können jegliche Effekte miteinander kombiniert werden.

cssfilters-gui

Der entsprechende CSS-Code für automatisch generiert und kann somit einfach in das eigene Projekt übernommen werden. Für jemanden wie mich, der aus der grafischen Ecke der Webentwicklung kommt, ein sehr hilfreiches Tool!

Filter Blend

Filter Blend versteht sich als Spielwiese zum Thema CSS Filter und Blend Modes. Auch hier können sämtliche Blendmodes ausprobiert und mit eigenen Bildern und Hintergrundfarben kombiniert werden. Der entsprechende CSS-Code wird zeitgleich angezeigt.

filterblendscreenshot

CSSCO & CSSgram

Bei CSSCO und CSSgram handelt es sich jeweils um CSS-Libarys für Fotofilter. Letztere setzt optisch darauf den „Instagram-Style“ nachzuempfinden. Es muss einfach die jeweilige Datei runter geladen und eingebunden werden. Jetzt bekommt das Bild die gewünschte Klasse zugewiesen. Das wars!

Web Code Tools

Auch auf Web Code Tools findet man unter der Sparte CSS3 einiges zu Filtern und Blend Modes. Der CSS-Generator zeigt zudem gleich die Unterstützung der Browser an.

webcodetoolsscreenshot

Mir als Gestalter geht bei der Verwendung von Blend Modes natürlich das Herz auf. Nicht zuletzt weil ich die Möglichkeit der visuellen Effekte aus Photoshop kenne und auch gern nutze. Die Option diese auch CSS basiert einzusetzen lässt den Gestaltungsspielraum für Interfaces stark wachsen. Denkt man nur daran Bildebenen und Schrift scrollabhängig übereinander laufen zu lassen oder auch einfach nur unterschiedliche Hoverzustände abzubilden.

Schreibe einen Kommentar