Was ist ein benutzerdefinierter Cursor?

Ein benutzerdefinierter Cursor ist ein vom Benutzer definierter Mauszeiger, der den Standard-Pfeil oder das Standard-Zeigersymbol des Browsers ersetzt. Websites und Anwendungen verwenden benutzerdefinierte Cursor, um das Branding zu verstärken, die Immersion in Spielen oder kreativen Erfahrungen zu verbessern oder einfach einen einzigartigen visuellen Touch auf einer Benutzeroberfläche hinzuzufügen. Benutzerdefinierte Cursor werden typischerweise in CSS mit der cursor-Eigenschaft definiert, wobei ein url()-Wert auf eine Bilddatei wie .cur, .png oder .svg verweist.

Webbrowser unterstützen mehrere Cursor-Dateiformate nativ. Das .cur-Format ist das klassische Windows-Cursor-Format, .ani bietet Animationsunterstützung, während .png und .svg moderne, auflösungsunabhängige Alternativen bieten, die auf allen Plattformen funktionieren.

Werkzeugbeschreibung

Der Custom Cursor Tester ermöglicht es dir, eine beliebige Cursor-Datei hochzuladen und sofort eine Vorschau zu sehen, wie sie im Browser aussieht und sich verhält. Nach dem Hochladen ersetzt dein Cursor den Standard-Zeiger in einem dedizierten Testbereich — einem karierten Viewport mit einer Schaltfläche — damit du sowohl die Bewegung im freien Raum als auch das Hover-Verhalten bewerten kannst, ohne eine einzige Zeile CSS zu schreiben.

Unterstützte Formate

Format Beschreibung
.cur Windows-Cursor-Format, weit verbreitet
.ani Animierter Windows-Cursor
.png Rasterbild, ideal für hochwertige Cursor
.svg Skalierbares Vektorbild, scharf in jeder Größe
.ico Windows-Icon-Format, auch als Cursor nutzbar

Funktionen

  • Sofortige Vorschau: Der Cursor wird live angewendet, sobald die Datei hochgeladen wird — kein Neuladen der Seite erforderlich
  • Interaktiver Testbereich: Der karierte Viewport zeigt den Cursor über einem neutralen Hintergrund für klare Sichtbarkeit
  • Schaltflächen-Testziel: Eine Schaltfläche im Testbereich ermöglicht es dir, das Cursor-Verhalten auf interaktiven Elementen zu überprüfen
  • Konsistente Cursor-Vererbung: Die Schaltfläche erbt den benutzerdefinierten Cursor, anstatt auf den Browser-Standard zurückzugreifen
  • Nur Client-seitig: Dateien werden direkt im Browser gelesen und nie auf einen Server hochgeladen

Anwendungsfälle

  • Cursor-Designer: Überprüfe, wie eine neu erstellte .cur- oder .png-Cursor-Datei aussieht, bevor du sie bereitstellst
  • Webentwickler: Teste schnell ein Cursor-Asset, bevor du es in CSS mit der cursor: url(...)-Eigenschaft integrierst
  • Spiel- und Creative-Entwickler: Überprüfe das Verhalten und die Sichtbarkeit benutzerdefinierter Zeiger in interaktiven UI-Kontexten

Wie es funktioniert

Wenn du eine Datei hochlädst, erstellt das Tool eine Objekt-URL dafür mit der URL.createObjectURL()-API des Browsers und injiziert sie als CSS-cursor-Stil im Testbereich. Dies entspricht dem Schreiben von cursor: url(your-file.cur), auto in einem Stylesheet. Das Fallback auto stellt sicher, dass der Browser seinen Standard-Cursor verwendet, wenn die Datei nicht geladen oder analysiert werden kann.

Tipps

  • Bei .png-Cursorn verwendet der Browser standardmäßig die obere linke Ecke (0 0) als Hotspot. Wenn der aktive Punkt deines Cursors an einer anderen Stelle liegen sollte (z. B. die Spitze eines Bleistifts), musst du dies möglicherweise nach dem Testen in deinem CSS anpassen.
  • Animierte .ani-Cursor werden automatisch in Browsern abgespielt, die sie unterstützen (hauptsächlich Chromium-basierte).
  • SVG-Cursor müssen klein sein (typischerweise unter 128×128 px), um in den meisten Browsern korrekt als Cursor dargestellt zu werden.