Instagram-Filter mit CSS-Filtern und Blend Modes nachstellen

CSSgram
Keine Kommentare

Perpetua, Inkwell, Earlybird und Co. – kaum jemand dürfte heutzutage die beliebten Instagram-Filter nicht kennen. Die gibt es jedoch mittlerweile nicht nur in der Instagram-App, sondern dank der leichtgewichtigen Library CSSgram lassen sich Bilder auch direkt in CSS für das Web mit den nachgestellten Filtern bearbeiten.

Dabei werden den eigenen Bildern nicht nur Filter hinzugefügt, sondern auch Farb- und/oder Gradient-Overlays, mit denen sich die beliebten Bildeffekte nachahmen lassen. Der besondere Vorteil daran: es lassen sich mit deutlich weniger Aufwand auffällige Bilder einfügen, weil weniger manuelle Bildverarbeitung nötig wird.

CSSgram: mehr Spaß mit Bildern im Web

CSSgram ist eine extrem leichtgewichtige Library, deren Größe noch nicht mal 1KB gzipped beträgt. Zum Einsatz kommen dabei Pseudo-Elemente wie :after; dementsprechend müssen die Filter auf ein Containing-Element und nicht auf ein Content-Element wie <img> angewandt werden. Am besten werden die zu bearbeitenden Bilder in einem <figure>-Tag gewrappt.

Zudem macht sich die Library CSS Filter und CSS Blend Modes zu Nutze. Beide Features werden bereits von vielen modernen Browsern unterstützt; nur der Internet Explorer und Edge bieten noch keinen Support.

Momentan gibt es zwei Möglichkeiten zur Nutzung von CSSgram: zum einen mit CSS-Klassen, zum anderen mit Sass. Für die Verwendung mit CSS-Klassen wird einfach eine Klasse mit dem entsprechenden Filternamen zu dem Element hinzugefügt, das das Bild beinhaltet. Wird bereits Custom-Naming in der eigenen CSS-Architektur genutzt, kann auch die .scss-Datei für verfügbare Styles im Projekt hinzugefügt und dann die Filter-Effekte mit @extend aufgerufen werden.

Eine Übersicht über die jeweils zur Verfügung stehenden Klassen und Extends bietet der entsprechende Blogpost der CSSgram-Entwicklerin Una Kravets. Dort findet sich auch eine Demo der einzelnen Filter-Effekte; weitere Informationen zur Nutzung der Library stehen zudem auf GitHub zur Verfügung.

Name CSSgram
Hersteller Una Kravets
Projektwebsite http://una.im/CSSgram/
GitHub https://github.com/una/CSSgram
webinale – the holistic web conference

Webperformance und Page Speed 2021

mit Sven Wolfermann (maddesigns)

UX Design: Kitsch – du willst es doch auch!

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

 

Software Architecture Camp

Advanced Web Pentesting

mit Christian Schneider (Schneider IT-Security)

What Star Wars Taught Me About Secure System Design

mit Anne Oikarinen (Nixu Corporation)

Aufmacherbild: a bulldog close up of his face taking a selfie with a camera cell phone toned with a retro vintage instagram filter effect von Shutterstock / Urheberrecht: Annette Shaff

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -