Ich habe mal wieder ein bisschen an meinem Theme “xamazin” rumgeschraubt! Zunächst habe ich die Datumsbox unter die Überschrift gezogen und habe auch noch die Anzeige der Kategorien und des Archivs verändert, denn diese beiden Elemente haben irgendwie nicht so recht zum Rest der Seite gepasst.
Datum nun unter der Überschrift
Die Box mit dem Datum schwebte da rechts neben der Überschrift ein wenig ziellos umher, deshalb habe ich sie unter die Überschrift geschoben und auf eine Zeile reduziert. So finde ich die Sache schon viel schicker und übersichtlicher.
Dann waren die Kategorien dran: viel zu kantig! Mit CSS lassen sich fast alle Elemente (z.B. div, span, a, …) mit einem kurzen zusätzlichen Code-Schnipsel abrunden:
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
Die 7px können durch jeden anderen Wert ausgetauscht werden.
Kategorien jetzt abgerundet
Da dieses CSS-Format eigentlich erst ab CSS3 (derzeit ist CSS2 aktuell) unterstützt werden soll, funktioniert dieses nur in modernen Browsern, wie dem Firefox oder dem Safari Browser. Benutzer des Internet Explorers müssen derzeit auf die Unterstützung dieses Formats verzichten und sehen die Elemente mit rechten Winkeln.
Tags: CSS, Design, Tipps & Tricks, xamazin
Ich finde die abegrundeten Ecken wirklich schick. Natürlich verwende ich den Firefox. ;)
“Natürlich verwende ich den Firefox. ;)”
…wie es alle Menschen mit Hirn und Verstand tun sollten :P
Firefox 4 Ever!
Runde Ecken in CSS sind immer ein sehr beliebtes Thema, da es hier sehr viele Möglichkeiten zur Umsetzung gibt. Vor allem das Darstellen im IE ist schon eine kleine Herausforderung, jedoch fast unumgänglich, da ein Großteil der Internetnutzer diesen Browser verwendet. Deshalb würde ich immer eine Variante bevorzugen, die den Internet Explorer unterstützt.
danke für den code! es gibt menschen die den explorer verwenden?