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

Instagram-Filter außerhalb der App benutzen: Mit CSSGram macht ihr eure Bilder schick fürs Web

(Bild: CSSgram/Montage: t3n)

Instagram ist im Trend, über 80 Millionen Bilder werden täglich geteilt und mit hübschen Filtern verziert. Damit wir diese Instagram-Filter jetzt auch auf unserer Webseite einsetzen können, gibt es CSSgram. Wir haben uns das Tool angeguckt.

CSSgram erfindet das Rad nicht neu, sondern setzt auf aktuelle CSS3-Techniken. Mit ihnen können wir normale Bilder mit Instagram-Filtern verschönern. Dazu benötigen wir nur CSSgram und eine Webseite. Die Bearbeitung und Benutzung erfolgt über CSS-Klassen, die wiederum den richtigen Filter über ein Bild legen.

Instagram-Filter mit CSSgram einsetzen

Um CSSgram benutzen zu können, müssen wir zuerst den Quellcode von der offiziellen Webseite oder dem GitHub-Repository runterladen. Dann können wir die kleine CSS-Datei in unsere Webseite einbetten:

<link rel="stylesheet" href="css/vendor/cssgram.min.css">

Sobald die Datei eingebunden ist, können wir unsere Bilder mit dem Filter belegen. Dazu empfiehlt sich folgendes HTML-Markup:

<!-- HTML -->
<figure class="aden">
<img src="../img.png">
</figure>

Über das Attribut class wird der richtige Filter über das Bild gelegt. Dafür einsetzen können wir folgende Werte:

  • aden
  • reyes
  • perpetua
  • inkwell
  • toaster
  • walden
  • hudson
  • gingham
  • mayfair
  • lofi
  • xpro2
  • _1977
  • brooklyn

Wer lieber mit Sass arbeitet, kann natürlich auch das benutzen.

Das Originalbild (Screenshot: CSSgram)

1 von 15

Die Filter werden mit den CSS3-Techniken CSS-Filters und CSS-Blend-Modes erzeugt. Daher können aktuell nur moderne Browser die Filter darstellen. Der Internet Explorer unterstützt leider überhaupt keinen Filter und kann somit CSSGram nicht ausführen. Was aber wiederum auch nicht weiter schlimm sein sollte, da es eher ein Nice2Have-Feature ist.

Zudem sollte noch explizit erwähnt werden, dass die Bilder nur einen CSS-Filter besitzen – sobald die Bilder lokal aufgerufen werden, ist der Filter weg. Alle Filter werden nur zur Laufzeit mit CSS erzeugt und sind nicht Bestandteil des Bildes.

Wer sich noch unsicher ist, ob CSSGram wirklich gut ist, kann direkt auf der Webseite mit eigenen Bildern experimentieren.

Welche Instagram-Filter fehlen euch in der Sammlung noch?

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Chris

Die Idee ist ganz nett, aber der Browser Support ist ein absolutes No-Go. Wenn ich die Seite von CSSGram (http://una.im/CSSgram/) in meinem Internet Explorer öffne, werden mir zwei Filter ("earlybird" und "toaster") komplett fehlerhaft angezeigt und "zerstören" somit das ganze Bild.
Selbst Edge bietet im moment nur partiellen Support für die CSS Eigenschaften.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.