Runde Ecken sind wieder mal ziemlich in. Die Umsetzung ist teilweise mit der Hilfe von Javascript und diversen Background-Elemente gelöst wurden. Letztens verfing sich jedoch ein Artikel in meinem Blognetz in der der Ansatz über die Verwendung von puren CSS verfechtet wird. Statt Nifty-Corners heißt es jetzt Spiffy Corners. Ein Generator wird gleich mitgeliefert, so dass die runden Ecken beim Farbwechsel schön überlaufen (anti-aliased).
Hier das Beispiel:
#box {width:200px;margin-left:100px;}.spiffy{display:block}.spiffy *{display:block;height:1px;overflow:hidden;background:#BFEF01}.spiffy1{border-right:1px solid #e3f891;padding-right:1px;margin-right:3px;border-left:1px solid #e3f891;padding-left:1px;margin-left:3px;background:#cff340;}.spiffy2{border-right:1px solid #f8fde5;border-left:1px solid #f8fde5;padding:0px 1px;background:#cbf231;margin:0px 1px;}.spiffy3{border-right:1px solid #cbf231;border-left:1px solid #cbf231;margin:0px 1px;}.spiffy4{border-right:1px solid #e3f891;border-left:1px solid #e3f891;}.spiffy5{border-right:1px solid #cff340;border-left:1px solid #cff340;}.spiffy_content{padding:0px 5px;background:#BFEF01;height:100px;}
Bei Yuhů gibt es eine Lösung wie man die Elemente per CSS vertikal zentrieren kann.