CSS-Filter mit HTML-Attributen steuern

Philter – jQuery-Plugin für CSS-Filter
Kommentare

Nach dem Einfügen von Bildern in eine Webseite schnell nochmal einen Filter drauf setzen? Mit dem jQuery-Plugin Philter ist das kein Problem. Dank Philter lassen sich nämlich CSS-Filter aus HTML-Klassen erstellen – und so kann Content im Web auch nachträglich bearbeitet werden.

Fast jeder kennt es: Man möchte Filter auf seinen Content anwenden, doch diese sehen hinterher nicht so aus wie gedacht. Aber warum gibt es denn dann keinen spezifischen Filter? Philter will dafür eine Lösung anbieten: Das leichtgewichtige jQuery-Plugin bietet maßgeschneiderte Filter für beinahe jeden Wunsch.

Dank Philter kann quasi jeder nachträglich seinen Content im Web bearbeiten. Die Nutzung des jQuery-Plugins soll dabei so einfach wie das Schreiben von Attributen in HTML sein. Um genau zu sein, ist es auch genau das, was Entwickler tun müssen, um mit Philter ihre Bilder zu bearbeiten:

philter codephilter-attribute

Im oberen Bild sieht man die Philter-Attribute, die in der unteren Abbildung angewendet sind. Das kleinere Bild behält nur den Drop-Shadow-Filter bei.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Weitere Features von Philter

Philter unterstützt außerdem Hover-Effekte: So wird zum Beispiel ein Graustufen-Bild, wenn man mit der Maus darüber fährt, wieder zum ursprünglichen vielfarbigen Foto. Für diesen Effekt benötigt man lediglich folgendes Code-Snippet:

<div
  data-philter-grayscale="100 0"
  data-philter-drop-shadow="0 0 3 90 0 0 10 60">
</div>

Auch Transitions sind mit Philter möglich und über selbst gewählte Zeitspannen lässt sich einstellen, wann sie starten sollen. Des Weiteren gibt es individuelle Filter, wie etwa die Farbüberblendung. Mit diesem Filter wird ein Element mit der vorgegebenen Farbe und Deckkraft gefüllt. Außerdem stehen zurzeit folgende Filter zur Verfügung: Unschärfe, Farbtonregelung, Sättigung, Sepia, Kontrast, Farbumkehrung, Deckkraft, Helligkeit und SVG. Weiter Filter sind derzeit noch in Bearbeitung und sollen nach und nach vorgestellt werden.

Die standardmäßigen CSS-Filtersollten von allen gängigen Browsern unterstützt werden, während die kundenspezifischen Filter nur on Firefox, Chrome und Opera funktionieren. Probleme gibt es momentan noch mit einigen SVG-Filtern: So unterstützen sie keine Transitions, keine Hover-Effekte und lassen nur einen Filter pro HTML-Element zu. Entwickler Specro äußert sich wie folgt dazu:

It may be solved in the future… or it may not.

Derzeit steht Philter in Version 1.1.1 auf GitHub zum Download zur Verfügung. Übrigens kann man sich neben der Nutzung von jQuery auch für die Verwendung von VanillaJS entscheiden – Philter funktioniert auch mit diesem Framework.

Name Philter
Hersteller Specro
Projektwebsite http://specro.github.io/Philter/
GitHub https://github.com/Specro/Philter/

Write solid JavaScript Code with TypeScript

mit Thomas Claudius Huber (Trivadis Services AG)

Unlock the Power of JavaScript Decorators

mit Nir Kaufman (500Tech)

API Summit 2017

Moderne Web APIs mit Node.js – volle Power im Backend

mit Manuel Rauber (Thinktecture), Sven Kölpin (Open Knowledge)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

 

Aufmacherbild: close up of filters lense in white background von Shutterstock / Urheberrecht: chinahbzyg

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -