Custom na CSS Cursor

Custom Na Css Cursor



Ipinapahiwatig ng cursor ang posisyon sa screen kung saan maaaring mag-click o magpasok ng text ang user. Maaaring may iba't ibang cursor na ginagamit para sa iba't ibang bahagi ng website. Dapat tiyakin ng isang developer na ang mga cursor na ginamit sa application ay dapat na kaakit-akit. Halimbawa, maaaring gumamit ng pointing hand cursor sa button sa mouse hover. Ang text (blinking line) indicator ay ginagamit sa text box kung saan ilalagay ang text.

Mayroong ilang mga estilo ng cursor sa CSS na ginagamit sa pamamagitan lamang ng pagtukoy sa halaga ng property ng cursor. Gayunpaman, ang isang developer ay maaaring lumikha ng isang naka-customize na cursor gamit ang CSS.





Ang gabay sa pag-aaral na ito ay magbibigay sa:



    • CSS cursor
    • Custom na cursor CSS

Bago bumagsak sa paksa, tingnan natin ang ilan sa mga hugis ng CSS cursor na may praktikal na halimbawa.



CSS cursor

Ang CSS ' cursor ” may iba't ibang value ang property, gaya ng pointer, wala, pag-unlad, at higit pa. Gumawa tayo ng table na naglalaman ng mga row kung saan ipapakita ang iba't ibang cursor sa mouse hover.



Halimbawa: Paggawa ng Table na Kumakatawan sa Iba't ibang CSS cursor sa HTML

Una, idagdag ang

na elemento sa HTML. Sa loob ng elementong ito:



    • Gagamitin ang tag na
