Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • 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

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » CSS » Instagram.css: 42 Instagram-Filter mit CSS nachgebaut

Instagram.css: 42 Instagram-Filter mit CSS nachgebaut

Sozial sein
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Dieter Petereit
  • 8. Januar 2018
Bookmarke mich

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

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.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Agenturpartner

WordPress Werkstatt

Freiburg im Breisgau

HELD Werbeagentur

Traunstein

DAZECON – Webdesign und Marketing

Dresden

Glamourpixel Fotodesign

Gelsenkirchen

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

 →   

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kannst du einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

 →   

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.

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.