10.1 Das cursor Eigenschaft
CSS gibt dir die Möglichkeit, das Aussehen des Cursors an bestimmten Elementen zu ändern, indem du das cursor Attribut benutzt.
Dieses Feature erlaubt es, verschiedene Cursorarten zu spezifizieren, um die Interaktivität und visuelle Attraktivität von Webseiten zu verbessern.
Das cursor Attribut definiert das Erscheinungsbild des Mauszeigers, wenn er sich über einem Element befindet. Die Werte können
vordefiniert oder benutzerdefiniert (custom) sein.
Syntax:
element {
cursor: value;
}
Werte:
Das cursor Attribut unterstützt viele Werte, die in vordefinierte und benutzerdefinierte unterteilt werden können.
Vordefinierte Werte:
default: Standard-Cursorpointer: Zeiger-Cursor, meistens für Links verwendettext: Text-Cursor (I-förmig), gewöhnlich für Textfelder genutztmove: Bewegungs-Cursorwait: Warte-Cursor, wie Sanduhr oder Ladeanzeigehelp: Hilfe-Cursor, ein Fragezeichencrosshair: Fadenkreuz-Cursornot-allowed: Verboten-Cursor, ein durchgestrichener Kreisgrabundgrabbing: Greif-Cursor für Drag & Drop
Beispiel für die Verwendung von vordefinierten Werten:
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
<div class="default-cursor">Standard-Cursor</div>
<div class="pointer-cursor">Zeiger-Cursor</div>
<div class="text-cursor">Text-Cursor</div>
10.2 Benutzerdefinierte Werte (Custom Cursor)
Das cursor Attribut unterstützt auch benutzerdefinierte Bilder als Cursor. Hierfür nutzt man den url Wert.
Syntax:
element {
cursor: url("custom-cursor.png"), fallback;
}
Wo:
url('custom-cursor.png'): der Pfad zum Cursorbildfallback: vordefinierter Wert, der benutzt wird, falls das benutzerdefinierte Bild nicht geladen werden kann
Beispiel für die Verwendung von benutzerdefinierten Cursors:
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Benutzerdefinierter Cursor</div>
</body>
Spezifikationen und Einschränkungen für benutzerdefinierte Cursor:
- Bildformate: Unterstützte Formate sind
.cur,.png,.jpg,.gif. - Bildgrößen: Es wird empfohlen, Bilder mit 32x32 Pixel oder kleiner zu verwenden, um Leistung und Kompatibilität zu verbessern.
- Klickpunkt-Koordinaten: Du kannst den Klickpunkt im Cursorbild definieren (Hotspot). Standardmäßig ist dies die obere linke Ecke (0,0).
10.3 Details zur Nutzung von benutzerdefinierten Cursors
Bildformate
Benutzerdefinierte Cursor können in verschiedenen Formaten vorliegen, wie PNG, GIF, JPG und SVG. Es wird empfohlen, Formate mit Transparenzunterstützung (z. B. PNG) zu verwenden, damit der Cursor auf jedem Hintergrund gut aussieht.
Bildgrößen
Cursorbilder sollten nicht zu groß sein. Die empfohlenen Größen sind 32x32 Pixel oder kleiner. Größere Bilder können in manchen Browsern nicht korrekt dargestellt werden.
Festlegen der Hotspot-Koordinaten
Du kannst die Hotspot-Koordinaten des Cursors durch zusätzliche Werte nach der Bild-URL angeben.
Syntax
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Wo:
xundy: die Hotspot-Koordinaten relativ zur oberen linken Ecke des Bildes.
Beispiel für die Verwendung mit Hotspot-Koordinaten:
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor-focus">Benutzerdefinierter Cursor mit Fokus</div>
</body>
Erklärung des Codes:
.custom-cursor-focus: Setzt einen benutzerdefinierten Cursor mit den Hotspot-Koordinaten (16, 16), wodurch die Mitte des Bildes der Hotspot wird
Praktische Anwendung:
- Verbesserung der UI/UX: Benutzerdefinierte Cursor können das User Interface erheblich verbessern, indem sie es intuitiver und ästhetisch ansprechender machen.
- Interaktive Elemente: Custom Cursor können an interaktiven Elementen wie Buttons, Links, Icons usw. verwendet werden.
- Spiele und Anwendungen: In Spielen und Webanwendungen tragen benutzerdefinierte Cursor dazu bei, einen einzigartigen Stil und Atmosphäre zu erzeugen.
GO TO FULL VERSION