Benutzerdefinierter CSS-Cursor-Generator
Verwandeln Sie ein Emoji oder ein Bild in einen CSS-Mauszeiger, legen Sie den Ankerpunkt (Hotspot) fest und testen Sie das Ergebnis live, bevor Sie den Code kopieren. 100 % lokale Verarbeitung in Ihrem Browser – nichts wird an einen Server gesendet.
So funktioniert's
Die CSS-Eigenschaft cursor akzeptiert ein Bild (url(...)), einen optionalen Ankerpunkt in Pixeln und ein Fallback-Schlüsselwort, das verwendet wird, wenn das Bild nicht geladen werden kann. Dieses Tool kodiert Ihr Emoji oder Ihr Bild direkt im Browser als Data-URL und erstellt die vollständige CSS-Deklaration, die Sie in Ihr Stylesheet einfügen können.
Wozu dient der Ankerpunkt (Hotspot)?
Der Ankerpunkt legt fest, welches Pixel des Bildes genau der Mausposition entspricht. Bei einem Ziel- oder Pfeil-Cursor ist es üblich, den Ankerpunkt in die Mitte oder an die Spitze des Bildes zu setzen, damit der Klick an der richtigen visuellen Stelle erfolgt.
Warum ignorieren manche Browser meinen benutzerdefinierten Cursor?
Die meisten Browser begrenzen die Größe benutzerdefinierter Cursor auf etwa 128 Pixel und verwenden den Fallback-Cursor, wenn das Bild zu groß oder in einem nicht unterstützten Format vorliegt. Bevorzugen Sie ein leichtes quadratisches Bild (PNG oder SVG) und eine angemessene Größe für eine zuverlässige Darstellung in allen Browsern.
Weder Ihr Bild noch Ihr Emoji werden übertragen: Die gesamte Kodierung erfolgt lokal im Speicher Ihres Browsers.