Category Archives: CSS

Rounded Corners in CSS

posted in CSS, Web 2.0 on by with No Comments

Für ein aktuelles Projekt benötigte ich eine elegane Art Boxen mit abgerundeten Ecken in HTML zu programmieren. Dabei heißt elegant nicht nur schön sondern auch mit möglichst wenig Speicherverbrauch.

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.

2008-06-06_1601

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

Cursor per CSS ändern – How To

posted in CSS on by with 1 Reply

CSS lassen sich ganz wunderbar dazu verwenden den Cursor zu verändern. Wozu das gut ist? Na stellen Sie sich doch mal ein DIV vor auf dem Sie ein Javascript onClick gelegt haben. Trotz allem verändert sich der Cursor nicht wenn Sie über das DIV fahren. Dumm oder? Genau!

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ß.