css: runde Ecken

Heute habe ich lange mit Photoshop darum gerungen, klare runde Ecken, ohne weiche Kante, ohne irgendwelche Effekte in einen Sprite zu packen um damit winzige Tabs mit runden Ecken zu erzeugen. Über einen Podcast stieß ich zu Stu Nicholls und seinen css-Spielereien. Neben der im Podcast erklärten Methode, die sich eher für Rundungen mit kleinem Radius eignet, wird dort auch eine Methode für riesige Radien gezeigt:

Die Ecke ist der Punkt

man positioniert in jede Ecke einer Box einen Punkt •.
Die Größe des Punktes bestimmt den Radius der Ecke. Der Content-Bereich liegt mit einem höheren z-index über den Punkten. Die Box wächst problemlos in alle Richtungen, allein durch eine Zeile css lassen sich Hintergrundfarbe und Radius der Ecken ändern. Damit schlägt sie die Schwachstellen meiner Lösung mit Background-Grafiken.
Wahnsinn.

Advertisements

3 Kommentare zu “css: runde Ecken

  1. gerritious sagt:

    Simpel und genial

  2. cyberer sagt:

    Absolut. Der Nachteil, so stehts auch in einem der Kommentare, ist, dass die Punkte Content sind, was nicht ganz im Sinne des semantischen Codens ist.

  3. […] beweisen unzählige Posts über perfektes Markup. Das genau ist auch der Grund, warum ich mich hier immer wieder damit befasse. Auch, wenn wir schon lange dabei sind – und auch, wenn wir glauben, dass wir […]

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s