CSSCO: Instagram-Filter mit purem CSS

Instagram-Filter erfreuen sich nach wie vor großer Beliebtheit. Der Dienst erfreut sich weiterhin großen Zuspruchs. Um die kreativen Filter nachzubilden, haben sich bereits eine ganze Reihe Entwickler hingesetzt und zumeist auf der Basis von Javascript Lösungen erstellt. In jüngerer Zeit tauchen Derivate auf, die statt Javascript CSS einsetzen. Möglich machen es CSS Filters und Blend Modes.

CSSCO: Instagram-Filter mit purem CSS

CSSgram und CSSCO: CSS Filters und Blend Modes verfremden deine Bilder

Vor einiger Zeit stellte ich dir CSSgram von Una Kravets vor. Heute gesellt sich CSSCO von Lauren Waller dazu. Lauren bezeichnet eben CSSgram neben VSCO auch ausdrücklich als Inspiration für ihre Variante.

CSSCO: Instagram-Filter mit purem CSS

Die Funktionsweise ist ähnlich. Bei CSSgram werden Bilder mit einer Klasse versehen, die dem gewünschten Effekt entsprechen. Bei CSSCO wird die Klasse einem DIV-Container, der das Bild enthält, zugeteilt. In beiden Fällen entspricht die Klasse dem Namen des Effekts.

CSSCO ist mit 15 Filtern gegenüber CSSGram etwas weniger voluminös. CSSgram bietet derer 21. So ist der Einsatz einer der beiden Lösungen am Ende Geschmackssache. Wähle einfach dasjenige, dessen Filter dir letztlich besser gefallen.

CSSCO: Instagram-Filter mit purem CSS

Die Einschränkungen in Sachen Browserkompatibilität sind ebenfalls identisch. Problemlos funktionieren Chrome ab 43, Firefox ab 38, Opera ab 32 und Safari ab 8. Der Internet Explorer bleibt außen vor. Problematisch sind diese Einschränkungen deshalb nicht, weil in nicht unterstützten Browsern die Bilder angezeigt werden, bloß ohne die Effektfilter.

Probiers aus. Es macht Spaß, mit den Filtern zu spielen.

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.