Cursore CSS personalizzato

Il cursore indica la posizione sullo schermo in cui l'utente può fare clic o inserire testo. Possono esserci diversi cursori utilizzati per diversi componenti del sito web. Uno sviluppatore deve assicurarsi che i cursori utilizzati nell'applicazione siano attraenti. Ad esempio, un cursore a forma di mano che punta può essere utilizzato sul pulsante al passaggio del mouse. L'indicatore di testo (linea lampeggiante) viene utilizzato sulla casella di testo in cui deve essere inserito il testo.

Esistono diversi stili di cursore nei CSS utilizzati semplicemente specificando il valore della proprietà del cursore. Tuttavia, uno sviluppatore può creare un cursore personalizzato utilizzando i CSS.

Questa guida allo studio fornirà su:

- Cursore CSS
- Cursore personalizzato CSS

Prima di addentrarci nell'argomento, vediamo alcune delle forme del cursore CSS con un esempio pratico.

Cursore CSS

Il CSS” cursore ” ha valori diversi, come puntatore, nessuno, avanzamento e altro. Creiamo una tabella che contenga righe su cui verranno visualizzati diversi cursori al passaggio del mouse.

Esempio: creazione di una tabella che rappresenta diversi cursori CSS in HTML

Innanzitutto, aggiungi l'elemento

in HTML. All'interno di questo elemento:

- Il tag

verrà utilizzato per creare righe.

La prima riga contiene le intestazioni.

Queste intestazioni sono specificate utilizzando i tag

contengono due tag

