Runde Ecken ohne Bilder mit CSS

Ich arbeite gerade an einer kleinen Website und wollte gerne runde Ecken haben. Eigentlich hatte das Joomla-Template (ich spiel etwas mit Joomla rum, man muss ja mal alles probiert haben :-)) , dass ich modifiziere schon runde Ecken, aber mit Hilfe von Bildern. Generell manchmal die einfachere und schönere Lösung, aber da ich mir mit den Farben noch komplett unsicher bin, müsste ich für jede Designänderung die Bilder ändern. => Mist!

Also hab ich was gegoogelt und bin auf 25 Rounded Corners Techniques with CSS gestoßen. Da sind sehr viele Lösungen beschrieben, einige mit Bildern, einige ohne, einige mit Javascript und auch ohne… Die erste die ich getestet hatte, war Nifty Corners Cube, die sehr einfach und gut funktionierte. Leider mit einer Einschränkung: So wie ich es sehe, kann ich keine divs abrunden, die floatende Elemente enthält. Und da ich keine festen Designs mag, müssen Elemente bei mir floaten. Also weitersuchen…

Dann fand ich curvyCorners, das ich auch momentan benutze. Folgendes klappt besser als bei Nifty Corners Cube:

  • Es geht richtig mit divs und floatenden Inhalten um
  • Wenn ein Element über einem Bild liegt, wird das Bild auch an den abgerundeten Ecken richtig angezeigt
  • Rahmen werden unterstützt

Aber anderes geht dafür nicht so gut:

  • Ich kann anscheinend keine Element über CSS-Classes ansprechen, obwohl das laut Doku gehen soll. (Wird wohl mein Fehler sein, aber ich seh nicht was ich falsch mache…)
  • Die Nutzung ist Umständlicher:
    • >12 Zeilen Javascript gegenüber einer bei NiftyCornersCube, wo es einfach besser gekapselt wurde
    • NiftyCornerCubes kann sehr gut mit CSS-Syntax umgehen, man kann z.B. div#menu ul li a angeben, mit curvyCorners ist mir das leider nicht gelungen

Ich werde aber weiter mit curvyCorners rumspielen, da die Lösung umständlicher, aber scheinbar mächtiger ist.

What do you think of this post?
  • Awesome (0)
  • Interesting (0)
  • Useful (0)
  • Boring (0)
  • Sucks (0)

Schreibe einen Kommentar

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