CSSgram ist eine sehr kleine CSS-Bibliothek, die dir ermöglicht, 15 Filter, die du schon von Instagram kennst, per CSS auf beliebige Fotos anzuwenden. Wenn du auf diese Art der Bildverfremdung stehst, kannst du bedenkenlos zugreifen. Denn wesentlich einfacher kannst du schicke Fotoeffekte nicht einsetzen.
CSSgram: 1kb großes Kraftpaket für deine Bilder
Una Kravets aus Austin in Texas zeichnet verantwortlich für das kleine Bildereffektkraftpaket. CSSgram ist unter der liberalen MIT-Lizenz, also frei für den privaten und kommerziellen Einsatz, auf Github erhältlich. Die CSS-Bibliothek befindet sich in sehr aktiver Entwicklung, die allerdings aktuell durch einen kleinen Angriff auf das Repository etwas ins Stocken geraten ist. Das betrifft allerdings nur die künftigen Perspektiven. Die CSS-Bibliothek in ihrer derzeitigen Ausgestaltung mit 15 Filtern funktioniert, so wie ist, sehr gut und zuverlässig.
Die Effektfilter kennst du bereits von Instagram. Wenn dir also der Vintagelook der gängigen Instagram-Filter zusagt, dann ist CSSgram die flexible Filtermaschine für deine Website-Bilder. CSSgram setzt CSS Filters und CSS Blend Modes ein. Du kannst dir also schon denken, dass das nicht in allen Browsern funktioniert. Problemlos funktionieren Chrome ab 43, Firefox ab 38, Opera ab 32 und Safari ab 8. Der Internet Explorer bleibt außen vor. Schlimm ist das indes alles nicht, denn das einzige, was passiert, ist ja, dass der Filter nicht auf das Bild angewendet wird.
Auf der Website zum Projekt kannst du dir alle Filter in voller Pracht ansehen und per Hover direkt den Unterschied zwischen Original und Filtereffekt erkennen. Das sind ein paar der verfügbaren Effekte auf ein Beispielbild angewendet:
CSSgram: So einfach wendest du einen Filter an
Der Einsatz von CSSgram stellt dich selbst dann nicht vor Probleme, wenn du kein ausgewiesener Webdesigner, sondern mehr ein ambitionierter Seitenbetreiber bist. Zunächst musst du die Bibliothek in dein Projekt einbinden. Füge den folgenden Link in die header.php deines Themes ein:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">Das war es schon fast. Jetzt wird lediglich noch das entsprechende Bild mit einer Klasse ausgestattet, die den Filtereffekt angibt, etwa so:
<figure class="aden">
<img src="../img.png">
</figure>Oder einfacher:
<div class="aden">
<img src="../img.png">
</div>Wenn du dich auf einen Effekt begrenzen willst, kannst du eine noch kleinere CSS-Bibliothek, die lediglich diesen einen Effekt bietet, verwenden, z.B.:
<link rel="stylesheet" href="css/vendor/aden.min.css">CSSgram gibt es ebenso für diejenigen, die Sass bevorzugen, in einer entsprechenden Geschmacksrichtung. Hier werden die Effekte dann per @extends definiert. Auch für die Sass-Variante stehen einzelne Dateien pro Effekt zur Verfügung.
Im Ergebnis spricht nichts gegen die Verwendung von CSSgram für schicke Bildeffekte. Lass den Photoshop aus und filtere dir ein paar schicke Bilder zurecht. Das geht schnell und ist nicht destruktiv. Viel Spaß!
