Bilder automatisch mit Reflexionen versehen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Eine grafikbasierte Überschrift soll mit einer Reflexion versehen werden.

Lösung

Verwenden Sie ein JavaScript, das diesen Effekt realisiert.

Nachdem Sie das Skript auf Ihren Webserver hochgeladen haben, müssen Sie den Code in den Kopfteil Ihrer Webseite einbinden, wie hier gezeigt:

Fügen Sie nun in Ihre Webseite das Bild ein, für das die Reflexionen dargestellt werden sollen (siehe nächste Abbildung):

Abbildung: Die Grafik für die Überschrift wird angezeigt.

Um die Reflexion zu aktivieren (siehe nächste Abbildung), versehen Sie das img-Tag des Bildes mit einem class-Attribut. Dieses erhält den Wert reflect:

Abbildung: Die Reflexion für die Überschriftsgrafik erscheint.

Diskussion

Während die Seite im Browser des Benutzers aufgebaut wird, durchsucht das JavaScript Ihre Webseite nach Bildelementen mit dem class-Attribut reflect. Aus dem Ursprungsbild erzeugt das Skript eine weitere Grafik, die die Reflexion enthält.

Findet das Skript ein image-Element, auf das die oben genanten Kriterien zutreffen, kopiert es das Bild, spiegelt es und wendet den Standardwert 50% für die Opazität (den Grad der Undurchsichtigkeit) und Höhe des neuen reflektierten Bildes an.

Anpassungsmöglichkeiten

Mit diesem Skript können Sie die Opazität und die Höhe der Reflexion anpassen.

Um die Höhe der Reflexion zu steuern, erweitern Sie einfach die Klassendefinition für das betreffende Bild um einen neuen Wert: rheightXX. Hierbei steht XX für einen Prozentwert im Verhältnis zur Höhe des Originalbildes, die in der Reflexion dargestellt werden soll (siehe folgende Abbildung):

Abbildung: Die Reflexion hat fast die gleiche Höhe wie das Ursprungsbild.

Je größer der Prozentwert gewählt ist, desto höher fällt auch die Reflexion aus. Der Wert rheight99 bedeutet also, dass 99% der Originalhöhe des Bildes in der Reflexion dargestellt werden.

Um die Opazität der Reflexion zu steuern, müssen Sie die Klassendefinition für das Bild um einen anderen Wert erweitern. Für die Opazität heißt dieser Wert ropacityXX. Hierbei steht XX für den Grad der Undurchsichtigkeit des reflektierten Bildes (siehe nächste Abbildung):

Je geringer dieser Wert ausfällt, desto durchscheinender ist die Reflexion. Der Wert ropacity33 bedeutet, dass die Reflexion 33% der Deckkraft des Ursprungsbildes erhält.

Abbildung: Die Reflexion wird durchscheinender.

Um die Reflexion genauer zu steuern, können Sie Breiten- und Opazitätsangaben miteinander kombinieren, wie in folgender Abbildung gezeigt:

Abbildung: Für Höhe und Opazität werden eigene Werte verwendet.

Bekannte Browserprobleme

Das Reflexionsskript funktioniert mit Internet Explorer für Windows 5.5+, Firefox 1.5+, Opera 9+ und Safari. Reflexionen für animierte Bilder funktionieren nur mit Internet Explorer für Windows. Allerdings stellt dieser skalierte Bilder verzerrt dar.