Cursor CSS personalitzat

Cursor Css Personalitzat



El cursor indica la posició de la pantalla on l'usuari pot fer clic o introduir text. Hi pot haver diferents cursors utilitzats per a diferents components del lloc web. Un desenvolupador ha d'assegurar-se que els cursors utilitzats a l'aplicació han de ser atractius. Per exemple, es pot utilitzar un cursor de mà apuntant al botó al passar el ratolí. L'indicador de text (línia intermitent) s'utilitza al quadre de text on s'ha d'introduir el text.

Hi ha diversos estils de cursor en CSS que s'utilitzen només especificant el valor de la propietat del cursor. Tanmateix, un desenvolupador pot crear un cursor personalitzat mitjançant CSS.





Aquesta guia d'estudi proporcionarà sobre:



    • Cursor CSS
    • CSS de cursor personalitzat

Abans de topar amb el tema, vegem algunes de les formes del cursor CSS amb un exemple pràctic.



Cursor CSS

El CSS ' cursor ” La propietat té diferents valors, com ara un punter, cap, progrés i molt més. Creem una taula que contingui files en les quals es mostraran diferents cursors al passar el ratolí.



Exemple: Creació d'una taula que representi diferents cursors CSS en HTML

Primer, afegiu l'element

en HTML. Dins d'aquest element:



    • L'etiqueta
