Filter

Blur-Effekt mit Flash

Zu Beginn wird ein Bild angezeigt, das mit einem Gaussfilter in Photoshop weichgezeichnet wurde. Fährt man mit dem Cursor darüber, wird das Bild langsam schärfer, bis es schließlich die ursprüngliche Schärfe erreicht hat. Dies wird einfach durch kontinuierliche Änderung des Alpha-Wertes des scharfen Bildes erzielt.

Hinweis: Der Code für die Einbindung von Flash-Movies ist leider nicht XHTML 1.0 strict konform!

Nach einem Tutorial von Actionscript.org


Blur-Effekt mit SVG

Links wird das Original-Bild angezeigt. Rechts wird mit Hilfe eines SVG-Filtereffekts ein Weichzeichner über dasselbe Bild gelegt.

Bild einer Tulpe

Original

Original mit SVG-Filter

Nach dem Buch "Moderne Webentwicklung: Geräteunabhängige Entwicklung - Techniken und Trends in HTML5, CSS3 und JavaScript" von Peter Gasston (dpunkt.verlag 2014)

Kleine Seitenbemerkung: Seit meinen letzten Layout-Experimenten hat sich viel getan! Die Anordnung der beiden Bilder und der Begleittexte wurde mit Hilfe des "Flexible Box Layout" CSS Moduls realisiert. Ich hätte auch gerne das "Grid Layout" ausprobiert, dieses wird jedoch von den Browsern (noch) kaum unterstützt!