LautundKlar Webdesign Blog

LautundKlar Webdesign Agentur Passau - Webdesign Weblog

Victor Hugo:
Ein Traum ist unerlässlich, wenn man die Zukunft gestalten will.

LautundKlar Webdesign Blog

Weblog zum Thema Webdesign, auf dem wir in unregelmäßigen Abständen zu interessanten Artikeln verweisen und Tipps zu bestimmten Problemen (Webdesign, CSS, PHP, JavaScript, Typo3 etc.) geben wollen.


Fade Out Bottom

Mittwoch, 7. November 2007

Fade Out Bottom

Ein cooler Effekt, bei dem die Fußzeile einer Webseite wirkt als würde sie “ausfaden”. Der Effekt wird durch ein div mit fester position (bottom:0%), einer transparenten PNG Grafik und einem sehr hohen z-index realisiert.

Fade Out Bottom

Es gibt außerdem ein Beispiel zum herunterladen.

Popularity: 100% [?]

7 Kommentare »

Der Trick funktioniert allerdings nicht im IE6, wie ich soeben feststellen musste.

Kommentar von Sven Wagener

13. Dezember 2007 @ 16:39

Gravatar

..ist klar, weil IE6 Probleme mit transparenten PNGs hat.

Kommentar von Andreas Jobst

13. Dezember 2007 @ 17:08

Danke für die Info.
Das Beispiel werde ich mir mal ansehen.
Ein cooler Effekt,klasse!

Kommentar von Luftgucker

9. Januar 2008 @ 20:54

Eventuell kann man auch den IE6 dazu bewegen. Mit pngbehavior.htc sollte es klappen.

Kommentar von Stefan

29. März 2008 @ 20:30

Wahnsiiiiin hab so lange das gesucht und endlich….bei dir gefunden! Meinst du, es ist für Wordpress auch realisierbar? Ich habe plugins, die bei Blogspot funktionieren, auf Wordpress versucht, war aber leider eine halbe Katastrophe….

Kommentar von superheiko1984

7. Juli 2010 @ 23:12

meinst du, es klappt auch mit Wordpress? wird eine simple CSS-Technik verwendet oder? ich meine die sich ein transparentes .png-Bild sowie die z-index-Eigenschaft zunutze macht…?

Kommentar von superheiko1984

7. Juli 2010 @ 23:15

Gravatar

klar, funktioniert auch mit wordpress. nur nicht im ie6 wegen fehlender png24 unterstützung. aber ie6 ist inzwischen eh eher unwichtig.

Kommentar von Andreas Jobst

8. Juli 2010 @ 02:25

RSS-Feed für Kommentare zu diesem Beitrag. TrackBack-URI

Einen Kommentar hinterlassen

XHTML: Sie können diese Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Kommentarlinks könnten nofollow frei sein.



blogCloud bloggerei.de supported by www.rankingcloud.de Gelistet im Blog Verzeichnis

PantherMedia -  Fotocommunity und Bildagentur für lizenzfreie Fotos
 Bildsuche: lizenzfreie Fotos