CSS: Runde Ecken machen lassen

google_roounded_cornersAuch 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_roundedCornerRounded 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

Kommentare

Vielen Dank für den Tipp - da muss man erstmal drauf kommen! :-)

Eure Sidebar Navigation meinte ich.

Toller Blog und nette Tipps. Wie wäre es, wenn eure mit "display:block" hovert und die Schrift dann 000 ist? Wäre sicherlich einfacher zum Navigieren.

nice.

Ja, die Seite ist recht hilfreich und vor allen Dingen spuckt sie gute Ergebnisse aus.

Aber ich wollte mal eine horizontale Listen-Navigation erstellen mit abgerundeten Ecken als Hintergrund. Aber nach 4 Stunden rumprobieren hab ich es dann sein gelassen. Es ging einfach gar nicht. :(

anyway. :D


Kommentar schreiben

* Diese Felder sind erforderlich