Cursor CSS personalizat

Cursor Css Personalizat



Cursorul indică poziția de pe ecran în care utilizatorul poate face clic sau introduce text. Pot fi diferite cursore utilizate pentru diferite componente ale site-ului web. Un dezvoltator trebuie să se asigure că cursoarele folosite în aplicație trebuie să fie atractive. De exemplu, un cursor cu mâna îndreptată poate fi folosit pe butonul de la trecerea mouse-ului. Indicatorul text (linie intermitentă) este utilizat în caseta de text în care urmează să fie introdus textul.

Există mai multe stiluri de cursor în CSS utilizate doar prin specificarea valorii proprietății cursorului. Cu toate acestea, un dezvoltator poate crea un cursor personalizat folosind CSS.





Acest ghid de studiu va oferi despre:



    • cursor CSS
    • Cursor personalizat CSS

Înainte de a intra în subiect, să vedem câteva dintre formele cursorului CSS cu un exemplu practic.



cursor CSS

CSS „ cursor ” proprietatea are valori diferite, cum ar fi un pointer, niciunul, progres și multe altele. Să creăm un tabel care conține rânduri pe care vor fi afișate diferite cursoare la trecerea mouse-ului.



Exemplu: Crearea unui tabel reprezentând diferiți cursori CSS în HTML

Mai întâi, adăugați elementul

în HTML. În interiorul acestui element:



    • Eticheta
