Teiltransparente Bereiche
Teiltransparente Bereiche ermöglichen bei der Gestaltung von Webseiten viele interessante
Effekte. Einer der einfachsten Effekte ist dabei die Platzierung eines Textblockes mit
teiltransparentem Hintergrund über einer Grafik. Grenzen für den Einsatz dieser Technik
setzt, neben den technischen Gegebenheiten, eigentlich nur die eigene Phantasie.
Anhand dieses einfachen Beispiels werden die wichtigsten Methoden und ihre Vor- und
Nachteile etwas genauer betrachtet.
So geht es hier nicht um die technische Umsetzung der gewünschten Effekte. Das wird z. B. in
den entsprechenden Kapiteln der
SELFHTML(extern)
Dokumentation schon ausführlich beschrieben.
Ansonsten kann auch der Quellcode der Beispielseiten als Informationsquelle dienen.
Ein bisschen "SELF" muss sein.
Hier geht es lediglich um eine kurze Gegenüberstellung mit dem Ziel, die für die eigenen
Vorstellungen geeignetste Methode leichter auswählen zu können.
Oder anders gesagt: Für den nötigen "Durchblick" zu sorgen
Beim Betrachten der Beispielseiten werden die Effekte am deutlichsten sichtbar, wenn die Breite
des Browserfensters so gewählt wird, dass der innere, teiltransparente Bereich das
Hintergrundbild des äußeren Bereiches nicht völlig überdeckt.
Methode 1: Teiltransparenz mittels einer GIF Grafik
Anzeigebeispiel: So sieht's aus
Dieser Methode liegt eine Hintergrundgrafik zu Grunde, die ähnlich einem Schachbrett
aufgebaut ist. So alternieren je ein weißes und ein transparentes Pixel in einem 10*10px großem
Bild. Das GIF Grafikformat kann keine graduellen Transparenzen speichern, so dass diese abwechselnde
Folge von Pixeln mit Farbwert und volltransparenten Pixeln nötig wird. Eine Art Teiltransparenz
ergibt sich damit aus dem Verhältnis dieser Pixel zueinander. Durch das hier gewählte
Verhältnis also eine 50%ige Transparenz.
Dem äußeren Container wird also ein Hintergrundbild zugewiesen, in diesem Fall ein Stilleben.
Dem in diesem Container enthaltenem inneren Bereich, der auch den Text enthält, wird als
Hintergrundbild besagte GIF Grafik zugewiesen und gekachelt.
Sieht man sich das Beispiel an, so fallen als erstes die Nachteile auf:
- Besonders über dunklen Bereichen des Hintergrundes wird die Schrift unleserlich
- Der Effekt wirkt sehr stark "verpixelt"
Bei kontrastärmeren Hintergründen kann diese Methode dennoch eine Alternative sein, zumal die Vorteile nicht von der Hand zu weisen sind:
- Das GIF Format besitzt eine sehr breite Unterstützung in verschiedensten Browsern
- Es muss nur eine größere Grafik geladen werden, so dass der Seitenaufbau nicht unnötig verzögert wird.
- Diese Methode ist unabhängig von einer pixelgenauen Positionierung der inneren und äußeren Containers zueinander.
Methode 2: Teiltransparenz mit opacity
Anzeigebeispiel: So sieht's aus
Die CSS Eigenschaft opacity ist eigentlich erst für die CSS Version 3 geplant. Trotzdem
gibt es eine große Anzahl von Browsern, die diese Eigenschaft schon seit längerem
unterstützen.
Der Opera Browser allerdings erst seit der Versionsnummer 9 und der Internet Explorer (IE) erst ab
Versionsnummer 7. Allerdings gibt es für ältere IE Versionen einen Filter, der einen ähnlichen Effekt
ermöglicht, und in diesem Beispiel auch angewendet wird.
Allerdings werden die Elemente im teiltransparenten Bereich auch von diesem Effekt betroffen,
so dass die Schrift umso schlechter lesbar wird, je transparenter der Bereich gestaltet wird.
Die hier gewählte 50%ige Transparenz macht diesen Effekt recht deutlich.
Vorteilhaft für diese Methode erscheinen diese Punkte:
- Echte Teiltransparenz, keine "verpixelte" Darstellung
- Bei neueren Browserversionen hohe Kompatibilität
- Nur eine größere Grafik ist zu laden
- Ebenfalls unabhängig von pixelgenauer Positionierung
Dem stehen vor allem diese Nachteile gegenüber:
- Ältere Browser unterstützen diese Methode nicht
- Der für den IE verwendete Filter funktioniert nicht, wenn ActiveX deaktiviert ist
- Da die CSS Eigenschaft
opacityerst für CSS 3 geplant ist, wird aktuell kein valider Code erzeugt.
Methode 3: Simulierte Teiltransparenz
Anzeigebeispiel: So sieht's aus
Obwohl wie in diesem Beispiel ein transparenter Bereich vorhanden zu sein scheint, ist
dieser Effekt getrickst. In Wahrheit kommen zwei gleich große Grafiken zum Einsatz. Die
untere entspricht der auch in den anderen Beispielen verwendeten Hintergrundgrafik.
Für zweite Grafik wurde diese Hintergrundgrafik entsprechend aufgehellt und dem inneren
Bereich als Hintergrund zentriert zugewiesen. Durch geschickte Platzierung des inneren Bereiches kommen
beide Grafiken deckungsgleich zur Überlagerung und "faken" so den teiltransparenten Effekt.
Wie bei dem zweiten Abschnitt dieses Beispiels allerdings ersichtlich wird, ist hier eine
pixelgenaue Ausrichtung des inneren und des äußeren Containers zueinander Bedingung. Sonst
wird der Trick durch verschobene Passungen leider offensichtlich. Bei flexiblen Layouts muss
diesem Umstand daher besondere Aufmerksamkeit gewidmet werden.
Die Vorteile dieser Methode sind trotzdem offensichtlich:
- Sehr hohe Kompatibilität in verschiedenen Browsern
- Keine teiltransparente Schrift, daher gute Lesbarkeit
- Keine "verpixelte" Darstellung
Dem stehen aber gegenüber:
- Abhängigkeit von pixelgenauer Positionierung
- Zwei größere Grafiken müssen geladen werden, was den Seitenaufbau verlangsamt
- Es ist keine echte Transparenz, so dass sich unter Umständen der gewünschte Effekt nicht realisieren lässt
Wegen der Schwierigkeiten, die sich beim Einsatz echter Transparenzen in Bezug auf
die Kompatibilität zu verschiedenen Browsern ergeben, kann diese Methode aber ein
zuverlässiger Ersatz sein, um entsprechende Effekte nachzuahmen.
Methode 4: Teiltransparenz mittels einer PNG Grafik
Anzeigebeispiel: So sieht's aus
Diese Beispiele zeigen den Königsweg. Wenn sie die Beispielseite mit einem Browser aufrufen,
der das PNG Grafikformat unterstützt, werden Sie keine Unterschiede feststellen können. Für
diese Browser wird im inneren Bereich eine PNG Grafik gekachelt. Da dieses Grafikformat eine
graduelle Transparenz speichern kann, wäre sie das Mittel der Wahl, um teiltransparente Bereiche
darzustellen.
Sehen Sie sich die Seite aber mit einem Internet Explorer an, älter als Version 7, dann
werden Sie gar keine Transparenz im ersten Abschnitt erkennen. Da der Internet Explorer das
PNG Format erst ab der Version 7 unterstützt, wird hier nur ein weißer Hintergrund dargestellt.
Zum Glück gibt es aber auch hier einen speziellen Filter (AlphaImageLoader), der diesen Effekt
nachahmen kann. Doch Vorsicht, dabei muss man einige Punkte beachten:
- Der transparente Bereich muss "Layout" haben. In diesem Beispiel wird das mit dem
Zusatz
height:1%;erreicht. Weitere Informationen über dieses Prinzip sind auf der Webseite von Microsoft zu lesen. - Wichtig ist zu beachten, dass die Hintergrundgrafik für den teiltransparenten Bereich
nicht höher sein darf, als ein Pixel. Sonst werden interaktive Elemente, wie z.B. Verweise oder
Formulare unbenutzbar. Der dritte Bereich auf der Beispielseite stellt diesen Effekt dar.
(Vielen Dank an Jochen (extern) für den Hinweis)
Die Verwendung von PNG Grafiken wäre die Königsklasse um teiltransparente Effekte
darzustellen. Insbesondere, da sich durch Verläufe von transparenten zu farbigen Bereichen
noch ganz andere Layouts verwirklichen ließen, als in den einfachen Beispielen.
Nur muss ich hier den Konjunktiv benutzen, da es eine gravierende Einschränkung gibt.
Die mangelnde Unterstützung dieses Grafikformates seitens des Internet Explorers macht es
(noch) schwierig die große Gruppe von Internetbenutzern zu bedienen, die diese Browser
benutzen. Die Vor- und Nachteile dieser Methode müssen also gegeneinander abgewogen werden.
Vorteile:
- Hohe Browserkompatibilität bei neuen Browserversionen
- Möglichkeit auch komplexe Transparenzverläufe darzustellen
- Echter Transparenzeffekt
- Nur eine große Grafik ist zu laden
- Gute Lesbarkeit der Schrift, die keine Transparenz erhält
- Unabhängig von pixelgenauer Positionierung
Dagegen stehen die Nachteile:
- Bis Version 7 unterstützt der Internet Explorer (IE) PNG Grafiken nicht
- Im IE muss ActiveX aktiviert sein, um den benötigten Filter auszuführen
- Aktive Elemente im teiltransparenten Bereich können bei ungeeigneten Hintergrundgrafiken unzugänglich werden
- Ohne ActiveX keine Transparenz in älteren IEs, daher müssen Schriftfarbe und Hintergrundfarbe kontrastreich sein
Auf dieser Website wird die Überlagerung des Inhaltsbereiches über der Uhr simuliert.
Ein Blick auf das Hintergrundbild
mag das verdeutlichen. Der Transparente Effekt entsteht somit nur durch die Positionierung des Inhaltes
über dem aufgehelltem Bereich. So ergeben sich hier auch für den IE<7 keine Unterschiede.
Anders verhält es sich mit dem Schattenwurf der Menüleiste. Hier wird für Browser, die den Alphakanal unterstützen
eine PNG
Grafik, für IE<7 eine GIF Grafik angezeigt. Der Effekt ist dann zwar deutlich weniger
ansprechend, wie Sie sehen können wenn sie die Bilder miteinander vergleichen, aber immer noch vertretbar.
Das sind aber leider nicht die einzigen Unzulänglichkeiten des IE.