CSS: Runde Ecken machen lassen
28. Juli 2009 | 5 KommentareAuch 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
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
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
28. Juli 2009, 12:26 Uhr
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. 😀
1. Dezember 2009, 00:26 Uhr
nice.
10. April 2010, 22:24 Uhr
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.
10. April 2010, 22:24 Uhr
Eure Sidebar Navigation meinte ich.
9. November 2010, 14:05 Uhr
Vielen Dank für den Tipp – da muss man erstmal drauf kommen! 🙂