. Altri tag
per popolare le colonne con i dati. Il secondo tag	rappresenta gli elementi del pulsante che vengono applicati con un CSS ' cursore ” proprietà con valori diversi. Di seguito è riportato il codice HTML per lo scenario precedente: < tavolo > < tr > < th stile = 'larghezza: 200px;' > selettore cursore css th > < th stile = 'larghezza: 200px;' > stile del cursore th > tr > < tr > < td > cursore: puntatore td > < td >< pulsante stile = 'cursore: puntatore;' > puntatore pulsante > td > tr > < tr > < td > cursore: avanzamento td > < td >< pulsante stile = 'cursore: avanzamento;' > progresso pulsante > td > tr > < tr > < td > cursore: non consentito td > < td >< pulsante stile = 'cursore: non consentito;' > non autorizzato pulsante > td > tr > < tr > < td > cursore: nessuno td > < td >< pulsante stile = 'cursore: nessuno;' > nessuno pulsante > td > tr > < tr > < td > cursore: sposta td > < td >< pulsante stile = 'cursore: sposta;' > spostare pulsante > td > tr > < tr > < td > cursore: prendi td > < td >< pulsante stile = 'cursore: prendi;' > preda pulsante > td > tr > < tr > < td > cursore: copia td > < td >< pulsante stile = 'cursore: copia;' > copia pulsante > td > tr > < tr > < td > cursore: col-ridimensiona td > < td >< pulsante stile = 'cursore: col-ridimensiona;' > col-resize pulsante > td > tr > < tr > < td > cursore: ridimensionamento riga td > < td >< pulsante stile = 'cursore: ridimensionamento riga;' > ridimensionamento della riga pulsante > td > tr > < tr > < td > cursore: testo td > < td >< pulsante stile = 'cursore: testo;' > testo pulsante > td > tr > tavolo > Il codice precedente genererà il seguente risultato: Nella prossima sezione, applicheremo diversi stili agli elementi HTML. Stile 'tutti' gli elementi * { imbottitura: 0 ; margine: 0 ; famiglia di caratteri: Arial, Helvetica, sans-serif; } Tutti gli elementi HTML vengono applicati con gli stili CSS spiegati di seguito: “ imbottitura ” proprietà con “ 0 Il valore ” non include spazi intorno al contenuto dell'elemento. “ margine ” proprietà con “ 0 ” Il valore non aggiunge spazio all'esterno di ciascuno degli elementi. “ famiglia di font ” alla proprietà viene assegnato un valore “ Arial, Helvetica, sans serif ”. L'elenco degli stili di carattere viene fornito per garantire che se il primo stile non è supportato dal browser, devono essere applicati altri stili. Elemento “tavolo” in stile tavolo { margine: 0px automatico; bordo: 1px solido gainsboro; } L'elemento tabella HTML viene applicato con le proprietà CSS descritte di seguito: “ frontiera ” la proprietà è impostata con il valore “ 1px guadagni solidiboro ” che rappresenta rispettivamente la larghezza del bordo, lo stile del bordo e il colore del bordo. “ margine La proprietà ” si comporta come sopra specificato. Elemento stile 'td'. td { text-align: centro; } L'elemento	viene applicato con la proprietà ' allineamento del testo ” con il valore “ centro ”. Allineerà il testo della colonna al centro. Elemento 'pulsante' di stile pulsante { colore di sfondo: blu cadetto; imbottitura: 10px 10px; colore: #ffffff; larghezza: 150px; } L'elemento button utilizzato nel codice HTML di cui sopra ha uno stile con le nuove proprietà CSS spiegate di seguito: “ colore di sfondo ” specifica il colore dello sfondo dell'elemento. “ imbottitura ” con i valori assegnati come “ 10px 10px ” aggiunge uno spazio di 10 px in alto-in basso e 10 px ai lati sinistro-destro degli elementi dell'elemento. “ colore ” regola il colore del carattere dell'elemento. “ larghezza ” è la proprietà che regola la larghezza dell'elemento. Il codice precedente genererà il seguente risultato: Finora abbiamo discusso i cursori forniti dai CSS. Nella prossima sezione, l'esempio descriverà come creare un cursore personalizzato con i CSS. Cursore personalizzato CSS Gli sviluppatori devono utilizzare cursori adeguati per le loro applicazioni. I cursori dovrebbero essere resi attraenti per attirare l'attenzione degli utenti. Inoltre, il cursore personalizzato può essere creato per questo scopo. Guarda l'esempio qui sotto! Esempio: come creare un cursore personalizzato con i CSS? In HTML, aggiungi due elementi div. Uno con la classe” cerchio ” e l'altro con la classe “ punto ”. HTML < div classe = 'cerchio' > div > < div classe = 'punto' > div > Andiamo avanti verso la sezione CSS. Elemento 'corpo' di stile corpo { altezza: 100 vh; } L'elemento body del file HTML viene applicato con lo stile ' altezza ” proprietà per impostare l'altezza dell'elemento. Stile “cerchio” div .cerchio { larghezza: 20px; altezza: 20px; bordo: 2px bianco pieno; raggio del bordo: cinquanta % ; } Di seguito è riportata la spiegazione delle proprietà CSS che vengono applicate all'elemento div con classe ' cerchio ”: “ larghezza La proprietà ” regola la larghezza dell'elemento. “ frontiera ” proprietà con il valore specificato come “ 2px bianco solido ” rappresenta la larghezza del bordo, lo stile del bordo e il colore. “ bordo-raggio La proprietà ” modifica il bordo dell'elemento in modo rotondo. Stile 'punto' div .punto { larghezza: 5px; altezza: 5px; colore di sfondo: bianco; raggio del bordo: cinquanta % ; } L'elemento div con class point è dotato di diverse proprietà descritte di seguito: “ colore di sfondo La proprietà ” specifica il colore dello sfondo dell'elemento. “ bordo-raggio ” arrotonda i bordi dell'elemento. Altre proprietà funzioneranno come discusso. Il codice dato visualizzerà il seguente cursore sulla pagina web: Abbiamo creato il cursore utilizzando HTML e CSS. Ora, nella sezione successiva, viene scritto il codice JavaScript per aggiungere la funzionalità richiesta al cursore. javascript < copione > const cursorCircle = document.querySelector ( '.cerchio' ) ; const cursorPoint = document.querySelector ( '.punto' ) ; const moveCursor = ( e ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` tradurre ( ${mouseX} px, ${mouseY} px ) ` ; cursorPoint.style.transform = ` tradurre ( ${mouseX} px, ${mouseY} px ) ` ; } window.addEventListener ( 'mossa del mouse' , moveCursor ) copione > La descrizione del suddetto codice JavaScript è riportata di seguito: “ Il tag ” è abbinato al tag , utilizzato per scrivere codice JavaScript. “ cost La parola chiave ” indica che la parola chiave const seguita da una variabile non può essere riassegnata. “ document.querySelector('.cerchio') ” restituisce l'elemento circle div che corrisponde al selettore specificato nel documento. “ document.querySelector('.point') ” restituisce l'elemento point div che corrisponde al selettore specificato nel documento. “ const moveCursor = (e) => ” questa funzione specifica la funzione del cursore. “ e.clientY ” restituisce la coordinata verticale quando è stato attivato l'evento del mouse. “ e.clientX ” restituisce la coordinata orizzontale quando viene attivato l'evento del mouse. “ cursorCircle.style.transform ” il cerchio div viene applicato con la trasformazione dello stile. “ cursorPoint.style.transform ” il punto div viene applicato con la trasformazione dello stile. “ traduci(${mouseX}px, ${mouseY}px) Il valore ” della proprietà transform imposta le coordinate orizzontali e verticali. “ window.addEventListener('mouse', moveCursor) Il metodo del listener di eventi ascolterà il movimento del mouse. Fa parte dell'oggetto finestra globale. Dopo aver fornito i blocchi di codice di cui sopra, il cursore si sposterà automaticamente sullo schermo come mostrato di seguito: Questo è figo! Abbiamo creato un cursore personalizzato con diverse proprietà CSS. Conclusione Il CSS” cursore La proprietà ” ha numerosi valori che indicano vari stili di cursore. Tuttavia, utilizzando gli elementi HTML e le proprietà CSS, possiamo creare cursori personalizzati. Quindi, il codice JavaScript viene implementato per attivare la sua funzionalità. Questo studio ha dimostrato come creare cursori CSS personalizzati con un esempio pratico. Altro Categoria Lampone Pi Ethernet Altro Nano Ingrandisci Cannella Recensioni Zorinos Radio Minecraft Ssh Openvas Compressione Laravel Crepa D'aria Software Per La Produttività In Ufficio Avvio Chiamate Di Sistema Sistema Rete Gpu Gimp Plexi Uefi Docker Firewall Wireshark Sinologia Pdf Ethereum Sistema Operativo Pappagallo Sublime Selinux Iper-V Telefono Codice Gnomo Delicatezza Topo Nmap Metasfruttamento Torrent Tavoletta Pycharm Arricciare Dove Gcc Caratteri Ssl Nvidia Immagini Usb Calamaro Compagno Lettore Multimediale Vlc Dns Bitcoin Tastiera Del Computer Inkscape Crittografia Fedora Owncloud Scanner Atomo Cappello Rosso Teamviewer Skype Vpn Xfce Taccuino Jupyter Nfs Blog Lvm Suse Lettori Multimediali Posix Vapore Jenkins Potenza Oracle Linux Netstat Mq Bluetooth Ssd Presa Gentoo Odissea Audio Processore Flusso Tensoriale Autodesk Lubuntu Llvm Finestre Microsoft Edge (Legacy) Internet Explorer Ufficio Altro Lampone Pi webcam lettori multimediali cPanel haproxy gnomo stivale Tutorial Ubuntu 24.04 nextcloud virtù passthrough USB cappello di feltro #avvio sicuro pass-through del dispositivo SDN installazione del driver Messaggi Popolari Come disegnare un segno di spunta/segno di spunta usando i CSS Altro SQL Server Crea utente Altro Come clonare il repository pubblico GitHub in Git? Altro Risolto: utilizzo elevato della CPU di Windows 10 dopo l'aggiornamento Altro Quale laptop HP ha Bang & Olufsen Altro Come installare e configurare Git su Debian 11 Altro Perché Roblox non funziona sul mio iPad? Altro Come effettuare una chiamata privata in Discord Server? Altro Quali sono i migliori controllori di plagio AI per rilevare i contenuti di ChatGPT? Altro Come preparare Windows 10/11 per l'installazione di VirtualBox, VMware Workstation Pro o VMware Workstation Player Altro Errore 'Cout è ambiguo' in C++ Altro Come trovare ID utente/server/messaggio – Discord Altro Come eseguire i comandi di Linux in background Altro Come abilitare 2FA con l'app Authenticator - Roblox Altro Come aggiornare l'agente di Windows Update all'ultima versione Altro Aggiunta di un'immagine all'interno della cella della tabella in HTML Altro Come eseguire l'incremento automatico di PostgreSQL Altro Presentazione dei comandi PowerShell Unzip e Zip sugli archivi Altro Come visualizzare l'elenco bloccato su Discord Mobile? Altro Correggi l'errore Explorer.exe 'Questo file non ha un programma associato' in Windows 7 o 8 - Winhelponline Finestre

