CSS Juice ist hierzu ein guter Anlafpunkt. Im Artikel 25 Rounded Corners with CSS finden sich viele interessante Lösungen für dieses Problem. Angefangen bei Bildern mit abgerundeten Ecken bis hin zu Javascriptlösungen.

Die Idee die abgerundeten Ecken mit Bildern zu simulieren kam für mich leider nicht in Frage, da sie in ihrer einfachsten Form keine Transparenz zulässt. Will man diese haben muss man mindestens 7 DIVs aufmachen und definieren sowie EXTRA die 4 Grafiken für die Ecken laden. Außerdem muss jedes Mal, wenn die Farbe der Inhaltsbox sich ändern soll ein neues Set abgerundeter Ecken angelegt werden.

Die von mir gewählte Lösung simuliert nun die Rundung indem transparente DIVs so geschickt angeordnet werden, dass sie eine Rundung ergeben. Es werden keine Grafiken geladen und die Klassen lassen sich für jede der vier Ecken verwenden. Bei einer anderen Boxfarbe muss nur das CSS angepasst werden.

Bei der Lösung mit Javascript werden die DIVs dynamisch erzeugt. Diese Lösung erlaubt dann nicht nur über einen einfachen Befehl den Radius zu bestimmen sondern auch die Vorder- und Hintergrundfarben lassen sich festlegen. Diese Scripte sind für meine Bedürfnisse aber wieder zu groß bzw. mächtig und verbrauchen zu viel Speicherplatz ergo Ladezeit.

Da das Projekt noch nicht öffentlich ist, kann ich euch leider keinen ganzen Screenshot meiner Umsetzung zeigen. Statt dessen gibt es nur einen Ausschnitt.

Und hier die Lösung:

h2 {
   cursor: pointer
}

Mit diesem Beispiel wird der Cursor bei jeder Überschift zweiter Ordnung auf “Pointer” gesetzt. Pointer steht hier für die Hand, wie sie normalerweise bei Links erscheint. Toll oder?

Weitere Cursorvarianten gefällig? Einfach mal mit der Maus drüber fahren und ausprobieren:

default
help
wait
text
crosshair
auto
s-resize (Pfeil nach "Süden")
se-resize (Pfeil nach "Süd-Osten")
hand (Pointer Ersatz - nur für IE)


Und jetzt kommt der Clou. Wem das alles zu langweilig ist, kann auch einen eigenen Cursor erstellen und einbinden:

p{
   cursor : url("test.cur"), url("test2.cur"), help
}

Dabei werden die einzelnen Cursor der Reihe nach abgearbeitet, bis einer geladen werden konnte. Ähnlich der Auflistung unterschiedlicher Schriftarten in CSS. Am Ende der Liste sollte aber einer der Standartcursor stehen, nur für den Fall, das sich keine der URLs laden ließ.