va fi utilizată pentru a crea rânduri.
  • Primul rând conține titlurile.
  • Aceste titluri sunt specificate prin utilizarea etichetelor
    • conțin două etichete
    . Alte etichete
    pentru a popula coloanele cu date.
  • A doua etichetă
    		• reprezintă elementele butonului care sunt aplicate cu un CSS „ cursor ” proprietate cu valori diferite.

    Codul HTML pentru scenariul de mai sus este prezentat mai jos:

    < masa >
    < tr >
    < th stil = 'lățime: 200px;' > selectorul cursorului css th >
    < th stil = 'lățime: 200px;' > stilul cursorului th >
    tr >
    < tr >
    < td > cursor: pointer td >
    < td >< buton stil = 'cursor: pointer;' > indicator buton > td >
    tr >
    < tr >
    < td > cursor: progres td >
    < td >< buton stil = 'cursor: progres;' > progres buton > td >
    tr >
    < tr >
    < td > cursor: nepermis td >
    < td >< buton stil = 'cursor: nepermis;' > nepermis buton > td >
    tr >
    < tr >
    < td > cursor: niciunul td >
    < td >< buton stil = 'cursor: niciunul;' > nici unul buton > td >
    tr >
    < tr >
    < td > cursor: mutare td >
    < td >< buton stil = 'cursor: mutare;' > mutare buton > td >
    tr >
    < tr >
    < td > cursor: apuca td >
    < td >< buton stil = 'cursor: apuca;' > apuca buton > td >
    tr >
    < tr >
    < td > cursor: copiere td >
    < td >< buton stil = 'cursor: copiere;' > copie buton > td >
    tr >
    < tr >
    < td > cursor: col-redimensionare td >
    < td >< buton stil = 'cursor: col-resize;' > col-redimensionare buton > td >
    tr >
    < tr >
    < td > cursor: redimensionare rând td >
    < td >< buton stil = 'cursor: row-resize;' > redimensionare rând buton > td >
    tr >
    < tr >
    < td > cursor: text td >
    < td >< buton stil = 'cursor: text;' > text buton > td >
    tr >
    masa >


    Codul de mai sus va genera următorul rezultat:


    În secțiunea următoare, vom aplica diferite stiluri elementelor HTML.

    Stilează „toate” elementele

    * {
    umplutura: 0 ;
    marja: 0 ;
    familie de fonturi: Arial, Helvetica, sans-serif;
    }


    Toate elementele HTML sunt aplicate cu stiluri CSS care sunt explicate mai jos:

      • „ umplutura ” proprietate cu ” 0 ” valoarea nu include spațiu în jurul conținutului elementului.
      • „ marginea ” proprietate cu ” 0 ” valoarea nu adaugă spațiu în afara fiecăruia dintre elemente.
      • „ familie de fonturi ” proprietății i se atribuie o valoare ” Arial, Helvetica, sans-serif ”. Lista stilurilor de fonturi este dată pentru a se asigura că, dacă primul stil nu este acceptat de browser, trebuie aplicate alte stiluri.

    Element de stil „masă”.

    masa {
    marjă: 0px automat;
    chenar: 1px solid gainsboro;
    }


    Elementul tabel HTML este aplicat cu proprietățile CSS descrise mai jos:

      • „ frontieră „proprietatea este setată cu valoarea „ 1px solid gainsboro ” care reprezintă lățimea chenarului, stilul chenarului și, respectiv, culoarea chenarului.

    „ marginea ” proprietatea se comportă așa cum este specificat mai sus.

    Element de stil „td”.

    td {
    text-align: centru;
    }


    Elementul

    		este aplicat cu proprietatea „ aliniere text „cu valoarea „ centru ”. Acesta va alinia textul coloanei în centru.

    Element „buton” de stil

    buton {
    culoare de fundal: cadetblue;
    umplutură: 10px 10px;
    culoare: #ffffff;
    latime: 150px;
    }


    Elementul buton folosit în codul HTML de mai sus este stilat cu proprietăți CSS noi, care sunt explicate mai jos:

      • „ culoare de fundal ” specifică culoarea fundalului elementului.
      • „ umplutura ” cu valorile atribuite ca “ 10px 10px ” adaugă spațiu de 10px în partea de sus-jos și de 10px în partea stângă-dreapta a elementelor elementului.
      • „ culoare ” ajustează culoarea fontului elementului.
      • „ lăţime ” este proprietatea care ajustează lățimea elementului.

    Codul de mai sus va genera următorul rezultat:


    Până acum, am discutat despre cursoarele furnizate de CSS. În secțiunea următoare, exemplul va descrie cum să creați un cursor personalizat cu CSS.

    Cursor personalizat CSS

    Dezvoltatorii trebuie să folosească cursoare adecvate pentru aplicațiile lor. Cursoarele trebuie făcute atractive pentru a atrage atenția utilizatorilor. Mai mult, cursorul personalizat poate fi creat în acest scop.

    Uită-te la exemplul de mai jos!

    Exemplu: Cum se creează un cursor personalizat cu CSS?

    În HTML, adăugați două elemente div. Una cu clasa ' cerc ” iar celălalt cu clasa ” punct ”.

    HTML

    < div clasă = 'cerc' > div >
    < div clasă = 'punct' > div >


    Să mergem mai departe către secțiunea CSS.

    Element de stil „corp”.

    corp {
    inaltime: 100vh;
    }


    Elementul body al fișierului HTML este aplicat cu stilul „ înălţime ” proprietate pentru setarea înălțimii elementului.

    Stil „cerc” div

    .cerc {
    latime: 20px;
    înălțime: 20px;
    chenar: 2px alb solid;
    raza de frontieră: cincizeci % ;
    }


    Mai jos este explicația proprietăților CSS care sunt aplicate elementului div având clasa „ cerc ”:

      • „ lăţime ”proprietatea ajustează lățimea elementului.
      • „ frontieră ” proprietate cu valoarea specificată ca “ 2px alb solid ” reprezintă lățimea chenarului, stilul chenarului și culoarea.
      • „ hotar-raza ”proprietatea schimbă rotunda chenarului elementului.

    Stil „punct” div

    .punct {
    latime: 5px;
    înălțime: 5px;
    culoare de fundal: alb;
    raza de frontieră: cincizeci % ;
    }


    Elementul div cu punct de clasă este prevăzut cu diferite proprietăți care sunt descrise mai jos:

      • „ culoare de fundal ”proprietatea specifică culoarea fundalului elementului.
      • „ hotar-raza ” rotunjește marginile elementului.
      • Alte proprietăți vor funcționa la fel ca cele discutate.

    Codul dat va afișa următorul cursor pe pagina web:


    Am creat cursorul folosind HTML și CSS. Acum, în secțiunea următoare, codul JavaScript este scris pentru a adăuga funcționalitatea necesară la cursor.

    JavaScript

    < scenariu >
    const cursorCircle = document.querySelector ( '.cerc' ) ;
    const cursorPoint = document.querySelector ( '.punct' ) ;
    const moveCursor = ( și ) = > {
    const mouseY = e.clientY;
    const mouseX = e.clientX;

    cursorCircle.style.transform = ` Traduceți ( ${mouseX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` Traduceți ( ${mouseX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'mousemouse' , moveCursor )
    scenariu >


    Descrierea codului JavaScript de mai sus este dată mai jos:

      • „ , care este folosită pentru a scrie codul JavaScript.
      • „ const ” cuvântul cheie identifică faptul că cuvântul cheie const urmat de o variabilă nu poate fi reatribuit.
      • „ document.querySelector(‘.cercle’) ” returnează elementul div cerc care se potrivește cu selectorul specificat în document.
      • „ document.querySelector(‘.point’) ” returnează elementul div punct care se potrivește cu selectorul specificat în document.
      • „ const moveCursor = (e) => ” această funcție specifică funcția cursorului.
      • „ e.clientY ” returnează coordonatele verticale atunci când evenimentul mouse-ului a fost declanșat.
      • „ e.clientX ” returnează coordonatele orizontale atunci când evenimentul mouse-ului este declanșat.
      • „ cursorCircle.style.transform ” cercul div este aplicat cu transformarea stilului.
      • „ cursorPoint.style.transform ” div-ul punctului este aplicat cu transformarea stilului.
      • „ traduce(${mouseX}px, ${mouseY}px) ” valoarea proprietății transform setează coordonatele orizontale și verticale.
      • „ window.addEventListener(‘mouse’, moveCursor) ” metoda de ascultare a evenimentelor va asculta mișcarea mouse-ului. Face parte din obiectul fereastră globală.

    După furnizarea blocurilor de cod de mai sus, cursorul se va muta automat pe ecran, după cum se arată mai jos:


    Asta e tare! Am creat un cursor personalizat cu diferite proprietăți CSS.

    Concluzie

    CSS „ cursor ” proprietatea are numeroase valori care indică diferite stiluri de cursor. Cu toate acestea, utilizând elementele HTML și proprietățile CSS, putem realiza cursoare personalizate. Apoi, codul JavaScript este implementat pentru a-și activa funcționalitatea. Acest studiu a demonstrat cum să creați cursoare CSS personalizate cu un exemplu practic.

    Alte

    Categorie

    Posturi Populare

    Cum să rotiți o imagine după un unghi specific în PyTorch?

    Plotly.io.to_html

    Configurați criptarea datelor în repaus în PostgreSQL

    JavaScript Obține elementul după nume – HTML

    Cum să configurați difuzorul prioritar în Discord

    Cum să faci poțiune de arme DaBaby în Roblox Wacky Wizards

    Cum se instalează Telegram pe sistemul de operare Raspberry Pi

    Cum să verificați Istoricul locațiilor Google

    Ce este modulul Start-Job din Microsoft.PowerShell.Core?

    Atribuții de variabile JavaScript de la tupli

    Cum să implementezi un site web static folosind AWS Amplify?

    Cum să utilizați modulul LED RGB HW-478 și KY-009 cu Arduino Nano

    Capitolul 2: Algebra booleană și componentele computerului aferente acesteia

    (Rezolvat) Porturile USB nu funcționează în Windows 10

    Cum se utilizează List Parser în LangChain?

    JavaScript | Înlănțuire opțională

    Cum să raportezi o imagine în Midjourney?

    Cum se schimbă culoarea textului în JavaScript

    Care este diferența dintre potrivire și boolean în Elasticsearch?

    Cum să imprimați alb-negru pe MacBook?