Skalierbare Info-Boxen mit abgerundeten Ecken und Schatten

Um eine Box zusätzlich noch einen Schatten zu verpassen, wird ein weiterer Container zur Aufnahme einer fünften Grafik benötigt. Hier eignet sich wieder ein <span> Tag, das wiederum im <p> Tag untergebracht wird.

1. HTML Markup um ein span Tag erweitern

<div class="box">
<h4><span>Abgerundete Ecken mit Schatten</span></h4>
<p><span>Lorem ipsum dolor...</span></p>
</div> 

2. Stylesheets erweitern und ändern

Nachfolgend die erweiterten und geänderten Style-Angaben

/* Außen- und Innenabstände zurücksetzen */
* {
 margin:0;
 padding:0;
}

 /*  Grafik für rechten Schlagschatten Größe 30 x 5 Pixel*/
.box  {
 min-width:200px;
 background:url(l_s.gif) repeat-y right top #ddd;
}

/*  Grafik für obere linke Ecke Größe 10 x 10 Pixel */
.box h4 {
 background:url(ol_s.gif) no-repeat top left #aaa; 
}

/*  Grafik für obere rechte Ecke  Größe 30 x 200 Pixel*/
.box h4 span {
 padding:10px;
 display:block;
 background:url(or_s.gif) no-repeat top right;
}

/*  Grafik für untere linke Ecke Größe 50 x 30 Pixel */
.box p {
 /* padding:10px wurde entfernt */
  background:url(ul_s.gif) no-repeat bottom left;
} 

/*  Grafik für untere rechte Ecke  Größe 2000 x 30 Pixel*/

.box p span {
 display:block;
 padding:10px 30px 30px 10px;
 background:url(ur_s.gif) no-repeat bottom right ;
} 

Mit .box p span{} ist ein neuer Anweisungsblock hinzugekommen. Die Angaben bei padding entsprechen der Breite bzw. Höhe der Grafiken. Im Anweisungsblock .box p{} ist die Regel für den Innenabstand padding entfernt worden.

Schon fertig. Hier das Ergebnis»

Hinweis!

Wer mehr als ein <p> Tag verwenden möchte, der sollte mit Klassen arbeiten.

Hier die nötigen Änderungen

.box p.unten {
  padding:0;
  background:url(ul_s.gif) no-repeat bottom left;
} 

.box p.unten span {
 display:block;
 padding:10px 30px 30px 10px;
 background:url(ur_s.gif) no-repeat bottom right ;
} 

p {
 padding:10px 30px 10px 10px;
} 

Das HTML-Markup würde dann so aussehen.

<div class="box">
<h4><span>Abgerundete Ecken mit Schatten</span></h4>
<p>Erster Absatz</p>
<p class="unten"><span>Lorem ipsum dolor...</span></p>
</div> 

Beispiel»

erstellt am 16.04.2011

nach oben