Round & Round & Round
Round and round and round and round and we go
Trying so hard to get a hold of everyone here
We’ve got to show how much we love them all
We squeak with idiot fake suprise
The Cure. 1996. “Round & Round & round” auf: Wild Mood Swings
Immer wieder sorgt man sich um sie - runde Ecken. Man kämpft und mogelt mit cleveren Hintergrundbild-Konstruktionen und täuscht Rundungen, Ränder und Schatten vor.
Seit Sliding Doors und ihrer Weiterentwicklung ist das Abrundungs-Grundprinzip zwar recht simpel. Doch hat man es häufig mit sehr speziellen Anforderungen zu tun, die die Sache ziemlich kompliziert werden lassen. Herausforderungen sind:
- Die Box soll flexibel skalierbar sein.
- Die Box kann auf unterschiedlichen Hintergrundbilder liegen.
- Die Box ist schattiert.
- Die Inhalte der Box können verschiedenartig. Es kommen nicht immer dieselben HTML-Elemente vor.
Lösen kann man das alles immer irgendwie mit Extra-Divs und cleveren Zerschnippeln von Grafiken und verbringt viel Zeit mit Ausprobieren und Positionieren.
Runde Ecken mit Javascript kann beim Rundungsprozess eine sehr brauchbare und zeitsparende Alternative sein. Der Code bleibt clean, die Extra-Divs werden on-the-fly vom JavaScript erzeugt und Hintergrundbilder werden nicht verwendet. Ist JavaScript deaktiviert werden die Ecken wieder eckig.
Nifty Corners ist sehr flexibel und leicht anpassbare Runde-Ecken-Bibliothek mit vielen typischen Runde-Ecken-Designs. Nifty Corners besteht aus einem Javascript, einer CSS-Datei und einer Zeile Code. Nur diese muss ediert werden. Hier gibt man bis zu 5 Merkmale der Rundungen an.
Eine runde Sache ;-) (sorry für das nahe liegende Wortspiel … es ist heiß & schwül …)
4 Kommentare »
RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URL
Bei “Smiley Cat” findet sich ein Überblick über die verschiedensten Techniken die Ecke rund zu machen: http://www.smileycat.com/miaow/archives/000044.html
Ein interessanter Ansatz um Bildern mit PHP und der GD Library runde Ecken zu geben: http://www.assemblysys.com/dataServices/php_roundedCorners.php
Es werden dann keine Extra-DIVs und kein Java-Script benötigt.
Comment von Carsten Peters — 23.07.2006, 16:15 Uhr
Ich empfehle die Methode mit reinem CSS.
Hier ein Artikel dazu: http://standards.webmasterpro.de/index.html?article=runde-boxen
Comment von Philipe — 31.08.2006, 07:09 Uhr
Ich verwende diese Methode und bin damit sehr zufrieden. Es gibt zwar zum Teil unnötiges Markup, allerdings ist die Darstellung sowohl in IE, als auch in Opera und Firefox richtig und man braucht kein JavaScript. http://labuschin.com/journal/css/runde-ecken-und-runde-raender-mit-css
@Philipe
schade nur, dass diese Methode von IE nicht unterstützt wird, das ist auch der Grund, warum sie zumindest für mich, nutzlos ist, denn IE wird leider mehr als von 50% der Benutzer eingesetzt.
Comment von Dsirt — 13.10.2006, 14:46 Uhr
Das sehe ich auch als Problem an, dass über 50 % der User den Internet Explorer nutzen.
Ist denn da was in Aussicht ?
Gruß
Ralf
Comment von Ralf — 29.01.2007, 13:45 Uhr