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.
Hat dir der Artikel gefallen?
- Deine Meinung: Schreib’ einen Kommentar
- Mehr lesen: Abonnier’ den Full-Feed
- Kurze URL: http://labuschin.com/3b4
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 :)
Wie wärs mit �Nifty Corners Cube�
Nifty Corners Cube... ist das der Name dieser Methode? Ich kenn mich mit diesem Spezial-Namen nicht aus. Hauptsache es funktioniert.
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
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 :)
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
PS.: Usability Sünde -> BLOCKSATZ :) außerdem siehts grauslick aus, machs doch wie in den Sitenotes, das wirkt auf mich sehr viel ruhiger!
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 :)
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
Werde mir deinen Ratschlag zu Herzen nehmen. Danke dafür!
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
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..
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?
Hallo,
nicht vergessen, dass der Hintergrund im innersten Container an alle weiteren Container im Innern vererbt wird!
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
Jeriko
23.04.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...)