Fade-In Effekt mit CSS
Stu Nicholls ist der CSS–Magier schlechthin. Was er mit CSS umsetzt, ist andernorts nur mit JavaScript möglich. Sinn und Praktikabilität mal außen vor gelassen, ist es einfach nur faszinierend.
Sein neuester Streich ist ein Fade-In Effekt für Grafiken, der wiederum mit purem CSS in Szene gesetzt wird. Das Ganze wird durch sich überlappende Listeneinträge (LI) mit einem :hover Pseudoelement erreicht. 11 verschiedene Elemente mit unterschiedlicher Transparenz (opacity) sorgen beim Überfahren eines Thumbnails mit der Maus für eine sanfte Einblendung des großen Bildes.
Schaut man sich den Code für diesen Effekt an, ist ein CSS–Fade-In in der Praxis wohl eher fehl am Platz (zumal wieder Extra-Code für zwei Internet Explorer Versionen benötigt wird :-/). Aber erstaunlich ist es allemal.
Frank
08.02.2007
12:49 CET
Erstaunlich ist es wirklich, wenn ich auch den Codeaufwand nicht für solch einen Effekt betreiben wollte. Woher nehmen die nur immer die Motivation für solche Umsetzungen?
Danke für die Info und Link.
Frieder
08.02.2007
14:10 CET
Genauso wie sich manche Leute tagelang hinsetzen und merkwürdige verschachtelte Tags und Objekte im HTML ausprobieren, nur um den Internet Explorer abstürzen zu lassen :)
Relativ unnütz das Ganze, aber doch sehr eindrucksvoll. Auch wenn glaube ich User die Javascript deaktiviert haben, genau das nicht sehen wollen :)
John
08.02.2007
16:19 CET
Ich glaube für Stu ist das Hobby. Viele seiner »Erfindungen« sind ja nur zum Testen und Anschauen, wobei die Menü-Beispiele durchaus einsetzbar sind. Er irgendwie ist er ein begeisterter Entdecker. ;-)
Weiß nicht. Ich denke die meisten (der wenigen) Leute die JavaScript deaktiviert haben, verwechseln Java (vielleicht auch ActiveX) mit JavaScript und haben riesige Befürchtungen, durch JS kommen Trojaner und Würmer auf ihren Rechner. Da ist noch Aufklärungsarbeit notwendig. ;-)
Felix
08.02.2007
18:55 CET
Oder es sind Leute, die glauben, sich mit deaktiviertem JS ohne Werbung, Viren und anderen bösen Dingen durchs Web bewegen zu können. Ich glaube, Computer-Bild hat das mal né Weile propagiert.
Johannes
12.07.2007
14:18 CET
Krass! stellt er den code frei zu verfügung, dass jeder den einbauen kann??
Jan
10.06.2008
15:59 CET
@Johannes: Du kannst den Code doch im Quelltext sehen – er ist meines Erachtens nicht übersehbar :)
Die Idee dahinter ist klasse – die Umsetzung leider für den Browser aufwendig.