para gumawa ng mga row.
  • Ang unang hilera ay naglalaman ng mga heading.
  • Ang mga heading na ito ay tinukoy sa pamamagitan ng paggamit ng
    • tag ay naglalaman ng dalawang
    tags. Ang iba pang mga
    na mga tag upang punan ang mga column ng data.
  • Ang pangalawang tag na
    		• ay kumakatawan sa mga elemento ng button na inilapat sa isang CSS ' cursor ” ari-arian na may iba't ibang halaga.

    Ang HTML code para sa senaryo sa itaas ay ibinigay sa ibaba:

    < mesa >
    < tr >
    < ika istilo = 'lapad: 200px;' > css cursor selector ika >
    < ika istilo = 'lapad: 200px;' > estilo ng cursor ika >
    tr >
    < tr >
    < td > cursor: pointer td >
    < td >< pindutan istilo = 'cursor: pointer;' > panturo pindutan > td >
    tr >
    < tr >
    < td > cursor: pag-unlad td >
    < td >< pindutan istilo = 'cursor: pag-unlad;' > pag-unlad pindutan > td >
    tr >
    < tr >
    < td > cursor: hindi pinapayagan td >
    < td >< pindutan istilo = 'cursor: hindi pinapayagan;' > hindi pwede pindutan > td >
    tr >
    < tr >
    < td > cursor: wala td >
    < td >< pindutan istilo = 'cursor: wala;' > wala pindutan > td >
    tr >
    < tr >
    < td > cursor: ilipat td >
    < td >< pindutan istilo = 'cursor: ilipat;' > gumalaw pindutan > td >
    tr >
    < tr >
    < td > cursor: grab td >
    < td >< pindutan istilo = 'cursor: grab;' > sunggaban pindutan > td >
    tr >
    < tr >
    < td > cursor: kopyahin td >
    < td >< pindutan istilo = 'cursor: kopyahin;' > kopya pindutan > td >
    tr >
    < tr >
    < td > cursor: col-resize td >
    < td >< pindutan istilo = 'cursor: col-resize;' > col-resize pindutan > td >
    tr >
    < tr >
    < td > cursor: row-resize td >
    < td >< pindutan istilo = 'cursor: row-resize;' > row-resize pindutan > td >
    tr >
    < tr >
    < td > cursor: teksto td >
    < td >< pindutan istilo = 'cursor: text;' > text pindutan > td >
    tr >
    mesa >


    Ang code sa itaas ay bubuo ng sumusunod na resulta:


    Sa susunod na seksyon, ilalapat namin ang iba't ibang mga estilo sa mga elemento ng HTML.

    Istilo ang 'lahat' na Elemento

    * {
    padding: 0 ;
    margin: 0 ;
    font-family: Arial, Helvetica, sans-serif;
    }


    Ang lahat ng mga elemento ng HTML ay inilapat sa mga estilo ng CSS na ipinaliwanag sa ibaba:

      • “ padding ' ari-arian na may ' 0 Ang halaga ng ” ay walang kasamang espasyo sa paligid ng nilalaman ng elemento.
      • “ margin ' ari-arian na may ' 0 Ang halaga ng ” ay hindi nagdaragdag ng puwang sa labas ng bawat isa sa mga elemento.
      • “ font-family 'Ang ari-arian ay itinalaga ng isang halaga ' Arial, Helvetica, sans-serif ”. Ang listahan ng mga estilo ng font ay ibinibigay upang matiyak kung ang unang istilo ay hindi suportado ng browser, ang iba pang mga estilo ay dapat ilapat.

    Estilo ng Elemento ng 'talahanayan'.

    mesa {
    margin: 0px auto;
    hangganan: 1px solid gainsboro;
    }


    Inilapat ang elemento ng HTML na talahanayan kasama ang mga katangian ng CSS na inilalarawan sa ibaba:

      • “ hangganan 'Ang ari-arian ay itinakda na may halagang ' 1px solid gainsboro ” na kumakatawan sa lapad ng hangganan, istilo ng hangganan, at kulay ng hangganan ayon sa pagkakabanggit.

    “ margin ” kumikilos ang ari-arian gaya ng tinukoy sa itaas.

    Istilo ng 'td' Element

    td {
    text-align: center;
    }


    Ang elementong

    		ay inilapat sa property na “ text-align 'na may halaga' gitna ”. I-align nito ang text ng column sa gitna.

    Elemento ng 'button' ng istilo

    pindutan {
    kulay ng background: cadetblue;
    padding: 10px 10px;
    kulay: #ffffff;
    lapad: 150px;
    }


    Ang elemento ng button na ginamit sa HTML code sa itaas ay naka-istilo ng mga bagong katangian ng CSS na ipinaliwanag sa ibaba:

      • “ kulay ng background ” ay tumutukoy sa kulay sa background ng elemento.
      • “ padding ” na may mga halagang itinalaga bilang “ 10px 10px ” ay nagdaragdag ng espasyo na 10px sa itaas na ibaba at 10px sa kaliwa-kanang bahagi ng mga item ng elemento.
      • “ kulay ” inaayos ang kulay ng font ng elemento.
      • “ lapad ” ay ang property na nag-aayos sa lapad ng elemento.

    Ang code sa itaas ay bubuo ng sumusunod na resulta:


    Sa ngayon, napag-usapan na natin ang mga cursor na ibinibigay ng CSS. Sa paparating na seksyon, ilalarawan ng halimbawa kung paano gumawa ng custom na cursor gamit ang CSS.

    Custom na cursor CSS

    Ang mga developer ay dapat gumamit ng angkop na mga cursor para sa kanilang mga aplikasyon. Dapat gawing kaakit-akit ang mga cursor upang makuha ang atensyon ng mga gumagamit. Bukod dito, ang custom na cursor ay maaaring malikha para sa layuning ito.

    Tingnan ang halimbawa sa ibaba!

    Halimbawa: Paano Gumawa ng Custom Cursor gamit ang CSS?

    Sa HTML, magdagdag ng dalawang elemento ng div. Isa sa klase' bilog 'at ang isa kasama ng klase' punto ”.

    HTML

    < div klase = 'bilog' > div >
    < div klase = 'punto' > div >


    Sumulong tayo sa seksyon ng CSS.

    Estilo 'katawan' Element

    katawan {
    taas: 100vh;
    }


    Ang elemento ng katawan ng HTML file ay inilapat sa istilong “ taas ” property para sa pagtatakda ng taas ng elemento.

    Estilo 'bilog' div

    .bilog {
    lapad: 20px;
    taas: 20px;
    hangganan: 2px solid white;
    hangganan-radius: limampu % ;
    }


    Nasa ibaba ang paliwanag ng mga katangian ng CSS na inilalapat sa elemento ng div na mayroong klase ' bilog ”:

      • “ lapad ' inaayos ng property ang lapad ng elemento.
      • “ hangganan ” property na may value na tinukoy bilang “ 2px solid na puti ” ay kumakatawan sa lapad ng hangganan, istilo ng hangganan, at kulay.
      • “ hangganan-radius ' binabago ng property ang pag-ikot ng hangganan ng elemento.

    Estilo 'punto' div

    .punto {
    lapad: 5px;
    taas: 5px;
    kulay ng background: puti;
    hangganan-radius: limampu % ;
    }


    Ang div element na may class point ay binibigyan ng iba't ibang katangian na inilalarawan sa ibaba:

      • “ kulay ng background ” property ay tumutukoy sa kulay ng background ng elemento.
      • “ hangganan-radius ” itinatakda ang mga gilid ng elemento na bilog.
      • Ang iba pang mga pag-aari ay gagana tulad ng tinalakay.

    Ipapakita ng ibinigay na code ang sumusunod na cursor sa web page:


    Nilikha namin ang cursor gamit ang HTML at CSS. Ngayon, sa susunod na seksyon, isinulat ang JavaScript code upang idagdag ang kinakailangang pag-andar sa cursor.

    JavaScript

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

    cursorCircle.style.transform = ` Isalin ( ${mouseX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` Isalin ( ${mouseX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'mousemove' , ilipatCursor )
    iskrip >


    Ang paglalarawan ng JavaScript code sa itaas ay ibinigay sa ibaba:

      • “ , na ginagamit sa pagsulat ng JavaScript code.
      • “ const ” Kinikilala ng keyword na ang const keyword na sinusundan ng isang variable ay hindi maaaring italaga muli.
      • “ document.querySelector(‘.circle’) ” ibinabalik ang elemento ng div ng bilog na tumutugma sa tinukoy na tagapili sa dokumento.
      • “ document.querySelector(‘.point’) ” ibinabalik ang point div element na tumutugma sa tinukoy na selector sa dokumento.
      • “ const moveCursor = (e) => ” ang function na ito ay tumutukoy sa cursor function.
      • “ e.kliyenteY ” ibinabalik ang patayong coordinate kapag na-trigger ang kaganapan ng mouse.
      • “ e.clientX ” ibinabalik ang pahalang na coordinate kapag na-trigger ang kaganapan ng mouse.
      • “ cursorCircle.style.transform ” ang div ng bilog ay inilapat sa pagbabago ng istilo.
      • “ cursorPoint.style.transform ” ang point div ay inilapat sa pagbabago ng istilo.
      • “ isalin(${mouseX}px, ${mouseY}px) Itinatakda ng ” value ng transform property ang pahalang at patayong mga coordinate.
      • “ window.addEventListener('mouse', moveCursor) ” Ang paraan ng tagapakinig ng kaganapan ay makikinig sa paggalaw ng mouse. Ito ay bahagi ng global window object.

    Pagkatapos ibigay ang mga bloke ng code sa itaas, awtomatikong lilipat ang cursor sa screen tulad ng ipinapakita sa ibaba:


    Astig niyan! Gumawa kami ng custom na cursor na may iba't ibang katangian ng CSS.

    Konklusyon

    Ang CSS ' cursor ” Ang property ay may maraming value na nagsasaad ng iba't ibang istilo ng cursor. Gayunpaman, sa pamamagitan ng paggamit ng mga elemento ng HTML at CSS properties, makakagawa kami ng mga customized na cursor. Pagkatapos, ipinatupad ang JavaScript code upang i-activate ang functionality nito. Ang pag-aaral na ito ay nagpakita kung paano lumikha ng mga custom na CSS cursor na may praktikal na halimbawa.

    Iba pa

    Kategorya

    Patok Na Mga Post

    Ano ang Roblox Security Notifications?

    Kunin ang Filter at Subaybayan ang Kubernetes Events

    Paano Kumuha ng Kasalukuyang Timestamp sa Java

    Atlas Download Logs

    ibalik ang DECR

    6 Pinakamahusay na Rocket League Discord Server na Sasalihan sa 2022

    Paano Mag-drop ng Pin sa iPhone? Isang Pangunahing Gabay

    Batch File Copy: Isang Gabay sa Pagkopya ng mga File Gamit ang Batch Scripts

    SQL Lag

    Paano Mag-install ng KDE sa Ubuntu 24.04

    Paano Mag-install ng Anaconda sa Linux

    Paano Gamitin ang PyGPT4All sa Python

    Paano Gamitin ang /kill Command sa Minecraft?

    Bakit ginagamit ang Capacitor sa isang Defibrillator

    Paano I-install ang LLVM Clang C, C++, at Objective-C Compiler sa Debian 12

    Paano Sumulat ng Mga File Gamit ang fs.writeFile() sa Node.js?

    Paano Pangasiwaan ang Contenteditable Change Events sa JavaScript

    Ano ang AWS Control Tower at Paano Ito Gamitin?

    Paano Ilapat ang Hover sa Box Decoration Break sa Tailwind?

    I-recover ang Data sa Linux gamit ang ddrescue