CSS Kochbuch

3.24 Bilder automatisch mit Reflexionen versehen

Problem

Eine grafikbasierte Überschrift soll mit einer Reflexion versehen werden.

Lösung

Verwenden Sie ein JavaScript, das diesen Effekt realisiert. Das Skript finden Sie unter http://cow.neondragon.net/stuff/reflection/.

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

<script type="text/javascript" src="scripts/reflection.js">
</script>

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

<img src="christinaleaf.png" alt="christina m. huggins" />

Abbildung 3-58. Die Grafik für die Überschrift wird angezeigt.

Um die Reflexion zu aktivieren (siehe ...