. Altri tag

per popolare le colonne con i dati.

Il secondo tag

rappresenta gli elementi del pulsante che vengono applicati con un CSS ' cursore ” proprietà con valori diversi.

Di seguito è riportato il codice HTML per lo scenario precedente:

< tavolo >
< tr >
< th stile = 'larghezza: 200px;' > selettore cursore css th >
< th stile = 'larghezza: 200px;' > stile del cursore th >
tr >
< tr >
< td > cursore: puntatore td >
< td >< pulsante stile = 'cursore: puntatore;' > puntatore pulsante > td >
tr >
< tr >
< td > cursore: avanzamento td >
< td >< pulsante stile = 'cursore: avanzamento;' > progresso pulsante > td >
tr >
< tr >
< td > cursore: non consentito td >
< td >< pulsante stile = 'cursore: non consentito;' > non autorizzato pulsante > td >
tr >
< tr >
< td > cursore: nessuno td >
< td >< pulsante stile = 'cursore: nessuno;' > nessuno pulsante > td >
tr >
< tr >
< td > cursore: sposta td >
< td >< pulsante stile = 'cursore: sposta;' > spostare pulsante > td >
tr >
< tr >
< td > cursore: prendi td >
< td >< pulsante stile = 'cursore: prendi;' > preda pulsante > td >
tr >
< tr >
< td > cursore: copia td >
< td >< pulsante stile = 'cursore: copia;' > copia pulsante > td >
tr >
< tr >
< td > cursore: col-ridimensiona td >
< td >< pulsante stile = 'cursore: col-ridimensiona;' > col-resize pulsante > td >
tr >
< tr >
< td > cursore: ridimensionamento riga td >
< td >< pulsante stile = 'cursore: ridimensionamento riga;' > ridimensionamento della riga pulsante > td >
tr >
< tr >
< td > cursore: testo td >
< td >< pulsante stile = 'cursore: testo;' > testo pulsante > td >
tr >
tavolo >