s'utilitzarà per fer files.
  • La primera fila conté els encapçalaments.
  • Aquests encapçalaments s'especifiquen utilitzant les etiquetes
    • contenen dues etiquetes
    . Altres etiquetes
    per omplir les columnes amb dades.
  • La segona etiqueta
    		• representa els elements del botó que s'apliquen amb un CSS ' cursor ” propietat amb diferents valors.

    El codi HTML de l'escenari anterior es mostra a continuació:

    < taula >
    < tr >
    < th estil = 'amplada: 200 píxels;' > selector de cursor css th >
    < th estil = 'amplada: 200 píxels;' > estil del cursor th >
    tr >
    < tr >
    < td > cursor: punter td >
    < td >< botó estil = 'cursor: punter;' > punter botó > td >
    tr >
    < tr >
    < td > cursor: progrés td >
    < td >< botó estil = 'cursor: progrés;' > progrés, progressar botó > td >
    tr >
    < tr >
    < td > cursor: no-permès td >
    < td >< botó estil = 'cursor: no-permès;' > no permès botó > td >
    tr >
    < tr >
    < td > cursor: cap td >
    < td >< botó estil = 'cursor: cap;' > cap botó > td >
    tr >
    < tr >
    < td > cursor: moure td >
    < td >< botó estil = 'cursor: moure's;' > moure's botó > td >
    tr >
    < tr >
    < td > cursor: agafar td >
    < td >< botó estil = 'cursor: agafar;' > agafar botó > td >
    tr >
    < tr >
    < td > cursor: copiar td >
    < td >< botó estil = 'cursor: copiar;' > còpia botó > td >
    tr >
    < tr >
    < td > cursor: col-redimensiona td >
    < td >< botó estil = 'cursor: col-resize;' > col-redimensiona botó > td >
    tr >
    < tr >
    < td > cursor: mida de fila td >
    < td >< botó estil = 'cursor: mida de fila;' > redimensionar la fila botó > td >
    tr >
    < tr >
    < td > cursor: text td >
    < td >< botó estil = 'cursor: text;' > text botó > td >
    tr >
    taula >


    El codi anterior generarà el resultat següent:


    A la següent secció, aplicarem diferents estils als elements HTML.

    Estil 'tots' els elements

    * {
    farciment: 0 ;
    marge: 0 ;
    família de tipus de lletra: Arial, Helvetica, sans-serif;
    }


    Tots els elements HTML s'apliquen amb estils CSS que s'expliquen a continuació:

      • “ farciment 'propietat amb ' 0 ” el valor no inclou espai al voltant del contingut de l'element.
      • “ marge 'propietat amb ' 0 ” el valor no afegeix espai fora de cadascun dels elements.
      • “ família de tipus de lletra ' a la propietat se li assigna un valor ' Arial, Helvetica, sans-serif ”. La llista d'estils de lletra es dóna per assegurar-se que si el primer estil no és compatible amb el navegador, s'han d'aplicar altres estils.

    Element d'estil “taula”.

    taula {
    margin: 0px auto;
    vora: 1px sòlid gainsboro;
    }


    L'element de la taula HTML s'aplica amb les propietats CSS que es descriuen a continuació:

      • “ frontera La propietat s'estableix amb el valor ' 1px sòlid gainsboro ” que representa l'amplada de la vora, l'estil de la vora i el color de la vora respectivament.

    “ marge ” la propietat es comporta com s'ha especificat anteriorment.

    Element d'estil 'td'.

    td {
    alineació de text: centre;
    }


    L'element

    		s'aplica amb la propietat “ alineació de text 'amb el valor' centre ”. Alinearà el text de la columna al centre.

    Element 'botó' d'estil

    botó {
    color de fons: blau cadet;
    farciment: 10px 10px;
    color: #ffffff;
    amplada: 150 píxels;
    }


    L'element botó utilitzat al codi HTML anterior té un estil amb noves propietats CSS que s'expliquen a continuació:

      • “ color de fons ” especifica el color del fons de l'element.
      • “ farciment ” amb els valors assignats com a “ 10px 10px ” afegeix un espai de 10 px a la part superior inferior i 10 px als costats esquerre-dret dels elements de l'element.
      • “ color ” ajusta el color de la lletra de l'element.
      • “ amplada ” és la propietat que ajusta l'amplada de l'element.

    El codi anterior generarà el resultat següent:


    Fins ara, hem parlat dels cursors que ofereix CSS. A la secció següent, l'exemple descriu com crear un cursor personalitzat amb CSS.

    CSS de cursor personalitzat

    Els desenvolupadors han d'utilitzar cursors adequats per a les seves aplicacions. Els cursors s'han de fer atractius per captar l'atenció dels usuaris. A més, el cursor personalitzat es pot crear amb aquest propòsit.

    Mireu l'exemple següent!

    Exemple: Com crear un cursor personalitzat amb CSS?

    En HTML, afegiu dos elements div. Un amb la classe ' cercle ' i l'altre amb la classe ' punt ”.

    HTML

    < div classe = 'cercle' > div >
    < div classe = 'punt' > div >


    Avancem cap a la secció CSS.

    Element d'estil 'cos'.

    cos {
    alçada: 100vh;
    }


    L'element del cos del fitxer HTML s'aplica amb l'estil ' alçada ” propietat per establir l'alçada de l'element.

    Estil 'cercle' div

    .cercle {
    amplada: 20 píxels;
    alçada: 20px;
    vora: 2px blanc sòlid;
    radi de la frontera: 50 % ;
    }


    A continuació es mostra l'explicació de les propietats CSS que s'apliquen a l'element div que té la classe ' cercle ”:

      • “ amplada ” La propietat ajusta l'amplada de l'element.
      • “ frontera ' propietat amb el valor especificat com ' 2px blanc sòlid ” representa l'amplada de la vora, l'estil de la vora i el color.
      • “ frontera-radi La propietat canvia la vora de l'element.

    Estil 'punt' div

    .punt {
    amplada: 5 píxels;
    alçada: 5px;
    color de fons: blanc;
    radi de la frontera: 50 % ;
    }


    L'element div amb punt de classe té diferents propietats que es descriuen a continuació:

      • “ color de fons ” La propietat especifica el color del fons de l'element.
      • “ frontera-radi ” arrodoni les vores de l'element.
      • Altres propietats funcionaran igual que s'ha comentat.

    El codi donat mostrarà el següent cursor a la pàgina web:


    Hem creat el cursor amb HTML i CSS. Ara, a la següent secció, s'escriu el codi JavaScript per afegir la funcionalitat necessària al cursor.

    JavaScript

    < guió >
    const cursorCircle = document.querySelector ( '.cercle' ) ;
    const cursorPoint = document.querySelector ( '.punt' ) ;
    const moveCursor = ( i ) = > {
    const mouseY = e.clientY;
    const mouseX = e.clientX;

    cursorCircle.style.transform = ` traduir ( ${mouseX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` traduir ( ${mouseX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'remoure el ratolí' , moveCursor )
    guió >


    La descripció del codi JavaScript anterior es dóna a continuació:

      • “ , que s'utilitza per escriure codi JavaScript.
      • “ const ” identifica que la paraula clau const seguida d'una variable no es pot reassignar.
      • “ document.querySelector(‘.circle’) ” torna l'element div del cercle que coincideix amb el selector especificat al document.
      • “ document.querySelector('.point') ” torna l'element div del punt que coincideix amb el selector especificat al document.
      • “ const moveCursor = (e) => ” aquesta funció especifica la funció del cursor.
      • “ e.client ” torna la coordenada vertical quan es va activar l'esdeveniment del ratolí.
      • “ e.clientX ” torna la coordenada horitzontal quan s'activa l'esdeveniment del ratolí.
      • “ cursorCircle.style.transform ” el cercle div s'aplica amb la transformació d'estil.
      • “ cursorPoint.style.transform ” el punt div s'aplica amb la transformació d'estil.
      • “ traduir(${mouseX}px, ${mouseY}px) ” El valor de la propietat de transformació estableix les coordenades horitzontals i verticals.
      • “ window.addEventListener('ratolí', moveCursor) ” El mètode d'escolta d'esdeveniments escoltarà el moviment del ratolí. Forma part de l'objecte finestra global.

    Després de proporcionar els blocs de codi anteriors, el cursor es mourà automàticament a la pantalla tal com es mostra a continuació:


    Això és genial! Hem creat un cursor personalitzat amb diferents propietats CSS.

    Conclusió

    El CSS ' cursor La propietat té nombrosos valors que indiquen diversos estils de cursor. Tanmateix, utilitzant els elements HTML i les propietats CSS, podem crear cursors personalitzats. A continuació, s'implementa el codi JavaScript per activar la seva funcionalitat. Aquest estudi ha demostrat com crear cursors CSS personalitzats amb un exemple pràctic.

    Altres

    Categoria

    Entrades Populars

    Coincidència de contrasenyes mitjançant JavaScript

    Com treballar amb la branca privada dels dipòsits públics?

    Punter de funció membre de C++

    Com utilitzar Windows Sandbox?

    Com implementar un bucle _ForEach_ a Python

    Com utilitzar l'ordre history a Linux

    Com instal·lar Jami a Linux Mint 21

    Com utilitzar imatges sprites en CSS?

    Com utilitzar les notes adhesives de Windows?

    Operador $Max de MongoDB

    Invertir una llista enllaçada (C++)

    Com crear un descodificador de visualització BCD a 7 segments

    Creació de Word Art en MS Word

    Com crear un bucle while per repetir quan la condició és certa a MATLAB

    Com integrar YouTube amb Discord

    JavaScript Date() Constructor

    Feines paral·leles Bash utilitzant el bucle For

    El micròfon funciona a Discord, però no al xat del joc [Corregit]

    Millors jocs de Nintendo 64: RetroPie

    Quina és la propietat del nom de la finestra