Bilder mit weichen Schattenwürfen versehen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Ein Bild soll mit einem weichen Schattenwurf versehen werden.

Lösung

Sie können Schattenwürfe mit weichen Übergängen versehen, wenn Sie das Bild mit einem Paar weiterer nicht-semantischer div-Tags umgeben.

Zu Beginn erstellen Sie mit einem Grafikprogramm wie Adobe Photoshop (wie in unserem Beispiel) ein neues Bild. Dieses wird als Maske verwendet, die den Schattenwurf aus dem Rezept Bilder mit einem Schatten versehen weicher machen soll. Verwenden Sie hierfür die gleichen Dimensionen wie bei der Grafik für den eigentlichen Schattenwurf. Löschen Sie den kompletten Inhalt der neuen Datei, sodass nur noch der transparente Hintergrund übrig bleibt. Mit dem Verlaufswerkzeug erstellen Sie nun einen Farbverlauf von der Hintergrundfarbe nach transparent (siehe folgende Abbildung).

Den richtigen Farbverlauf auswählen

Abbildung: Den richtigen Farbverlauf auswählen.

Hierbei müssen Sie sicherstellen, dass die Hintergrundfarbe im Werkzeug der Hintergrundfarbe der Webseite entspricht. Erstellen Sie nun einen 6 Pixel breiten Verlauf vom linken Rand der Zeichenfläche zur rechten Bildseite.

Wiederholen Sie diese Schritte, diesmal jedoch, um einen Verlauf von oben nach unten zu erzeugen.

Jetzt können Sie Ihr Bild im Format PNG-24 mit einem Alphakanal für die Transparenz speichern (siehe folgende Abbildung).

Bild wird als PNG mit transparentem Alphakanal gespeichert

Abbildung: Das Bild wird als PNG mit transparentem Alphakanal gespeichert.

Nachdem die nötigen Bilddateien vorliegen, können Sie jetzt die nötigen div-Tags einfügen:

<div class="imgholder">
  <div>
    <img src="dadsaranick2.jpg" alt="Foto von Papa, Sara und Nick" />
  </div>
</div>

Zunächst passen Sie jetzt den CSS-Code für das äußere div-Element an. Durch die Regel float: left wird das Bild nach links verschoben. Außerdem wird zwischen dem Bild und dem übrigen Inhalt ein Zwischenraum definiert:

div.imgholder {
 float: left;
 background: url(dropshadow.gif) no-repeat bottom right;
 margin: 0 7px 7px 0;
}

Jetzt können Sie die Maske einbinden, die einerseits einen weicheren Verlauf für den Schatten erzeugt und gleichzeitig Platz für die Darstellung von Schatten und der Maske selbst schafft (siehe nächste Abbildung):

div.imgholder div {
 background: url(shadowmask.png) no-repeat;
 padding: 0 6px 6px 0;
}

Weiche Übergänge für Schattenwurf werden sichtbar

Abbildung: Die weichen Übergänge für den Schattenwurf werden sichtbar.

Zum Schluss können Sie das Bild noch mit Innenabständen und einem Rahmen versehen (siehe nächste Abbildung):

div.imgholder img {
 display: block;
 position: relative;
 background-color: #fff;
 border: 1px solid #666;
 padding: 2px;
}

Für das mit Schattenwurf versehene Bild werden weitere Stile definiert

Abbildung: Für das mit einem Schattenwurf versehene Bild werden weitere Stile definiert.

Diskussion

Die größte Schwierigkeit besteht bei dieser Lösung im Anlegen der PNG-Datei mit dem Alphakanal. Diese muss einerseits zum Schattenwurf, andererseits aber auch zur Hintergrundfarbe der Webseite passen.

Internet Explorer für Windows 5.5 und 6 unterstützt keine PNGs mit transparenten Alphakanälen. Im Rezept Mehrere PNGs mit transparentem Alphakanal verwenden finden Sie eine Möglichkeit, dieses Problem zu umgehen.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln