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.
Artikel: Fade-In Effekt mit CSS
Datum: Thursday, 08. February 2007, 10:21 Uhr
Kategorien: Sideblog
Feed zum Beitrag: RSS 2.0 · Trackback: Trackback-URL
Diesen Artikel kommentieren.
Journal (Artikel)
8. February 2007
@ 11:49
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.
8. February 2007
@ 13:10
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 :)
8. February 2007
@ 15:19
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. ;-)
8. February 2007
@ 17:55
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 ne Weile propagiert.
12. July 2007
@ 12:18
Krass! stellt er den code frei zu verfügung, dass jeder den einbauen kann??
10. June 2008
@ 13:59
@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.