Dieter Petereit 8. Januar 2018

Instagram.css: 42 Instagram-Filter mit CSS nachgebaut

Irgendwas müssen die Filter von Instagram ja haben, wenn sie so beliebt sind. Mit dem kostenlosen Instagram.css kannst du nun eben jene Filter auf beliebige Bilder deiner Website loslassen.

Inspiriert von CSSgram, aber einen Schritt weiter

Vor fast drei Jahren fiel mir schon einmal ein ähnliches CSS-Projekt in die Hände Es handelte sich um CSSgram der bekannten Designerin Una Kravets aus Texas. Damals bot das Script 15 der beliebten Filtereffekte. Bis zum heutigen Tage ist der CSSgram-Fundus auf 27 Effekte gewachsen.

Yan Zhu, Frontend-Entwickler aus Seattle, nahm sich CSSgram als Inspiration und entwickelte seine eigene Lösung namens Instagram.css, die allerdings mit 42 Filtern kommt und damit, wenn ich richtig gezählt habe, vollständig die Instagram-Filterwelt abbildet. Komprimiert bringt es das kleine CSS auf 2 kb und ist damit unwesentlich größer als das Vorbild. Immerhin ist es auch leistungsfähiger.

Die Demo kannst du dir hier ansehen, das Projekt selber findest du auf Github. Instagram.css ist frei verwendbar, sowohl in persönlichen, wie auch kommerziellen Projekten, etwa für Kundenaufträge. Es steht unter der liberalen MIT-Lizenz.

Der Einsatz ist simpel

Zunächst lädst du dir das Projekt herunter und auf deinen Webspace wieder hoch. Der Einfachheit belässt du es bei den Dateipfaden, speziell, wenn du mehr Seitenbetreiber als Designer bist. Ansonsten ist es natürlich wurscht, wo du dein CSS platzierst. Du musst halt den folgenden LInk dann anpassen.

Nun baust du das Stylesheet in den Head deines Dokuments ein:

<link rel="stylesheet" href="dist/instagram.css">

Um jetzt Filter auf deine Bilder zu legen, verwendest du das HTML5-Element figure in dieser Weise:

<figure class="filter-[filter-name]">
  <img src="assets/img/instagram.jpg">
</figure>

Jeder der verfügbaren Filter hat einen Namen, den du als Klasse an das Figure-Element hängst, so heißt etwa der Aden-Filter filter-aden. Kein Hexenwerk. Alle Filternamen entnimmst du dem CSS oder dem Readme auf Github.

Browserkompatibilität

Maximal kompatibel sind Chrome (18+), Microsoft Edge (13+), Firefox (35+), Safari (6+) und Opera (15+). Mittels Autoprefixer ist dafür gesorgt, dass auch weniger moderne Browser die meisten Filter darstellen können sollen.

Instagram.css basiert auf SASS. Die .scss findest du ebenso im Github-Repository.

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 diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück