Vorheriger Artikel Nächster Artikel

CSS FilterLab: Beeindruckende CSS-Effekte zum Zusammenklicken

FilterLab bietet einen spannenden Ausblick auf Adobe's CSS Custom Filter, die schon bald zum Standard in der Browserlandschaft werden und beeindruckende Effekte mit reinem CSS ermöglichen sollen.

CSS FilterLab: Beeindruckende CSS-Effekte zum Zusammenklicken

CSS FilterLab ist ein Browser-Tool, das euch mit CSS-Filtern experimentieren und die Ergebnisse in Echtzeit sehen lässt.

Im Oktober 2011 reichten drei Ingenieure von Adobe, Apple und Opera einen Vorschlag bei der W3C ein, den sie CSS Shaders nannten. Es ging darum, grafische Effekte, wie sie mit Direct3D oder OpenGL nativ bereits möglich sind, per CSS auf HTML-Elemente anzuwenden. Damit ließen sich beeindruckende Effekte erzielen. Dieser Vorschlag hat sich entwickelt und ist nun auf dem Weg, ein fester Bestandteil der Browserlandschaft zu werden. Aus CSS Shaders sind CSS Custom Filter geworden. Mit CSS FilterLab lassen sich die Möglichkeiten dieser Erweiterung live testen.

Screenshot vib Adobe CSS FilterLab
Adobe CSS FilterLab

Die Bedienung von CSS FilterLab gestaltet sich sehr einfach. Nachdem alles geladen ist, kann sofort mit dem zur Verfügung bestellen Beispielbild losgelegt werden. Durch das "Add Filter"-Menü in der Seitenleiste können Filter hinzugefügt werden. Diese unterteilen sich in "Built-in Filter" und "Custom Filter".

  • Built-in Filter sind von Anfang an im Browser verfügbar. So können Effekte wie Weichzeichnen, Graustufen und Schlagschatten angewandt werden.
  • Custom Filters sind tiefgehende Effekte wie Falten, Auflösen oder der Vorhang-Effekt. Diese basieren auf kleinen Programmen, so genannten Shadern, die mit Hardware-Beschleunigung eine sehr genaue Kontrolle über Geometrie und Farbe der jeweiligen Elemente erlauben.

Die Effekte lassen sich in Ebenen übereinander anordnen und kombinieren. Nachdem ein Filter zum Projekt hinzugefügt wurde, besteht die Möglichkeit, in der Seitenleiste der App die Parameter des Effektes anzupassen.

Screenshot: CSS FilterLab Effekte
CSS FilterLab Effekte

Animationen

Im unteren Bereich des Tools findet sich eine Timeline wieder, mit der Keyframe-Animationen realisiert werden können. Keyframes können hinzugefügt, in der Timeline hin und hergeschoben und entfernt werden, sodass die Animation genau getimt werden kann. Die Länge der Animation kann mit dem Textfeld neben der Timeline in Sekunden angegeben werden.

So kann die Performance und das Potential der Technologien hinter CSS FilterLab getestet werden.

Code Output

Um zu demonstrieren, dass die Technologie hinter CSS FilterLab wirklich reines CSS ist, bietet das Tool eine Code-Ausgabe. Alle Effekte, die auf das Bild angewandt werden, stehen im unteren Bereich als CSS zur Verfügung – zum kopieren und selbst testen. Dabei sollte man im Hinterkopf behalten, dass CSS-Filter derzeit gerade erst damit anfangen, sich ihren Weg in die Browserlandschaft zu bahnen. Dieser Umstand wird schon beim Testen des Tools klar – einige der Filter funktionieren erst nach Installation von Erweiterungen.

Eigene Custom Filter schreiben

Für alle, die vor komplexer Mathematik nicht zurückschrecken, steht der Shader Editor zur Verfügung. Um eigene Filter erstellen zu können genügt ein Klick auf das kleine Fork-Icon neben den jeweiligen Custom Filtern. Im Reiter "Forked Custom" steht euch dann der jeweilige Filter zur Bearbeitung zur Verfügung. Von dort aus habt ihr die volle Kontrolle über die Shader, die mit der OpenGL Shading Language (GLSL) gesteuert werden können. Alle Änderungen werden automatisch im lokalen Browserspeicher gesichert. Außerdem können die veränderten Filter aus dem CSS FilterLab direkt als Gist auf Github veröffentlicht und geteilt werden, sodass andere Benutzer die Filter über den "Import via Gist" Reiter in ihr CSS FilterLab importieren können.

Adobe CSS FilterLab Filter Editor
Adobe CSS FilterLab Filter Editor

CSS FilterLab - Spannender Blick in die Zukunft

CSS FilterLab gibt einen Ausblick auf das, was in nicht allzu ferner Zukunft bei der Webentwicklung möglich sein wird. Die Technologie öffnet Webworkern viele Türen, um ihre Projekte noch interaktiver und beeindruckender zu machen und lässt auf viele spannende Webseiten und Apps hoffen, nachdem die Technologie standardmäßig implementiert ist. Für den Augenblick bleibt es aber ein Blick über den Tellerrand und ein spannendes Experiment. Auf der Webseite von CSS Filter Lab könnt ihr euch jetzt von Adobes Tool überzeugen.

Über den Autor

Ilja bigIlja Zaglov ist selbstständiger Kommunikations- & Mediendesigner. Er unterstützt kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline-Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Michael am 07.11.2012 (17:09 Uhr)

    Super Tool, funtionier sogar auf dem iPhone. Nur die Custom Filter Funktion wird von iPhone nicht unterstützt. Werde ich in Zukunft aber bestimmt öfter mal nutzen. Besonders genial finde ich, dass Adobe die Sourcen unter github öffentlich macht. So kann man das Repo. schnell mal clonen und eigene Anpasungen am Tool vornehmen.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
CSS-Architektur im Einsatz: So sehen Stylesheets bei Ghost aus
CSS-Architektur im Einsatz: So sehen Stylesheets bei Ghost aus

Wir zeigen euch, wie das Team der Blogging-Plattform Ghost in Bezug auf CSS mit Benennungsregeln, Ordnerstruktur, Datai-Layout und andere Details umgeht. » weiterlesen

Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos
Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos

TheCodePlayer zeigt euch im Zeitraffer, wie Projekte in HTML5, CSS und JavaScript entstehen. Links seht ihr wie der Code eingegeben wird, während das Projekt auf der rechten Seite mehr und mehr … » weiterlesen

20 Jahre Cascading Style Sheets: Wie CSS das Web verändert hat
20 Jahre Cascading Style Sheets: Wie CSS das Web verändert hat

Die Cascading Style Sheets werden heute 20 Jahre alt. Wir werfen einen Blick auf die Geschichte von CSS. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen