Runde Ecken für div-Container nur durch CSS





Die Idee, abgerundete Ecken mit Hilfe von grafischen Elementen zu gestalten, ist so alt wie das Webdesign selbst. Auch heute noch greifen viele Webdesigner zu ihrem Grafikprogramm und zeichnen sich entsprechende Ecken selber. Dabei gibt es für Rahmen von div-Containern auch eine reine CSS-Lösung, die völlig ohne Bilder und Grafiken zurecht kommt.

Hintergrund dieser Technik ist eine optische Täuschung. So werden mehrere direkt nebeneinander liegende Rahmen über margin gekürzt und damit der visuelle Effekt abgerundeter Ecken erreicht. Mittels farblicher Abstimmung kann man auch räumliche Effekte wie z.B. höher oder tiefer gestellte Flächen gestalten.

In folgendem Beispiel erzeugen wir einen div-Container mit einer Breite von 300px. Die CSS-Anweisungen für .o1- .o4 (oben) und .u1 – .u4 (unten) definieren den eigentlichen Rahmen oben und unten inkl. der Ecken und farblichen Abstimmung für den räumlichen Effekt. Mittels .content wird der Rahmen links und recht vervollständigt und die Darstellung des eigentlichen Inhalts formatiert.

<style type="text/css">
.rand {width:300px; margin:0}
.o1, .o2, .o3, .o4, .u1, .u2, .u3, .u4 {display:block; overflow:hidden;}
.o1, .o2, .o3, .u1, .u2, .u3 {height:1px;}
.o1 {margin:0 5px; background:#999;}
.u1 {margin:0 5px; background:#fff;}
.o2, .u2 {margin:0 3px; border-width:0 2px;}
.o2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.u2 {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.o3, .u3 {margin:0 2px;}
.o3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.u3 {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.o4, .u4 {height:2px; margin:0 1px;}
.o4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.u4 {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.content {display:block; padding:0 5px 0 5px; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}
.rand p {margin:0}
</style>

Bei Verwendung weiterer Blockelemente (in unserem Beispiel wird nur p verwendet) sind diese gegebenenfalls in der Zeile
.rand p {margin:0}
zu ergänzen. Dies verhindert den Abstand zwischen dem Rahmen oben bzw. unten und dem content-Container.

Der Aufruf erfolgt über die zwei ineinander verschachtelten div-Container. Im content-Container wird dann der eigentliche Inhalt hinterlegt:

<div class="rand">
<b class="o1"></b> <b class="o2"></b> <b class="o3"></b> <b class="o4"></b>
<div class="content">
<p>Breite und Höhe des div-Containers können über feste Werte, prozentuale Angaben oder variabel gestaltet werden.</p>
</div>
<b class="u4"></b> <b class="u3"></b> <b class="u2"></b> <b class="u1"></b>
</div>

Tags: ,

Hinterlasse eine Antwort

Kontaktformular - Copyrighthinweis und Impressum