Rounded Corners in CSS

posted in CSS, Web 2.0 on by with No Comments

Für ein aktuelles Projekt benötigte ich eine elegane Art Boxen mit abgerundeten Ecken in HTML zu programmieren. Dabei heißt elegant nicht nur schön sondern auch mit möglichst wenig Speicherverbrauch.

CSS Juice ist hierzu ein guter Anlafpunkt. Im Artikel 25 Rounded Corners with CSS finden sich viele interessante Lösungen für dieses Problem. Angefangen bei Bildern mit abgerundeten Ecken bis hin zu Javascriptlösungen.

Die Idee die abgerundeten Ecken mit Bildern zu simulieren kam für mich leider nicht in Frage, da sie in ihrer einfachsten Form keine Transparenz zulässt. Will man diese haben muss man mindestens 7 DIVs aufmachen und definieren sowie EXTRA die 4 Grafiken für die Ecken laden. Außerdem muss jedes Mal, wenn die Farbe der Inhaltsbox sich ändern soll ein neues Set abgerundeter Ecken angelegt werden.

Die von mir gewählte Lösung simuliert nun die Rundung indem transparente DIVs so geschickt angeordnet werden, dass sie eine Rundung ergeben. Es werden keine Grafiken geladen und die Klassen lassen sich für jede der vier Ecken verwenden. Bei einer anderen Boxfarbe muss nur das CSS angepasst werden.

Bei der Lösung mit Javascript werden die DIVs dynamisch erzeugt. Diese Lösung erlaubt dann nicht nur über einen einfachen Befehl den Radius zu bestimmen sondern auch die Vorder- und Hintergrundfarben lassen sich festlegen. Diese Scripte sind für meine Bedürfnisse aber wieder zu groß bzw. mächtig und verbrauchen zu viel Speicherplatz ergo Ladezeit.

2008-06-06_1601

Da das Projekt noch nicht öffentlich ist, kann ich euch leider keinen ganzen Screenshot meiner Umsetzung zeigen. Statt dessen gibt es nur einen Ausschnitt.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>