brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Tabellen mit halbtransparentem Hintergrund

von Thomas Salvador.

In diesem Artikel geht es einmal mehr um meine besonderen Lieblinge, HTML-Tabellen. Der hier vorgestellte Effekt ist nicht mehr der neuste. Er wurde April 1997 gebaut und seither auf meiner privaten Site verwendet. Eine erste Beschreibung findet sich in [1].

Die hier gelieferte ist eine technisch wesentlich verbesserte Version, durch einen Trick wird eine Browsereigenart umschifft und der benötigte Code und Aufwand bei der Verwendung drastisch reduziert.

Worum geht es?

Ein passenderer Titel wäre "Tabellen mit Hintergründen, durch die der Seitenhintergrund farblich getönt hindurch scheint". Huh? Stellen Sie sich vor, Sie haben ein Hintergrundbild auf der Seite, nun setzen Sie diese Tabelle davor. Ihr Hintergrund ist weder Blau, noch das Hintergrundbild der Seite, sondern der Hintergrund ist das bläulich getönte Hintergrundbild der Seite. Das sieht z.B. so aus:

Halbtransparente Tabelle im Einsatz

Feine Sache? Das will ich meinen. Beim Zoomen und Konvertieren sind zwar die Farben etwas kaputt gegangen. Um es nicht noch schlimmer zu machen, habe es unscharf gelassen. Das ist aber alles nicht so wichtig hier. Sie können klar erkennen, dass das "TS" ohne Versatz durch die Tabelle scheint. Den Rahmen der dortigen Tabelle könnte man ebensogut abschalten.

Wie geht es?

Sie brauchen ein geeignetes Hintergrundbild und ein paar Tabellen

Zunächst machen Sie Ihre Tabelle, die diesen Hintergrund bekommen soll, wie üblich.

Die im weiteren "Hintergrund-Tabelle" genannte Tabelle ist die, die den Hintergrund erzeugt. Es handelt sich um eine 1x1-Tabelle mit einem Hintergrundbild

<table cellpadding="0" cellspacing="0" border="0" background="hintergrund.gif">
  <tr><td>INHALT</td></tr>
</table>

Sie sehen, dass die Tabelle minimale Abstände hat und ein Hintergrundbild hintergrund.gif lädt. Anstelle von INHALT kopieren Sie jeweils Ihre komplette Tabelle.

Das Hintergrundbild

ist nun der Knackpunkt. Erzeugen Sie ein Hintergrundbild in einer hellen Farbe in der Form, dass Sie die Pixel schachbrettmusterartig setzen und nicht setzen

P P P
 P P P     P = Farbiges Pixel des Tabellen-Hintergrundes
P P P
 P P P
P P P
 P P P
Beispiel, ein echtes Hintergrundbild ist größer, z.B. 32x32 oder 64x64

Sind Sie fertig, so speichern Sie das Bild im GIF-Format, wobei sie die ungesetzen Pixel auf transparent stellen. Im Endeffekt haben Sie damit ein Bild, welches abwechselnd durchsichtig und farbig ist.

Unten können Sie einige Hintergründe downloaden, nämlich

blau grau grün rot gelb
blau
grau
grün
rot
gelb
Die Hintergründe auf weißem Untergrund

blau grau grün rot gelb
blau
grau
grün
rot
gelb
Die Hintergründe auf schwarzem Untergrund

Was passiert nun?

Bei der Betrachtung passiert dreierlei.

  1. Das Hintergrundbild zieht sich über die gesamte Hintergrund-Tabelle und dies ohne weiteres tun zu müssen perfekt, da die Tabelle nur aus einer Zelle besteht.

  2. An den transparenten Stellen dieses Bildes, scheint das Hintergrundbild der Seite durch, an den nicht-transparenten Stellen erscheint die Farbe des Hintergrundbildes.

  3. AAAAAA          P P P        PAPAPA      P = Farbiges Pixel des
    AAAAAA           P P P       APAPAP          Tabellen-Hintergrundes
    AAAAAA          P P P        PAPAPA      A = Pixel des Hintergrundbildes
    AAAAAA           P P P       APAPAP          der Webseite
    AAAAAA          P P P        PAPAPA
    AAAAAA           P P P       APAPAP
    AAAAAA          P P P        PAPAPA
    
  4. Die verkapselte Tabelle in der Zelle einscheint "vor" der Hintergrund-Tabelle. Da sie selbst kein Hintergrundbild und keine Hintergrundfarbe hat, beeinflusst sie nichts.

Und die Tönung?

Die Tönung rührt von der (schlechten) Auflösung menschlicher Augen her. Die beiden schachbrettmusterartig vermischen Bilder sind für diese nicht mehr trennbar. Und dies sogar bei geringer Bildschirmauflösung nicht.

Man sollte natürlich alles Probesehen, damit Bilder nicht kaputt gehen oder etwas unleserlich wird.

Ausdehnung der Tabellen

Betrachten wir anschließend noch ein vollständiges Beispiel, mit kompletten Source und Kommentaren insbesondere noch mal zur Ausdehnung.


[1] Thomas Salvador: "Tabellen mit halbtransparentem Hintergrund" Web-Master 3-4/98 S. 38.


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 29. Ausgabe.

Hat Ihnen diese Seite gefallen oder geholfen? Geben Sie mir einen Kaffee aus! Danke.
Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/1.html .