Kohandatud CSS-i kursor

Kohandatud Css I Kursor



Kursor näitab kohta ekraanil, kus kasutaja saab klõpsata või teksti sisestada. Veebisaidi erinevate komponentide jaoks võib kasutada erinevaid kursoreid. Arendaja peab tagama, et rakenduses kasutatavad kursorid peavad olema atraktiivsed. Näiteks saab hiirekursorit kasutada hiirekursori nupul. Teksti (vilkuvat joont) indikaatorit kasutatakse tekstikastil, kuhu tekst sisestatakse.

CSS-is on mitu kursori stiili, mida kasutatakse lihtsalt kursori atribuudi väärtuse määramisel. Kuid arendaja saab CSS-i abil luua kohandatud kursori.





See õppejuhend pakub järgmist:



    • CSS-i kursor
    • Kohandatud kursori CSS

Enne teemasse puutumist vaatame mõnda CSS-i kursori kujundit koos praktilise näitega.



CSS-i kursor

CSS' kursor ” atribuudil on erinevad väärtused, nt pointer, none, progress ja palju muud. Loome tabeli, mis sisaldab ridu, millel kuvatakse hiirekursorid.



Näide: HTML-is erinevaid CSS-i kursoreid esindava tabeli loomine

Esmalt lisage HTML-i element

. Selle elemendi sees:



    • Märgendit