Il codice precedente genererà il seguente risultato:

Nella prossima sezione, applicheremo diversi stili agli elementi HTML.

Stile 'tutti' gli elementi

* {
imbottitura: 0 ;
margine: 0 ;
famiglia di caratteri: Arial, Helvetica, sans-serif;
}

Tutti gli elementi HTML vengono applicati con gli stili CSS spiegati di seguito:

- “ imbottitura ” proprietà con “ 0 Il valore ” non include spazi intorno al contenuto dell'elemento.
- “ margine ” proprietà con “ 0 ” Il valore non aggiunge spazio all'esterno di ciascuno degli elementi.
- “ famiglia di font ” alla proprietà viene assegnato un valore “ Arial, Helvetica, sans serif ”. L'elenco degli stili di carattere viene fornito per garantire che se il primo stile non è supportato dal browser, devono essere applicati altri stili.

Elemento “tavolo” in stile

tavolo {
margine: 0px automatico;
bordo: 1px solido gainsboro;
}

L'elemento tabella HTML viene applicato con le proprietà CSS descritte di seguito:

- “ frontiera ” la proprietà è impostata con il valore “ 1px guadagni solidiboro ” che rappresenta rispettivamente la larghezza del bordo, lo stile del bordo e il colore del bordo.

“ margine La proprietà ” si comporta come sopra specificato.

Elemento stile 'td'.

td {
text-align: centro;
}

L'elemento

viene applicato con la proprietà ' allineamento del testo ” con il valore “ centro ”. Allineerà il testo della colonna al centro.

Elemento 'pulsante' di stile

pulsante {
colore di sfondo: blu cadetto;
imbottitura: 10px 10px;
colore: #ffffff;
larghezza: 150px;
}

L'elemento button utilizzato nel codice HTML di cui sopra ha uno stile con le nuove proprietà CSS spiegate di seguito:

- “ colore di sfondo ” specifica il colore dello sfondo dell'elemento.
- “ imbottitura ” con i valori assegnati come “ 10px 10px ” aggiunge uno spazio di 10 px in alto-in basso e 10 px ai lati sinistro-destro degli elementi dell'elemento.
- “ colore ” regola il colore del carattere dell'elemento.
- “ larghezza ” è la proprietà che regola la larghezza dell'elemento.

Il codice precedente genererà il seguente risultato:

Finora abbiamo discusso i cursori forniti dai CSS. Nella prossima sezione, l'esempio descriverà come creare un cursore personalizzato con i CSS.

Cursore personalizzato CSS

Gli sviluppatori devono utilizzare cursori adeguati per le loro applicazioni. I cursori dovrebbero essere resi attraenti per attirare l'attenzione degli utenti. Inoltre, il cursore personalizzato può essere creato per questo scopo.

Guarda l'esempio qui sotto!

Esempio: come creare un cursore personalizzato con i CSS?

