Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSSgram: Bildeffekte wie auf Instagram mit CSS

CSSgram: Bildeffekte wie auf Instagram mit CSS

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Dieter Petereit
  • 7. November 2015

Inhaltsverzeichnis

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: Bildeffekte wie auf Instagram mit CSS

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-beispiele

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ß!

Dieter Petereit

Dieter Petereit

Dieter Petereit 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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo der Online Marketing Experts aus Augsburg.

Online Marketing Expert Team

Augsburg

Andrea Becker Design Logo.

design andrea becker

Frankfurt am Main

Trendmarke Logo.

Trendmarke GmbH

Stuttgart

CAF chris and friends berlin Logo.

CAF Webdesign Agentur

Berlin

SEO-Sicht Agentur Berlin Logo.

SEO-Sicht

Berlin

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