Skalierbare Info-Boxen mit abgerundeten Ecken

Skalierbare Navigation oder Info-Boxen mit abgerundeten Ecken lassen sich mit Hilfe von CSS und kleinen Grafiken recht schnell erstellen. Dabei muss es nicht zwangsläufig zu einer sog. DIV-SUPPE kommen. Es lassen sich alle HTML-Elemente als Container für Hintergrundgrafiken nutzen. Im folgenden Beispiel besteht die Infobox aus einem Container <div>, einer Überschrift <h4> und einem Absatz <p>. Somit sind schon drei Elemente vorhanden, die jeweils ein Hintergrundbild aufnehmen können. Für das vierte Hintergrundbild wird noch ein weiterer Container benötigt, und zwar das <span> Tag.

1. HTML Markup erstellen

Wie immer, kümmern wir uns ersteinmal um das HTML- Markup. Dazu notieren wir im <div> Tag das <class> Attribut und weisen ihr einen Wert (Namen) zu. Das benötigte <span> Tag wird in der Überschrift untergebracht.

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

2. Stylesheets

Die Style-Angaben halten sich, wie ihr seht, in Grenzen. Ihr müsst nur darauf achten, dass die Grafiken der beiden oberen Ecken in der Überschrift <h1..h6> und im <span> Tag eingebunden werden. Die Innenabstände von <span> und <p> entsprechen der Grafikgröße von 10 x 10 Pixel.


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

/*  Grafik für untere linke Ecke */
.box  {
 background:url(ul.gif) no-repeat bottom left #ada;
 float:left;
}

/*  Grafik für obere linke Ecke */
.box h4 {
 background:url(ol.gif) no-repeat top left #aaa; 
}

/*  Grafik für obere rechte Ecke */
.box h4 span {
 padding:10px;
 display:block;
 background:url(or.gif) no-repeat top right ;
}

/*  Grafik für untere rechte Ecke */
.box p {
 padding:10px ;
 background:url(ur.gif) no-repeat bottom right ;
} 

Die Hintergrundfarben sind nur der umschließenden Box und der Überschrift zuzuweisen!

Das war's und hier ein Beispiel

Und wo ist der Schatten? Na hier»

erstellt am 16.04.2011

nach oben