In einem meiner ersten Artikel beschrieb ich, wie man seine Tabellen mit einfachen, runden Ecken versehen kann. Alles was man damals dazu benötigte waren vier Grafiken. Für jede runde Ecke eine.
Doch inzwischen sind einige Winter durchs Land gezogen und ich habe mich gefragt, ob es nicht doch eine andere, leichtere Möglichkeit geben könnte. Und siehe da, eine kurze Suche im Netz brachte mich auf den richtigen Weg!
CSS3 ist die Antwort!
In CSS3 sind einige Erweiterungen zum aktuellen Standard CSS2 vorgesehen, unter anderm auch die Möglichkeit runde Ecken darstellen zu können. Das CSS3 Modul: Border existiert momentan jedoch nur als Arbeitspapier (Working Draft) des W3C. Jedoch hat sich Mozilla einiger dieser Erweiterungen angenommen und schon als vorläufige Erweiterung (Proprietary Extensions) umgesetzt. Diese werden durch ein vorangestelltest -moz- gekennzeichnet. Bei einer dieser Erweiterungen handelt es sich um -moz-border-radius. Und eben diese benötigen für unsere runden Ecken!
-moz-border-radius - Mach mich rund
Fangen wir doch gleich an und bauen uns ein Beispiel zusammen. Zuerst die Style Definition:
.rundeEcken {
text-align: center;
border:2px solid #000000;
-moz-border-radius: 15px;
}
Das Ganze weisen wir nun einer Tabelle zu:
Und als Ergebnis erhalten wir folgende Tabelle:
|
Diese Tabelle hat runde Ecken, und das ganz ohne Grafiken. (Mozilla/NS6) |
Allerdings nur mit Mozilla/NS6. In allen anderen Browsern erscheint die Tabelle ganz normal mit Ecken.
Ein paar Schritte weiter...
-moz-border-radius ist eine Abkürzung um jede der vier Ecken zu kontrollieren. Dazu kann man -moz-border-radius vier Werte übergeben die den Radius jeder einzelnen Ecke einstellen und zwar in folgender Reihenfolge: oben-links [top-left], oben-rechts [top-right], unten-rechts [bottom-right], unten-links [bottom-left].
.rundeEcken {
text-align: center;
border:2px solid #000000;
-moz-border-radius: 5px 10px 15px 20px;
}
|
Diese Tabelle hat runde Ecken, und das ganz ohne Grafiken. (Mozilla/NS6) |
Wodurch sich ein interessanter Effekt erzielen läßt. Genauso gut ist es aber auch möglich nur zwei Werte zu übergeben, wodurch jeweils die linke obere und die rechte untere bzw. die rechte obere und die linke untere Ecke kontrolliert werden können. Das sieht dann folgendermaßen aus
.rundeEcken {
text-align: center;
border:2px solid #000000;
-moz-border-radius: 30px 5px;
}
|
Diese Tabelle hat runde Ecken, und das ganz ohne Grafiken. (Mozilla/NS6) |
Jede Ecke einzeln
Möchte man jede Ecke einzeln kontrollieren kann man sich auch folgender Erweiterungen bedienen:
.rundeEcken {
text-align: center;
border:2px solid #000000;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 5px;
}
Als Wert kann man jeweils eine Bereich zwischen 0-30px, bzw. Prozentangaben verwenden.
Ein paar abschließende Worte
Jeder der sich nun begeistert daranmachen will und dies in sein nächstes HTML Design übernimmt, sollte jedoch immer im Hinterkopf behalten, das dies kein Standard ist (zumindest solange nicht, bis CSS3 zum Standard geworden ist) und somit auch nicht in allen Browsern zu sehen ist.
Auch sind diese runden Ecken nicht mit allen Mozilla Versionen zu sehen. Erst ab Version Mozilla 0.92 dürften sie funktionieren. Und es ist auch nicht ausgeschlossen, das sie in späteren Versionen irgendwann nicht mehr funktionieren.
Also viel Spaß beim Ausprobieren und Experimentieren.
1 thought on “Runde Tabellen mit Mozilla”