Runde Ecken mit CSS
Autor: Alex
Runde Ecken sind ein beliebtes Designmittel um smarte Web- Layouts zu realisieren. Hier sollen drei Ansätze vorgestellt werden, mit denen runde Ecken relativ einfach in einem Blog realisiert werden können.
Der erste Ansatz ist eine rein grafische Lösung. Dabei werden gifs in eine CSS Liste als Hintergrundgrafik eingebaut. Das komplette Tutorial dazu findet man auf simisdat.org
Die beiden folgenden Ansätze benötigen ein Javaskript und etwas CSS.
Die erste Möglichkeit basiert auf Alessandro Fulciniti´s sogenannten Nifty Corners. Hierbei werden die runden Ecken nicht durch Einbinden von gifs realisiert, sondern allein durch CSS u. Javascript. Der Nachteil dabei ist, dass sich der Radius der Ecken nicht ohne größeres Hacken verändern läßt. Die Implementation erfolgt über 3 Schritte:
1) Im Stylesheet müssen genau diese Angaben vorliegen:
rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
2) Das externe Javascript ist einzubinden.
3) Das interne Javascript ist auf der Seite mit den runden Ecken anzugeben:
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#nifty","#377CB1","#9BD1FA");
}
</script>
(Hierbei können unter Rounded auch CSS Klassen und andere Farben angegeben werden. Die Farbangaben beziehen sich auf die äußere und innere Farbe der Ecken.)
Ein Beispiel für den Einsatz von Nifty Corners ist das Loudblog Template INX. Fast alle runden Ecken sind hier per Javascript und CSS gelöst.
Inzwischen hat Alessandro Fulciniti sein Script weiter entwickelt und die Gestaltung der Ecken besser ausgearbeitet. Umfangreiche Informationen enthält sein jüngster Artikel auf pro.html.it.
Der zweite Ansatz basiert ebenso auf einem Javascript, etwas CSS und auf gifs. Damit läßt sich der Radius der Ecken selbst bestimmen. Simon Willison stellt den Ansatz in einem Artikel auf sitepoint.com vor. (Hier lese man unbedingt auch die Kommentare insbesondere den letzten von Youngers.) Ein weiterer Vorteil der Methode ist die sehr einfache Implementierung. Das Javascript ist sehr kurz gehalten. Größere Tricks sind nicht notwendig um damit runde Ecken zu erzielen. Der Nachteil gifs für jede Box zu laden ist in Zeiten von DSL nicht erwähnenswert.
Beide Ansätze werden in allen modernen Browsern fehlerlos angezeigt.
CSS Tips
| 1.05.05 |Weitere neue Artikel
Neue TXP Sites
- Unable to connect to del.icio.us
