schattenraum.de-Banner

Okay, es sind nicht direkt Banner, eher die sogenannten »Buttons« im bekannten Format 88×31 Pixel. Davon gibt es verschiedene Versionen:


Animierter Button, GIF

21 kB, sieht wegen dem weichen Schlagschatten nur auf weissem Hintergrund gut aus. Eine Version für eine beliebige Hintergrundfarbe erstelle ich gerne auf Anfrage. Bitte diese Grafik nicht auf anderen Hintergründen verwenden; es sieht grausig aus, wie ihr seht.

schattenraum.de
schattenraum.de
schattenraum.de

HTML-Fragment:
<a href="http://www.schattenraum.de"><img src="http://www.schattenraum.de/v3/stuff/banner1.gif" width="88" height="31" alt="schattenraum.de" style="border:0" /></a>


Animierter Button, PNG- & GIF-Kombination

20 kB, dank der Alpha-Transparenz von PNG sieht der weiche Schlagschatten auf jedem Hintergrund gut aus. Da PNG-Animationen noch nirgends laufen, ist hier nur der Schatten ein PNG, die Animation ein klassisches GIF; zusammengesetzt in einem div-Element. Der Internet Explorer unter Windows unterstützt leider als so ziemlich letzter Browser keine PNG-Transparenz und zeigt den Schatten daher unschön an.

Das Ganze ist recht experimentell und prinzipbedingt suboptimal. 13 Jahre Web – und es gibt immer noch keine wirkliche Möglichkeit, Animation und Transparenz zu kombinieren. Aber schick sieht's schon aus.

schattenraum.de
schattenraum.de
schattenraum.de
schattenraum.de
schattenraum.de

HTML-Fragment:
<div style="width:88px; height:31px; background-image:url('http://www.schattenraum.de/v3/stuff/banner2box')"><div style="width:83px; height:26px; position:relative; top:1px; left:1px"><a href="http://www.schattenraum.de"><img src="http://www.schattenraum.de/v3/stuff/banner2ani.gif" width="83" height="26" alt="schattenraum.de" style="border:0" /></a></div></div>


Statischer Button, GIF oder PNG

2 kB, keine Animation. Das src-Attribut des img-Elements enthält den Dateinamen ohne Endung; je nachdem, was der Browser akzeptiert, wird das PNG oder nur das GIF ausgeliefert. GIF nur für weissen Hintergrund (auch hier mache ich gerne eine angepaßte Version), PNG mit Alpha-Transparenz.

schattenraum.de
schattenraum.de
schattenraum.de

HTML-Fragment:
<a href="http://www.schattenraum.de"><img src="http://www.schattenraum.de/v3/stuff/banner3" width="88" height="31" alt="schattenraum.de" style="border:0" /></a>

nach oben
Ich benutze Netscape 4, warum sieht das hier so komisch aus? *