Abgerundete Ecken mit CSS 2.1 erstellen
1.Einleitung
2.Erstellung der Infobox
[INDENT]2.1.HTML Code
2.2.CSS Code[/INDENT]
3.Erstellung der abgerundeten Ecken
[INDENT]3.1.HTML Code
3.2.CSS Code[/INDENT]
4.Schlusswort und Beispiel
1. Einleitung
Die meisten User empfinden Boxen mit abgerundeten Ecken als angenehmer. Ein sehr guter Grund um sich vielleicht zu überlegen, seine Boxen im Content mit runden Ecken auszustatten ohne dabei auch nur eine Grafik zu verwenden.
2. Erstellung der Infobox
2.1 HTML-Code:
Beginnen wir als erstes damit unseren Text (in diesem Fall der bekannte Blindtext „Lorem ipsum“) in einen Absatz zu stecken und diesem die Klasse „infobox“ zuzuweisen.
<p class="infobox">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</p>2.2 CSS-Code:
Nun überlegen wir uns wie unsere Infobox (p.infobox) denn eigentlich aussehen soll (Hintergrundfarbe, Textfarbe, usw. ). Ich habe für meine Infobox einen dunklen Hintergrund mit dem Hex-Wert #333 (background:#333;) gewählt und eine helle Textfarbe, in diesem Fall ein helles Grau mit dem Hex-Wert #ddd (color:#ddd;).
Des weiteren wähle ich eine Schriftgröße von 11 Pixeln (font-size:11px;), einen inneren Abstand von 10px in alle Richtungen (padding:10px;) und einen äußeren Abstand nach links und rechts von ebenfalls 10px (margin:0 10px;).
/* Hiermit werden die Standartvorgaben des Browsers überschrieben. */
* {
padding:0;
margin:0;
border:0;
font-family:Verdana;
}
/* Infobox */
p.infobox {
/* Dunkler Hintergrund */
background:#333;
/* Schriftgröße: 11px und eine helle Schriftfarbe */
font-size:11px;
color:#ddd;
/*äußerer Abstand , innerer Abstand = 10px */
padding:10px;
margin:0 10px;
}So damit haben wir den ersten Teil schon einmal geschafft und wollen auch nicht lange warten und gleich mit dem Erstellen der runden Ecken fortfahren.
3. Erstellung der abgerundeten Ecken
Hierzu behelfen verwenden wir einfach der Methode mit der SVG Grafiken erstellt werden.
3.1 HTML Code
Und zwar werden wir einfach vier <span>-Elemente übereinander anordnen die nach links und rechts einen gewissen Abstand haben, am Ende entsteht dadurch eine Rundung.
Diese vier <span>-Elemente werden einmal in einen Absatz gesteckt, der oberhalb unterere Infobox angeordnet wird und die Klasse „top“ bekommt und einmal in einen Absatz der unterhalb unserer Infobox angeordnet wird und die Klasse „bottom“ hat.
Die vier <span>-Elemente bekommen nun die Klassen „bar1“, „bar2“, „bar3“ und „bar4“.
Die Reihenfolge der <span>-Elemente sollte wie folgt aussehen:
bar1
bar2
bar3
bar4
Infobox
bar4
bar3
bar2
bar1
Das ganze sollte in HTML dann wie folgt aussehen:
<p class="top">
<span class="bar1"> </span>
<span class="bar2"> </span>
<span class="bar3"> </span>
<span class="bar4"> </span>
</p>
<p class="infobox">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</p>
<p class="bottom">
<span class="bar4"> </span>
<span class="bar3"> </span>
<span class="bar2"> </span>
<span class="bar1"> </span>
</p>3.2 CSS Code
So nun geht es an den CSS-Code der die <span>-Elemente so anordnet das sie nachher eine schöne Rundung ergeben.
p.top {
padding:0px;
margin:10px 10px 0 10px;
background: none;
}
p.bottom {
padding:0px;
margin:0 10px;
background: none;
}
p.top .bar1,
p.top .bar2,
p.top .bar3,
p.top .bar4,
p.bottom .bar1,
p.bottom .bar2,
p.bottom .bar3,
p.bottom .bar4 {
display:block;
overflow: hidden;
background: #333; /* Gleiche Hintergrundfarbe wie die Infobox */
}
/* Außenabstände nach links und rechts der <span>-Elemente */
p span.bar1{margin: 0 5px;height:1px;}
p span.bar2{margin: 0 3px;height:1px;}
p span.bar3{margin: 0 2px;height:2px;}
p span.bar4{margin:0 1px; height:2px;}4. Schlusswort und Beispiel
Und schon hat mal eine schöne Box mit abgerundeten Ecken ganz ohne Grafiken. Dieses funktioniert in allen gängigen Browsern (IE ab Version 6, Firefox, Safari)
Ein Beispiel könnt ihr euch hier ansehen:
http://f-h.kaninchenrettung.de/macrosdesign_t…_page/test.html
// EDIT: Rechtschreibfehler ausgebessert und Beschreibung verbessert
