Drücke die Tasten ◄ ► für weitere Artikel  

CSS FilterLab: Beeindruckende CSS-Effekte zum Zusammenklicken

CSS 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 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.

122 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
3 Antworten
  1. von Michael am 07.11.2012 (17:09Uhr)

    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.

  2. von Anja Windmüller via facebook am 08.11.2012 (08:24Uhr)

    wow!

  3. von Moonbase: HTML5-Animationen für jederma… am 10.01.2013 (17:51Uhr)

    [...] noch einige Features wie eine Timeline, ähnlich der Timeline bei Adobes CSS-Filter Lab (einer Moonbase-Alternative für Coder) durchaus wünschenswert. Wer Moonbase ausprobieren will, kann auf der Projekt-Website ohne [...]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch

CSS Diner ist ein kleines Spiel, bei dem ihr mit CSS-Selektoren verschiedene Elemente aus einer interaktiven Grafik auswählen müsst. In diesem Artikel zeigen wir euch, warum dieses Spiel nicht... » weiterlesen

Hover.css: 50 Hover-Effekte für deine Webseite
Hover.css: 50 Hover-Effekte für deine Webseite

Hover.css bietet dir eine Sammlung von Hover-Effekten, die du auf verschiedene Elemente deiner Website anwenden kannst. Heute stellen wir dir diese kleine, aber feine CSS-Bibliothek kurz vor. » weiterlesen

CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik
CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik

Google- und Opera-Entwickler sehen keine Zukunft für CSS-Regions in der Blink-Engine. Bei Google sieht man in der Unterstützung vor allem ein Performance-Hindernis. » weiterlesen

Kennst Du schon unser t3n Magazin?

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