CSS: Runde Ecken machen lassen

28. Juli 2009 | 5 Kommentare

google_roounded_corners

Auch Google hat’s getan – warum wir nicht auch?
Ich bin gestern zwei mal über eine sehr ähnliche Runde-Ecken-Technick gestolpert, die ohne CSS3 und ohne Grafiken auskommt. Und zwar zuerst auf der iGoogle-Homepage und dann am Abend nochmal bei einem Runde-Ecken-Generator namens Spiffy Corner.

Doch beim genauen Hinschauen sind Greg Johnsons Spiffy Corners wirklich beindruckend. Denn er bekommt sogar einen Anti-Alias-Effekt ohne Grafiken hin. Darüber bin ich bisher nicht gestoplpert!

Das Ergebnis

5px_roundedCorner
Rounded Corners ohne Grafiken

Die Farbabstufungen löst Greg Johnsons nur über background-colors, borders, paddings etc. Man braucht ein bisschen, bis man kapiert hat, was er da genau macht, aber Respekt – da hat eine ein schicke Lösungs gefunden.

Der Generator

spiffy_rounded_corner

Im Moment funktioniert dieser Code-Generator allerdings nur für 5px. Man kan eigene Vorder-und Hintergrundfarben festlegen sowie den CSS-Klassen-Namen selbst bestimmen. Dann bekommt man den Code ausgelieftert.

Ach so – der Link fehlt noch: spiffycorners.com

Ähnliche Artikel:

Meta-Daten

Autor: undkonsorten, Thomas Alboth
Tags+Kategorien: , , , ,
Kategorie: OpenSource, Stylesheets (CSS)



5 Kommentare

Auch mal Kommentieren:

Kommentar