24. April 2006 in Journal » XHTML/CSS
Runde Ecken und runde Ränder mit CSS
Properitäre CSS-Regel für Firefox, Mozilla und Netscape
-moz-border-radius lässt sich ohne Bedenken einsetzen. Denn alle Browser, die diese CSS-Eigenschaft nicht verstehen, bleiben auch davon unberührt. Der Wert von -moz-border-radius bestimmt den Radius der Kurve / Runde Ecke. Zum besseren Verständnis hier eine Grafik:
Es lässt sich auch der Radius jeder einzelnen Ecke bestimmen. Hierzu werden der CSS-Eigenschaft -moz-border-radius noch die gewünschte Ecke angehängt. Also:
- -moz-border-radius-topleft
- -moz-border-radius-topright
- -moz-border-radius-bottomleft
- -moz-border-radius-bottomright
Runde Ecken und runde Ränder mit CSS im IE
Um runde Ecken und runde Ränder im Internet Explorer verfügbar zu machen ist leider zusätzliches Markup nötig. Wenn ein Block-Element runde Ecken / runde Ränder erhalten soll, muss es 3 zusätzliche bedeutungslose DIVs enthalten.
Hier ein Beispiel:
<li class="round_corners">
<div>
<div>
<div>
Inhalt des Elements
</div>
</div>
</div>
</li>
Nun kann man jedem einen seperaten Hinterund zuweisen, welche dann die runden Ecken / runden Ränder vortäuschen. Die Hintergundbilder sollten bei runden Rändern etwa so aussehen:
Bei runden Ecken müssen die Hintergrundbilder natürlich die entsprechenden Füll-Farben enthalten.
Nun weisen wir die Hintergrundbilder den gewünschten Element(en) per CSS zu:
.round_corners {
background: url(pfad/top_left.jpg) top left no-repeat;
}
.round_corners div {
background: url(pfad/top_right.jpg) top right no-repeat;
}
.round_corners div div {
background: url(pfad/bottom_left.jpg) bottom left no-repeat;
}
.round_corners div div div {
background: url(pfad/top_right.jpg) bottom right no-repeat;
}
Der Vorteil dieser Methode ist, dass beim Skalieren die Ecken/Ränder in ihren Positionen bleiben. Außerdem ist kein Javascript nötig.
Ich werde im Laufe des Tages noch ein Beispiel hinzufügen.
Diskussion geschlossen
Die Kommentarfunktion dieses Artikels wurde deaktiviert. Private Mitteilungen an Martin bitte per E-Mail an martin@labuschin.com. Danke.
16 Kommentare
Jeriko am 24. April 2006 #
Es wäre noch wichtig zu erwähnen, dass der Inhalt nun im dritten "bedeutungslosen" div-Container erscheint. Insofern ist dieser nämlich gar nicht so bedeutungslos, da nur in ihm der Innenabstand geregelt werden kann.
Eine Erfahrung, die ich bei meinem fluid Design Versuch auch machen durfte, bevor ich es verworfen habe (...ich glaub das mit dem Reboot wird nix...)
Martin Labuschin am 24. April 2006 #
Naja, laut Codebeispiel spielt sich der Inhalt ja im innersten DIV ab. Jedooch hast du recht, da im ihm der Abstand geregelt werden muss. Ich arbeite lieber mit margin, deswegen habe ich da jetzt nicht über padding nachgedacht. Also danke für den Hinweis.
Hau mal rein, mit deinem Reboot. Ich will dich in meiner Redesign-Toplist aufnehmen :)
Koka am 24. April 2006 #
Wie wärs mit »Nifty Corners Cube«
Martin Labuschin am 24. April 2006 #
Nifty Corners Cube... ist das der Name dieser Methode? Ich kenn mich mit diesem Spezial-Namen nicht aus. Hauptsache es funktioniert.
Koka am 24. April 2006 #
Nee, Nifty Corners Cube ist eine eigene Methode mit CSS und JS ohne Bilder. Schlank und elegant.
Leider scheint es den Artikel nur noch in italienisch zu geben, aber auch mit einigen Beispielen; http://css.html.it/articoli/leggi/1611/nifty-corners-cube-angoli-arrotondati-mai-cosi-fac/1/
(oder die Google-Übersetzung: http://translate.google.com/translate?u=http%3A%2F%2Fcss.html.it%2Farticoli%2Fleggi%2F1611%2Fnifty-corners-cube-angoli-arrotondati-mai-cosi-fac%2F1%2F&langpair=it%7Cen&hl=en&safe=off&c2coff=1&ie=UTF-8&oe=UTF-8&prev=%2Flanguage_tools)
Solltest du dir auf jeden Fall mal anschauen
Martin Labuschin am 24. April 2006 #
Ich setzte JS ungern ein. Jedoch kann man diese Methode bedenkenlos einsetzen, wenn die Inhalte auch noch ohne JavaScript zugänglich sind. Ich ziehe aber nach wie vor lieber CSS ein :)
1rr35p0nd3r am 24. April 2006 #
Ich wünsch mir `multiple backgrounds` => css3 :)
Das `diven` hab ich mal echt satt! Schade nur das aktuelle Standardkonformität, zumindestens momentan, noch einen ordentlichen Umweg bedeutet - CSS, Barrierenfreiheit und IE sind z. B. wirklich dicke Kumpels *g
1rr35p0nd3r am 24. April 2006 #
PS.: Usability Sünde -> BLOCKSATZ :) außerdem siehts grauslick aus, machs doch wie in den Sitenotes, das wirkt auf mich sehr viel ruhiger!
Martin Labuschin am 24. April 2006 #
Danke für deine Kommentare!
Zum Blocksatz: Wart einfach die neue Version ab. Ist in fast 6 Tagen soweit. Schau einfach mal nach gaaanz oben auf meiner Website :)
Tom S. Weber am 24. April 2006 #
Ich habe heute kurz auch die "Multiple Backgrounds" angeschaut.
Mann ich liebe solche Artikel... anschaulich und sehr verständlich. Mach das weiterhin so Martin, mit Bilder und andere Medien statt nur dem Text ;)
Grüsse
Martin Labuschin am 24. April 2006 #
Werde mir deinen Ratschlag zu Herzen nehmen. Danke dafür!
Stefan am 31. Mai 2006 #
hallo martin,
habe gerade dein tutorial gelesen und möchte dir hier ein erstmal ein dickes lob dafür aussprechen :) Es gibt allerdings auch noch eine andere möglichkeit runde ecken ohne bilder mit css darzustellen. vielleicht willst du diese ja mit aufnehmen.
hier mal der link: http://www.webbe.de/index.shtml?CONTENT=script_css_corner;LANG=de
grüsse
Yannic am 15. Juli 2006 #
Hab grad das selbe Problem..
Diese Lösung hab ich mir auch überlegt, aber die ist irgendwie sowas von unschön :/
Nifty Corners will ich auch nciht benutzen, da ich sowenig wie möglich JS benutzen will...
bleibt wohl nur gedive..
Dennys am 16. Juli 2006 #
Hab die Lösung die hier im tut angesprochen wurde auch schon eingesetzt. Find es gar nicht so übel :) Ein bisschen Aufwand gibts schon aber naja.
Martin ohne jetzt hier im Quelltext nachzuschauen, hast du die Kommentarboxen auch mit dieser Lösung gemacht?
Lucas am 19. November 2006 #
Hallo,
nicht vergessen, dass der Hintergrund im innersten Container an alle weiteren Container im Innern vererbt wird!
Apollon am 11. Mai 2007 #
Oh, mein Gott!!!
warum schafft MS Internet Explorerer solche genialen Sachen nicht zu übernehmen.
Und schade, dass ned alle Mozilla verwenden, sondern die meisten immer noch IEX
grüße aus salzburg
Apollon