In HTML, aggiungi due elementi div. Uno con la classe” cerchio ” e l'altro con la classe “ punto ”.

HTML

< div classe = 'cerchio' > div >
< div classe = 'punto' > div >

Andiamo avanti verso la sezione CSS.

Elemento 'corpo' di stile

corpo {
altezza: 100 vh;
}

L'elemento body del file HTML viene applicato con lo stile ' altezza ” proprietà per impostare l'altezza dell'elemento.

Stile “cerchio” div

.cerchio {
larghezza: 20px;
altezza: 20px;
bordo: 2px bianco pieno;
raggio del bordo: cinquanta % ;
}

Di seguito è riportata la spiegazione delle proprietà CSS che vengono applicate all'elemento div con classe ' cerchio ”:

- “ larghezza La proprietà ” regola la larghezza dell'elemento.
- “ frontiera ” proprietà con il valore specificato come “ 2px bianco solido ” rappresenta la larghezza del bordo, lo stile del bordo e il colore.
- “ bordo-raggio La proprietà ” modifica il bordo dell'elemento in modo rotondo.

Stile 'punto' div

.punto {
larghezza: 5px;
altezza: 5px;
colore di sfondo: bianco;
raggio del bordo: cinquanta % ;
}

L'elemento div con class point è dotato di diverse proprietà descritte di seguito:

- “ colore di sfondo La proprietà ” specifica il colore dello sfondo dell'elemento.
- “ bordo-raggio ” arrotonda i bordi dell'elemento.
- Altre proprietà funzioneranno come discusso.

Il codice dato visualizzerà il seguente cursore sulla pagina web:

Abbiamo creato il cursore utilizzando HTML e CSS. Ora, nella sezione successiva, viene scritto il codice JavaScript per aggiungere la funzionalità richiesta al cursore.

javascript

< copione >
const cursorCircle = document.querySelector ( '.cerchio' ) ;
const cursorPoint = document.querySelector ( '.punto' ) ;
const moveCursor = ( e ) = > {
const mouseY = e.clientY;
const mouseX = e.clientX;

cursorCircle.style.transform = ` tradurre ( ${mouseX} px, ${mouseY} px ) ` ;
cursorPoint.style.transform = ` tradurre ( ${mouseX} px, ${mouseY} px ) ` ;
}
window.addEventListener ( 'mossa del mouse' , moveCursor )
copione >

La descrizione del suddetto codice JavaScript è riportata di seguito:

- “ Il tag ” è abbinato al tag , utilizzato per scrivere codice JavaScript.
- “ cost La parola chiave ” indica che la parola chiave const seguita da una variabile non può essere riassegnata.
- “ document.querySelector('.cerchio') ” restituisce l'elemento circle div che corrisponde al selettore specificato nel documento.
- “ document.querySelector('.point') ” restituisce l'elemento point div che corrisponde al selettore specificato nel documento.
- “ const moveCursor = (e) => ” questa funzione specifica la funzione del cursore.
- “ e.clientY ” restituisce la coordinata verticale quando è stato attivato l'evento del mouse.
- “ e.clientX ” restituisce la coordinata orizzontale quando viene attivato l'evento del mouse.
- “ cursorCircle.style.transform ” il cerchio div viene applicato con la trasformazione dello stile.
- “ cursorPoint.style.transform ” il punto div viene applicato con la trasformazione dello stile.
- “ traduci(${mouseX}px, ${mouseY}px) Il valore ” della proprietà transform imposta le coordinate orizzontali e verticali.
- “ window.addEventListener('mouse', moveCursor) Il metodo del listener di eventi ascolterà il movimento del mouse. Fa parte dell'oggetto finestra globale.

Dopo aver fornito i blocchi di codice di cui sopra, il cursore si sposterà automaticamente sullo schermo come mostrato di seguito:

Questo è figo! Abbiamo creato un cursore personalizzato con diverse proprietà CSS.

Conclusione

Il CSS” cursore La proprietà ” ha numerosi valori che indicano vari stili di cursore. Tuttavia, utilizzando gli elementi HTML e le proprietà CSS, possiamo creare cursori personalizzati. Quindi, il codice JavaScript viene implementato per attivare la sua funzionalità. Questo studio ha dimostrato come creare cursori CSS personalizzati con un esempio pratico.

Cursore CSS personalizzato

Cursore CSS

Cursore personalizzato CSS

Conclusione

Categoria

Messaggi Popolari