Bilder mit Schatten

Schatten sind ein beliebtes Mittel, um Bilder eindrucksvoll in Szene zu setzen. Wer aber mit unterschiedlichen Bildgrößen arbeitet, steht oftmals vor dem Problem, keine passende Hintergrundgrafik zur Verfügung zu haben. Mit CSS3 ist es zwar schon möglich dieses Problem auf einfache Art zu lösen, aber leider ist CSS3 noch kein offizieller Standard und somit auch kein Thema für diese Anleitung.

Einfache Schatten mit großer Grafik - Variante 1

Die einfachste Lösung ist, sich eine Grafik zu erstellen, die groß genug ist, jedes Bild mit einem Schatten zu versehen. Im folgenden Beispiel misst die Grafik 800 x 600 Pixel.

Leider wird der Schatten am Bildende abgeschnitten, sodass diese Methode vielleicht nicht so optimal ist.

Das HTML-Markup für alle Beispiele ist sehr einfach und es muss lediglich dem class Attribut ein Wert zugewiesen werden.

	   
<img class="schatten" src="bild.jpg" alt="Alternativtext" width="300" height="225" />

Die Style-Angaben sind minimal und selbsterklärend. Die Innenabstände padding resultieren aus der Schattenbreite der Hintergrundgrafik.

img.schatten {
 margin:10px; 
 padding:0px 8px 8px 0px;
 background:url(bg.xxx) no-repeat right bottom; 
 display:block;
 width:300px;
} 

Einfache Schatten mit großer Grafik - Variante 2

Manchmal reicht es aber auch, nur kleine Akzente zu setzten. Wie wäre es denn mit einer angehobenen Ecke?

Nun, die Ecke ist nicht wirklich angehoben, sondern es handelt sich vielmehr um eine optische Täuschung. In diesem Fall ist der Schatten perspektivisch gezeichnet worden.

Doch leider gibt es auch hier einen Nachteil. Um einen Rand zu erhalten, muss die Grafik mit einer abweichenden Hintergrundfarbe erstellt werden. Jedoch passt nicht immer jede Hintergrundfarbe zu jedem Bild.

img.schatten {
 margin:10px;
 background:url(bg.xxx) no-repeat right bottom; 
 padding:10px 20px 20px 10px;
 display:block;
 width:300px;
} 

Die Angaben für padding-right und padding-bottom resultieren auch hier aus der Schattenbreite der Hintergrundgrafik, zzgl. 10 Pixel für die Umrandung.

Einfache Schatten mit kleiner Grafik - Variante 3

Wer, wie im letzten Beispiel, nur kleine Akzente setzten möchte, sollte lieber auf kleine Grafiken zurückgreifen. Mit Hilfe des span Tags lassen sich so die einzelnen Grafiken flexibel positionieren.

Bei den folgenden Style-Angaben ist nur darauf zu achten, dass sich der Wert für width der Klasse UR aus, den mit rot gekennzeichneten Angaben, der Klasse bild ergibt.

img.bild {
 padding:10px;
 background:#fff;
 border:1px solid #aaa;
 width:300px;
 display:block;
}

span.UR  {
 padding:8px ; /* Schattenbreite */
 margin:0px;
 width:322px; /* 300px Bildbreite + ( 2 x 10px linker und rechter Innenabstand ) + ( 2 x 1px linker und rechter Rahmen ) */
 background:url(bg.xxx) no-repeat bottom right ; 
 display:block;
} 

Das HTML-Marup wurde um das span Tag erweitert und sieht so aus.

	 
<span class="UR"><img  class="bild" src="deinbild.jpg" alt="Alternativtext" width="300" height="225"/></span>

Oder sollen es zwei hochgebogene Ecken sein? Kein Problem, dazu nimmt man einfach ein zweiten span Tag und erweitert seine Style-Angaben, wie nachfolgend zu sehen ist.

span.UL {
 display:block;
 background:url(bg.xxx) no-repeat bottom left ; 
}
<span class="UL"><span class="UR"><img  class="bild" src="deinbild.jpg"  alt="Alternativtext"  width="300" height="225"/></span></span>

Um das HTML-Marup nicht unnötig zu strapazieren, sollten zwei Hintergrundbilder genügen. Aber letztendlich liegt diese Entscheidung bei euch.

Nachfolgend noch alle hier vorgestellten Grafiken zum Kopieren.

Hintergrundgrafiken als PNG-Dateien 100 x 100 Pixel

oben links PNG-Datei oben links PNG-Datei oben links PNG-Datei oben links PNG-Datei

und hier nochmal als GIF-Dateien 100 x 100 Pixel

oben links GIF-Datei oben links GIF-Datei oben links GIF-Datei oben links GIF-Datei

Schattengrafik_1 ; 800 x 600 Pixel

Schattengrafik als PNG-Dateipng Schattengrafik als GIF-Dateigif

Schattengrafik_2 ; 800 x 600 Pixel

Schattengrafik als PNG-Dateipng Schattengrafik als GIF-Dateigif

Nun wünsche ich euch noch viel Spaß beim Experimentieren.

erstellt am 06.05.2011

nach oben