| E-Mail: |  ulrich@um-fritz.de |
|---|---|
| Homepage-URL: |  http://um-fritz.de/ |
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
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 in den entsprechenden Kapiteln der SELFHTML 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.
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:
Bei kontrastärmeren Hintergründen kann diese Methode dennoch eine Alternative sein, zumal die Vorteile nicht von der Hand zu weisen sind:
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.
Um die grafischen Filtern von Microsoft anzuwenden, muss das entsprechende Element "Layout" bekommen. In diesem Beispiel wurde das mit der - mittels CSS-Hack für den Internet Explorer exklusiven - Angabe height:1%; erreicht. Nähere Information zu diesem Konzept werden auf der Microsoft Homepage gegeben.
Vorteilhaft für diese Methode erscheinen diese Punkte:
Dem stehen vor allem diese Nachteile gegenüber:
opacity erst für CSS 3 geplant ist, wird aktuell kein valider Code erzeugt.
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 simulieren 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:
Dem stehen aber gegenüber:
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.
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:
height:1%; erreicht. Weitere Informationen über dieses Prinzip sind auf der Webseite von Microsoft zu lesen. Jochen 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:
Dagegen stehen die Nachteile:
Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.
SELFHTML: Grafikformate für Web-Seiten SELFHTML: Filter (nur Microsoft) SELFHTML: CSS-Browserweichen zum Ausschließen älterer Browser
Microsoft: Informationen über grafische Filter
SELFHTML aktuell Artikel Bereich
© 2007 Impressum, für diese Seite: ulrich@um-fritz.de