GIF halbnackt

Durchscheinende Grafiken, transparent wie Tüll-Gardinen, sind eine sommerlich-leichte Alternative zu gewöhnlichen Grafiken. Möglich werden sie durch ein Muster aus Farben und Transparenz. Ein Blick durch die Lupe zeigt die Details.

Das Tolle daran ist, man benötigt zum Erstellen von “halbtransparenten GIFs” keine neue Software. Man erstellt sie, indem man farbige und transparente Pixel abwechselnd setzt. Mehr als eine Fläche von 6*6 Pixel muss, Dank des Kacheleffekts, nicht bearbeitet werden.

“Halbtransparentes” Gif. Die weiß erscheinenden Pixel sind transparent.

Verwendet man unterschiedliche Pixelkombinationen, ergibt das interessante, abwechslungsreiche Muster. Beispielsweise Quer- oder Längsstreifen. Solche halbtransparenten Grafiken können über Seitenhintergründe gelegt werden, die dann durchscheinen.

Sommerlich leicht – mehrere Farben übereinander

Der Hintergrund besteht aus einem 1 Pixel hohen und 1600 Pixel breiten Gif, das kachelt (sich selbst wiederholt). Dadurch entsteht der Balken. Darüber liegt eine Tabelle deren Zellen mit Hintergrundgrafiken aus halbtransparenten Gifs bestückt sind. Sie können auch mehrere Bilder übereinander legen:

Übereinander liegende Bilder – Ansicht im Dreamweaver

Das kolorierte Foto ist aus einer verschachtelten Tabelle entstanden. In der untersten Ebene befindet sich als Hintergrund ein Graustufen-Bild. In der darauf liegenden Tabelle wurden verschiedene halbtransparente Gifs verwendet.

Der Quellcode dieser Konstruktion ist überraschend unkompliziert:

 <table width="146"
border="0" cellspacing="0" cellpadding="0" height="166"
align="left">
 <tr> <td background="foto.jpg">

 <table width="100%" border="0" cellspacing="0"
cellpadding="0" height="100%">
 <tr> <td background="trans.gif">
<b></b></td> </tr>
 <tr> <td background="trans2x2.gif">&nbsp;
</td> </tr>
 <tr> <td background="trans3x3.gif">&nbsp;
</td> </tr>
 <tr> <td background="trans6x6.gif">&nbsp;
</td> </tr>
 </table> </td> </tr> </table>

Für die Idee zu diesem Artikel und die Beispiel danken wir Rene Grassegger.

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.