kasutatakse ridade loomiseks.
  • Esimene rida sisaldab pealkirju.
  • Need pealkirjad täpsustatakse siltide
    • sildid sisaldavad kahte
    abil. Teised
    silti veergude andmete täitmiseks.
  • Teine
    		• silt tähistab nupuelemente, mida rakendatakse CSS-iga ' kursor ” erinevate väärtustega vara.

    Ülaltoodud stsenaariumi HTML-kood on toodud allpool:

    < laud >
    < tr >
    < th stiilis = 'laius: 200 pikslit;' > css kursori valija th >
    < th stiilis = 'laius: 200 pikslit;' > kursori stiil th >
    tr >
    < tr >
    < td > kursor: kursor td >
    < td >< nuppu stiilis = 'kursor: kursor;' > osuti nuppu > td >
    tr >
    < tr >
    < td > kursor: edenemine td >
    < td >< nuppu stiilis = 'kursor: edenemine;' > edusamme nuppu > td >
    tr >
    < tr >
    < td > kursor: pole lubatud td >
    < td >< nuppu stiilis = 'kursor: pole lubatud;' > ei ole lubatud nuppu > td >
    tr >
    < tr >
    < td > kursor: puudub td >
    < td >< nuppu stiilis = 'kursor: puudub;' > mitte ühtegi nuppu > td >
    tr >
    < tr >
    < td > kursor: liiguta td >
    < td >< nuppu stiilis = 'kursor: liiguta;' > liigutada nuppu > td >
    tr >
    < tr >
    < td > kursor: haarata td >
    < td >< nuppu stiilis = 'kursor: haarata;' > haarata nuppu > td >
    tr >
    < tr >
    < td > kursor: kopeeri td >
    < td >< nuppu stiilis = 'kursor: koopia;' > kopeerida nuppu > td >
    tr >
    < tr >
    < td > kursor: col-resize td >
    < td >< nuppu stiilis = 'kursor: värvi muutmine;' > värvi muutmine nuppu > td >
    tr >
    < tr >
    < td > kursor: rea suuruse muutmine td >
    < td >< nuppu stiilis = 'kursor: rea suuruse muutmine;' > rea suuruse muutmine nuppu > td >
    tr >
    < tr >
    < td > kursor: tekst td >
    < td >< nuppu stiilis = 'kursor: tekst;' > tekst nuppu > td >
    tr >
    laud >


    Ülaltoodud kood genereerib järgmise tulemuse:


    Järgmises jaotises rakendame HTML-elementidele erinevaid stiile.

    Stiilige 'kõik' elemendid

    * {
    polsterdus: 0 ;
    marginaal: 0 ;
    fondiperekond: Arial, Helvetica, sans-serif;
    }


    Kõiki HTML-i elemente rakendatakse CSS-stiilidega, mida on kirjeldatud allpool:

      • “ polsterdus ' vara koos ' 0 ” väärtus ei sisalda tühikut elemendi sisu ümber.
      • “ marginaal ' vara koos ' 0 ” väärtus ei lisa ruumi väljaspool iga elementi.
      • “ font-perekond 'varale on määratud väärtus' Arial, Helvetica, sans-serif ”. Kirjastiilide loend on antud tagamaks, et kui brauser ei toeta esimest stiili, tuleb rakendada muid stiile.

    Stiili 'laud' element

    laud {
    veeris: 0px auto;
    ääris: 1px solid gainsboro;
    }


    HTML-tabeli elementi rakendatakse allpool kirjeldatud CSS-i atribuutidega:

      • “ piir ' atribuut on määratud väärtusega ' 1px solid gainsboro ”, mis tähistab vastavalt äärise laiust, ääriste stiili ja äärise värvi.

    “ marginaal ” atribuut käitub ülaltoodud viisil.

    Stiili 'td' element

    td {
    teksti joondamine: keskel;
    }


    Elementi

    		rakendatakse atribuudiga ' teksti joondamine ' väärtusega ' Keskus ”. See joodab veeru teksti keskele.

    Stiili 'nupu' element

    nuppu {
    taustavärv: kadetsinine;
    polsterdus: 10px 10px;
    värv: #ffffff;
    laius: 150 pikslit;
    }


    Ülaltoodud HTML-koodis kasutatav nupuelement on kujundatud uute CSS-i atribuutidega, mida selgitatakse allpool:

      • “ taustavärv ” määrab elemendi tausta värvi.
      • “ polsterdus ' väärtustega, mis on määratud kui ' 10 pikslit 10 pikslit ” lisab elemendi üksuste ülaosas ja allservas ruumi 10 pikslit ja vasakus-parempoolses servas 10 pikslit.
      • “ värvi ” kohandab elemendi fondi värvi.
      • “ laius ” on atribuut, mis reguleerib elemendi laiust.

    Ülaltoodud kood genereerib järgmise tulemuse:


    Siiani oleme arutanud CSS-i pakutavaid kursoreid. Järgmises jaotises kirjeldatakse näites, kuidas luua CSS-iga kohandatud kursor.

    Kohandatud kursori CSS

    Arendajad peavad kasutama oma rakenduste jaoks sobivaid kursoreid. Kursorid tuleks muuta atraktiivseks, et võita kasutajate tähelepanu. Lisaks saab selleks otstarbeks luua kohandatud kursori.

    Vaata allolevat näidet!

    Näide: kuidas luua kohandatud kursorit CSS-iga?

    HTML-is lisage kaks div elementi. Üks klassiga ' ring 'ja teine ​​klassiga' punkt ”.

    HTML

    < div klass = 'ring' > div >
    < div klass = 'punkt' > div >


    Liigume edasi CSS-i jaotise poole.

    Stiili 'keha' element

    keha {
    kõrgus: 100vh;
    }


    HTML-faili kehaelementi rakendatakse stiiliga ' kõrgus ” atribuut elemendi kõrguse määramiseks.

    Stiil 'ring' jaotus

    .ring {
    laius: 20 pikslit;
    kõrgus: 20 pikslit;
    ääris: 2px ühevärviline valge;
    piiri raadius: viiskümmend % ;
    }


    Allpool on selgitus CSS-i omaduste kohta, mida rakendatakse div-elemendile, millel on klass ' ring ”:

      • “ laius ” atribuut reguleerib elemendi laiust.
      • “ piir ' atribuut väärtusega, mis on määratud kui ' 2px täisvalge ” tähistab äärise laiust, ääriste stiili ja värvi.
      • “ piiriraadius ” atribuut muudab elemendi äärise ringi.

    Stiil “punkt” jaotus

    .punkt {
    laius: 5 pikslit;
    kõrgus: 5 pikslit;
    taustavärv: valge;
    piiri raadius: viiskümmend % ;
    }


    Klassipunktiga div-element on varustatud erinevate omadustega, mida kirjeldatakse allpool:

      • “ taustavärv ” atribuut määrab elemendi tausta värvi.
      • “ piiriraadius ” muudab elemendi servad ümaraks.
      • Muud omadused töötavad samamoodi, nagu arutatud.

    Antud kood kuvab veebilehel järgmise kursori:


    Kursori oleme loonud HTML-i ja CSS-i abil. Nüüd, järgmises jaotises, kirjutatakse JavaScripti kood, et lisada kursorile vajalik funktsionaalsus.

    JavaScript

    < stsenaarium >
    const cursorCircle = document.querySelector ( '.ring' ) ;
    const cursorPoint = document.querySelector ( '.point' ) ;
    const liigu Kursor = ( ja ) = > {
    const mouseY = e.clientY;
    const mouseX = e.clientX;

    cursorCircle.style.transform = ` tõlkida ( ${hiirX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` tõlkida ( ${hiirX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'mousemove' , liiguta kursorit )
    stsenaarium >


    Ülaltoodud JavaScripti koodi kirjeldus on toodud allpool:

      • “ , mida kasutatakse JavaScripti koodi kirjutamiseks.
      • “ konst ” märksõna identifitseerib, et märksõna const, millele järgneb muutuja, ei saa ümber määrata.
      • “ document.querySelector('.circle') ” tagastab ringi div elemendi, mis sobib dokumendis määratud valijaga.
      • “ document.querySelector('.point') ” tagastab punkti div elemendi, mis sobib dokumendis määratud valijaga.
      • “ const moveKursor = (e) => ” see funktsioon määrab kursori funktsiooni.
      • “ e.klient ” tagastab vertikaalse koordinaadi, kui hiire sündmus käivitati.
      • “ e.clientX ” tagastab hiiresündmuse käivitamisel horisontaalse koordinaadi.
      • “ kursorCircle.style.transform ' Circle Div rakendatakse stiiliteisendusega.
      • “ cursorPoint.style.transform ” punkti div rakendatakse stiiliteisendusega.
      • “ tõlkida(${mouseX}px, ${mouseY}px) ” teisendusomaduse väärtus määrab horisontaalsed ja vertikaalsed koordinaadid.
      • “ window.addEventListener('hiir', liiguta kursorit) ” sündmuste kuulaja meetod kuulab hiire liikumist. See on osa globaalsest aknaobjektist.

    Pärast ülaltoodud koodiplokkide sisestamist liigub kursor automaatselt ekraanil, nagu allpool näidatud:


    See on lahe! Oleme loonud kohandatud kursori erinevate CSS-i omadustega.

    Järeldus

    CSS' kursor ” atribuudil on palju väärtusi, mis näitavad erinevaid kursori stiile. HTML-i elemente ja CSS-i atribuute kasutades saame aga teha kohandatud kursoreid. Seejärel rakendatakse selle funktsioonide aktiveerimiseks JavaScripti kood. See uuring on praktilise näitega näidanud, kuidas luua kohandatud CSS-kursoreid.

    muud

    Kategooria

    Lemmik Postitused

    Markdowni pesastatud loendid

    Python Regexi näited

    Kuidas installida ametlikud NVIDIA GPU draiverid seadmesse Proxmox VE 8

    Mis vahe on potentsiomeetritel ja reostaatidel

    Kali Linuxi turvaliseks muutmine

    Mis täpselt on HTML-i siselink?

    Postgresi hulgisisestus

    KDE installimine Ubuntu versiooni 24.04

    Atlase allalaadimislogid

    Legendi lisamine telgedele MATLABis

    Kuidas muuta Bash skript käivitatavaks

    Kuidas teha CSS-iga vilkuvat/vilkuvat teksti

    Millisel HP sülearvutil on Bang & Olufsen

    Kas Arduino saab kaamerat käivitada

    Kuidas rakendada OpenAI funktsioone OpenAPI kõne abil LangChainis?

    Kuidas kaardistada võtmeid Vimis

    Kuidas discordis rolle hallata

    Erimärk (\t) C++ keeles

    Kuidas näha Discord Mobile'is blokeeritud loendit?

    Kuidas WordPressis teemat üles laadida