Cursor - Dies ist ein wichtiger Teil der Benutzeroberfläche einer Webseite, mit dem Sie auf interaktive Elemente verweisen können. Normalerweise wird der Cursor durch einen Standardpfeil dargestellt, aber Sie können ihn ändern, um wichtige Elemente hervorzuheben oder die Aufmerksamkeit der Besucher zu erregen. Eine Möglichkeit, dies zu tun – den Cursor in einen gelben Kreis verwandeln. Dieser stilvolle und ungewöhnliche Effekt kann Ihrer Webseite mit etwas CSS und JavaScript hinzugefügt werden.
Vorbereiten des Cursors
Um zu beginnen, müssen Sie ein Cursorbild vorbereiten. Sie können es in jedem Grafikeditor erstellen, indem Sie es im PNG-Format mit transparentem Hintergrund speichern. Der gelbe Kreis kann eine beliebige Größe haben, es wird jedoch empfohlen, eine Größe im Bereich von 30x30 Pixeln zu wählen. Wenn das Bild fertig ist, laden Sie es auf den Server hoch oder speichern Sie es lokal in Ihrem Projektordner.
Hinzufügen von CSS-Stilen
Jetzt, da Sie ein Cursorbild haben, können Sie CSS-Stile hinzufügen, um es zu einem gelben Kreis zu machen. Wählen Sie zuerst das Seitenelement aus, auf das Sie diesen Cursor setzen möchten. Fügen Sie in der CSS-Datei dem entsprechenden Element eine Eigenschaft hinzu cursor und geben Sie den Pfad zum Cursorbild als Link oder Dateipfad an. Zum Beispiel: cursor: url(Bildpfad), auto;. Eigenschaft auto weist den Browser an, den Standardcursor zu verwenden, wenn das Bild nicht verfügbar ist oder nicht geladen werden kann.
Was ist ein Cursor und wie funktioniert er
Der Cursor kann verschiedene Formen annehmen, z. B. ein kleiner Pfeil, der auf ein Objekt zeigt oder an die Stelle, an der Sie klicken können, oder ein blinkender vertikaler Strich, der die Texteingabeposition anzeigt.
Wenn der Benutzer die Maus bewegt, bewegt sich der Cursor auch über den Bildschirm. Dies wird durch das Lesen der Maussignale und das Konvertieren dieser Signale in die Koordinaten der Cursorposition auf dem Bildschirm gewährleistet.
Der Cursor kann seine Form abhängig vom aktuellen Kontext ändern. Wenn Sie beispielsweise über einen Link schweben, kann sich der Cursor zu einer imaginären Hand entwickeln, die darauf hinweist, dass der Link angeklickt werden kann. Auch einige Anwendungen ermöglichen es dem Benutzer, die Form des Cursors an ihre individuellen Vorlieben anzupassen.
Webentwickler können die Form des Cursors auf einer Webseite auch mithilfe der CSS-Eigenschaft "cursor" anpassen. Auf diese Weise können Sie interaktive Elemente auf der Seite erstellen und das visuelle Erlebnis des Benutzers verbessern.
Warum brauchst du einen gelben Kreis?
Gelber Kreis kann nützlich sein, wenn Sie visuelle Effekte auf Ihrer Website erstellen. Es kann die Aufmerksamkeit der Benutzer auf einen bestimmten Bereich oder ein bestimmtes Element einer Seite lenken, wodurch es sichtbarer und hervorgehobener wird.
Gelbe Umgebung kann auch verwendet werden, um den aktiven Status von Elementen wie Schaltflächen oder Links anzugeben. Es unterstreicht die Interaktivität und Bereitschaft, auf Benutzeraktionen zu reagieren.
Außerdem, Gelbe kann Assoziationen mit Helligkeit, Freude und Optimismus schaffen. Es kann Ihnen helfen, gute Laune zu vermitteln und dem Design Ihrer Website etwas Verspieltheit zu verleihen.
Auf diese Weise, gelber Kreis kann ein leistungsfähiges Werkzeug sein, um die Aufmerksamkeit des Benutzers zu erregen und ein ansprechendes und effektives Webdesign zu erstellen.
Auswählen eines geeigneten Cursors
Die richtige Auswahl des Cursors kann die Benutzerfreundlichkeit Ihrer Website oder Anwendung erheblich beeinträchtigen. Wenn Sie einen geeigneten Cursor auswählen, können Benutzer verstehen, welche Aktion sie ausführen können oder welche Inhalte sie auf Ihrer Website anzeigen können.
Es gibt viele voreingestellte Cursor in CSS, wie "default" (Standardcursor), "pointer" (Zeiger), "text" (Textcursor) usw. Sie befinden sich im Wert der Eigenschaft "cursor". Manchmal müssen Sie jedoch einen Cursor verwenden, der nicht in der Liste der voreingestellten Werte angezeigt wird. Wenn Sie beispielsweise einen runden gelben Cursor für Ihre Website erstellen möchten, müssen Sie ihn selbst erstellen.
Dies kann mit einem Bild geschehen, das als Cursor verwendet wird. Sie müssen ein Bild des gelben Kreises erstellen und es im PNG- oder SVG-Format speichern. Sie können dieses Bild dann in der Cursor-Eigenschaft verwenden, indem Sie den Wert "url()" verwenden und den Pfad zur Bilddatei im Argument der Funktion "url()" angeben.
In diesem Beispiel ist das Bild "cursor.png", das ein gelber Kreis ist, wird als Cursor für das gesamte Element verwendet body auf der Seite. Mit der Eigenschaft "url()" geben wir den Pfad zu diesem Bild an.
Wenn Sie also ein Bild als Cursor erstellen und verwenden, können Sie einzigartige und originelle Effekte erstellen, die die Benutzeroberfläche von Websites bereichern.
Verwenden von Systemcursoren
In HTML können Sie Systemcursor verwenden, um das Erscheinungsbild eines Cursors auf einer Webseite zu ändern. Systemcursor sind vordefinierte Symbole, die vom Betriebssystem des Benutzers definiert werden. Dadurch können Sie interaktive und intuitivere Schnittstellen erstellen.
Um den Systemcursor in CSS zu verwenden, können Sie die cursor-Eigenschaft verwenden. Der Wert dieser Eigenschaft bestimmt, welcher Systemcursor verwendet werden soll.
Um beispielsweise den Cursor zu einem gelben Kreis zu machen, können wir den Wert "url('yellow-circle.cur'), auto". Der erste Teil des Werts ist der Pfad zum Cursor im Format .der zweite Teil ist das Schlüsselwort auto, das angibt, dass der Browser einen anderen Cursor verwenden soll, wenn der angegebene Cursor nicht gefunden wird.
Um einen eigenen Cursor zu erstellen, können Sie den Cursor-Generator verwenden, mit dem Sie ein Bild hochladen und in eine Cursordatei mit einer Erweiterung konvertieren können .cur. Sie können dann die resultierende Datei in CSS verwenden, um das Aussehen des Cursors anzupassen.
Durch die Verwendung von Systemcursoren in HTML können Sie interaktive und lesbare Schnittstellen erstellen. Stellen Sie sicher, dass der ausgewählte Cursor mit dem Kontext übereinstimmt und keine Verwirrung bei den Benutzern verursacht.
Erstellen eines eigenen Cursors
Wenn Sie einen eigenen Webseitencursor erstellen, können Sie einen einzigartigen Stil und ein einzigartiges Design hinzufügen, das sich vom Standardcursor unterscheidet.
Um einen eigenen Cursor zu erstellen, müssen Sie spezielle Bilder verwenden, die den Cursor in verschiedenen Zuständen darstellen (z. B. wenn Sie über einen Link schweben oder auf eine Schaltfläche klicken).
Mit den folgenden Schritten können Sie einen Cursor erstellen:
Beispielcode zum Erstellen eines eigenen Cursors:
Im folgenden Beispiel werden cursor_default-Bilder verwendet.cur , cursor_hover.cur und cursor_active.cur für verschiedene Cursorzustände.
Nachdem Sie eine Tabelle mit Cursorbildern erstellt und die Cursor-CSS-Eigenschaft auf die Elemente der Seite angewendet haben, die den Cursor verwenden sollen, können Sie einen eigenen stilisierten Cursor erhalten.
Schritte zum Ändern des Cursors
Schritt 1: Öffnen Sie Ihr HTML-Dokument in einem Texteditor oder in einer Webentwicklungsumgebung.
Schritt 2: Fügen Sie den folgenden Code in einen Abschnitt Ihres HTML-Dokuments ein:
Schritt 3: Stellen Sie sicher, dass Sie ein Cursorbild im Format haben .cur. Wenn Sie noch kein solches Bild haben, erstellen Sie es und speichern Sie es im gewünschten Format, und geben Sie dann den Pfad zu dieser Datei im obigen Code an. Die Datei mit dem Cursorbild muss sich im selben Ordner wie Ihr HTML-Dokument befinden.
Schritt 4: Speichern Sie das HTML-Dokument und öffnen Sie es in einem Webbrowser. Jetzt sollten Sie sehen, dass Ihr Cursor zu einem gelben Kreis geworden ist.
Anmerkung: Wenn Sie möchten, dass der Cursor nur über bestimmten Elementen auf der Seite ein gelber Kreis ist, können Sie den Stil auf diese Elemente anwenden, anstatt den Stil für body. Zum Beispiel:
Ersetzt .my-element auf einen Selektor, der Ihren Elementen entspricht.
Vorbereiten des Cursorbilds
Bevor Sie mit dem Erstellen eines gelben Kreises als Cursor beginnen, müssen Sie ein Bild vorbereiten, das als Cursor verwendet werden soll. Befolgen Sie dazu die nachstehenden Anweisungen:
- Wählen Sie das Bild aus, das Sie als Cursor verwenden möchten. Es muss im PNG- oder GIF-Format sein und einen transparenten Hintergrund haben.
- Öffnen Sie das Bild in einem Bildbearbeitungsprogramm wie Adobe Photoshop oder GIMP.
- Stellen Sie sicher, dass das Bild nicht größer als 32 mal 32 Pixel ist, da dies die maximale Cursorgröße auf den meisten Betriebssystemen ist.
- Wenn das Bild die erforderlichen Abmessungen hat, speichern Sie es mit der Erweiterung .cur oder .ani in den Ordner Ihres Projekts.
Nachdem Sie das Cursorbild vorbereitet haben, können Sie mit dem nächsten Schritt fortfahren, indem Sie einen CSS-Stil erstellen, um einen gelben Kreis als Cursor anzuzeigen.
Hinzufügen von CSS-Code
Um das Erscheinungsbild des Cursors in einen gelben Kreis zu ändern, müssen Sie der Stylesheet-Datei CSS-Code hinzufügen.css) oder innerhalb eines Tags auf Ihrer HTML-Seite.
Hier ist ein Beispiel für CSS-Code, den Sie verwenden können:
strong
Beachten Sie, dass in diesem Beispiel eine Datei mit dem Namen "yellow-circle" verwendet wird.cur". Dies ist eine Cursorbilddatei, die sich im selben Verzeichnis wie die HTML-Datei befinden muss. Wenn Sie ein anderes Bild verwenden möchten, ersetzen Sie "yellow-circle".cur" auf den Namen Ihrer Datei.
Hinweis: Wenn Sie diesen CSS-Code nur für ein bestimmtes Element hinzufügen möchten, z. B. für Links, fügen Sie der CSS-Regel einen entsprechenden Selektor hinzu. Um diesen Cursor beispielsweise nur auf Links anzuwenden, können Sie den folgenden Code verwenden:
Nachdem Sie den CSS-Code hinzugefügt haben, speichern und aktualisieren Sie Ihre HTML-Seite. Der Cursor sollte nun als gelber Kreis angezeigt werden, wenn er über die Elemente schwebt, auf die dieser Stil angewendet wurde.
Anwenden eines neuen Cursors
Das Erstellen eines einzigartigen visuellen Cursor-Stils kann die Benutzererfahrung auf Ihrer Website erheblich verbessern. Wenn Sie den Cursor besonders und ausdrucksstark machen möchten, können Sie einen neuen Cursor anwenden, der ein gelber Kreis ist.
Um einen solchen Cursor zu setzen, benötigen Sie ein Bild eines gelben Kreises im Format.cur oder .png. Nachdem Sie dieses Bild erhalten haben, müssen Sie den folgenden CSS-Code hinzufügen:
- Erstellen Sie eine CSS-Klasse mit dem Namen, den Sie für Ihren neuen Cursor verwenden möchten. Zum Beispiel:
- In diesem CSS-Code verwenden wir die Cursor-Eigenschaft, um einen neuen Cursor anzugeben. URL-Wert("yellow-circle.png") gibt den Pfad zu Ihrem gelben Kreisbild an. Der Wert auto bedeutet, dass der Browser den Standardcursor verwenden muss, wenn kein Cursorbild verfügbar ist.
- Fügen Sie diese Klasse dem HTML-Element hinzu, für das Sie einen neuen Cursor anwenden möchten:
// Контент элемента
Jetzt sieht Ihr Cursor wie ein gelber Kreis aus, wenn Sie über ein Element mit der Klasse "custom-cursor" schweben. Dies ist eine einfache und effektive Möglichkeit, Ihre Website für Benutzer einzigartiger und attraktiver zu gestalten.
Überprüfung auf verschiedenen Geräten
Bevor Sie eine Website mit einem gelben Kreis als Cursor veröffentlichen, sollten Sie überprüfen, wie der Cursor auf verschiedenen Geräten aussehen wird. Schließlich kann der Kreis auf einem mobilen Gerät zu klein oder auf einem großen Monitor zu groß sein.
Es wird empfohlen, verschiedene Geräte mit unterschiedlichen Bildschirmauflösungen zu verwenden, um die Überprüfung durchzuführen. Dies können Computer, Laptops, Tablets und Smartphones sein. Bei der Überprüfung am Computer wird empfohlen, die Bildschirmauflösung zu ändern, um zu sehen, wie der Cursor in verschiedenen Maßstäben aussieht.
Es ist wichtig sich daran zu erinnern, dass der Cursor auf verschiedenen Geräten und in verschiedenen Browsern unterschiedlich angezeigt werden kann. Beispielsweise kann der Kreis auf einigen Geräten und Browsern durch einen Standardcursor ersetzt werden, während er auf anderen Geräten und Browsern möglicherweise nicht korrekt angezeigt wird. Daher wird empfohlen, den Cursor auf allen Plattformen und Browsern zu testen, die Sie für Ihre Website verwenden möchten.
Es wird empfohlen, Emulatoren oder echte Geräte für die Überprüfung auf mobilen Geräten zu verwenden. Emulatoren können helfen, zu visualisieren, wie der Cursor auf verschiedenen Modellen von Smartphones und Tablets aussehen wird. Es wird jedoch dringend empfohlen, den Cursor auch auf realen Geräten zu überprüfen, um die Richtigkeit des Ergebnisses sicherzustellen.
Nachdem Sie die Überprüfung durchgeführt haben und sichergestellt haben, dass der Cursor auf verschiedenen Geräten gut aussieht, können Sie sicher sein, dass Ihre Website mit einem gelben Kreis als Cursor auf allen Geräten, die Benutzer der Website verwenden, schön und professionell aussieht.
