Mukautettu CSS-kohdistin

Mukautettu Css Kohdistin



Kohdistin osoittaa näytön kohdan, jossa käyttäjä voi napsauttaa tai kirjoittaa tekstiä. Verkkosivuston eri osissa voidaan käyttää erilaisia ​​kohdistimia. Kehittäjän on varmistettava, että sovelluksessa käytettävien kursorien on oltava houkuttelevia. Esimerkiksi osoittavaa käsikohdistinta voidaan käyttää hiiren osoittimen painikkeessa. Tekstin (vilkkuva viiva) -ilmaisinta käytetään tekstiruudussa, johon teksti on syötettävä.

CSS:ssä on useita kohdistintyylejä, joita käytetään vain määrittämällä kohdistimen ominaisuuden arvo. Kehittäjä voi kuitenkin luoda mukautetun kohdistimen CSS:n avulla.





Tämä opinto-opas sisältää:



    • CSS-kursori
    • Mukautettu kohdistin CSS

Ennen kuin puutut aiheeseen, katsotaanpa joitain CSS-kohdistimen muotoja käytännön esimerkillä.



CSS-kursori

CSS' kohdistin ” omaisuudella on erilaisia ​​arvoja, kuten osoitin, ei mitään, edistyminen ja paljon muuta. Luodaan taulukko, joka sisältää rivejä, joilla eri kohdistimet näytetään hiiren osoitin.



Esimerkki: Erilaisia ​​CSS-kursoreita edustavan taulukon luominen HTML:ssä

Lisää ensin

-elementti HTML:ään. Tämän elementin sisällä:



    • Tunnistetta
käytetään rivien luomiseen.
  • Ensimmäinen rivi sisältää otsikot.
  • Nämä otsikot määritetään käyttämällä
    • -tunnisteet sisältävät kaksi
    -tageja. Muut
    -tunnistetta sarakkeiden täyttämiseksi tiedoilla.
  • Toinen
    		• -tunniste edustaa painikeelementtejä, joita käytetään CSS:n kanssa ' kohdistin ” omaisuutta eri arvoilla.

    Yllä olevan skenaarion HTML-koodi on alla:

    < pöytä >
    < tr >
    < th tyyli = 'width: 200px;' > css-kohdistimen valitsin th >
    < th tyyli = 'width: 200px;' > kursorin tyyli th >
    tr >
    < tr >
    < td > kohdistin: osoitin td >
    < td >< -painiketta tyyli = 'kursori: osoitin;' > osoitin -painiketta > td >
    tr >
    < tr >
    < td > kursori: edistyminen td >
    < td >< -painiketta tyyli = 'kursori: edistyminen;' > edistystä -painiketta > td >
    tr >
    < tr >
    < td > kohdistin: ei sallittu td >
    < td >< -painiketta tyyli = 'kursori: ei sallittu;' > ei sallittu -painiketta > td >
    tr >
    < tr >
    < td > kohdistin: ei mitään td >
    < td >< -painiketta tyyli = 'kursori: ei mitään;' > ei mitään -painiketta > td >
    tr >
    < tr >
    < td > kursori: siirrä td >
    < td >< -painiketta tyyli = 'kursori: siirrä;' > liikkua -painiketta > td >
    tr >
    < tr >
    < td > kohdistin: nappaa td >
    < td >< -painiketta tyyli = 'kursori: nappaa;' > napata -painiketta > td >
    tr >
    < tr >
    < td > kursori: kopioi td >
    < td >< -painiketta tyyli = 'kursori: kopioi;' > kopio -painiketta > td >
    tr >
    < tr >
    < td > kohdistin: col-resize td >
    < td >< -painiketta tyyli = 'kursori: col-resize;' > col-reize -painiketta > td >
    tr >
    < tr >
    < td > kohdistin: rivin koon muuttaminen td >
    < td >< -painiketta tyyli = 'kursori: rivin kokoa;' > rivin kokoa -painiketta > td >
    tr >
    < tr >
    < td > kursori: teksti td >
    < td >< -painiketta tyyli = 'kursori: teksti;' > teksti -painiketta > td >
    tr >
    pöytä >


    Yllä oleva koodi tuottaa seuraavan tuloksen:


    Seuraavassa osiossa käytämme erilaisia ​​tyylejä HTML-elementteihin.

    Tyyli 'kaikki' elementit

    * {
    pehmuste: 0 ;
    marginaali: 0 ;
    kirjasinperhe: Arial, Helvetica, sans-serif;
    }


    Kaikkia HTML-elementtejä käytetään CSS-tyyleillä, jotka selitetään alla:

      • ' pehmuste ' kiinteistö ' 0 ”-arvo ei sisällä tilaa elementin sisällön ympärillä.
      • ' marginaali ' kiinteistö ' 0 ”-arvo ei lisää tilaa kunkin elementin ulkopuolelle.
      • ' font-perhe 'omaisuudelle on määritetty arvo' Arial, Helvetica, sans-serif ”. Kirjasintyyliluettelo on annettu sen varmistamiseksi, että jos selain ei tue ensimmäistä tyyliä, on käytettävä muita tyylejä.

    Tyyli 'pöytä' elementti

    pöytä {
    marginaali: 0px auto;
    reunus: 1px solid gainsboro;
    }


    HTML-taulukkoelementtiä käytetään alla kuvattujen CSS-ominaisuuksien kanssa:

      • ' rajaa ' ominaisuus on asetettu arvolla ' 1px kiinteä gainsboro ', joka edustaa reunuksen leveyttä, reunuksen tyyliä ja reunuksen väriä.

    ' marginaali ” omaisuus käyttäytyy edellä kuvatulla tavalla.

    Tyylielementti 'td'.

    td {
    tekstin tasaus: keskellä;
    }


    		-elementtiä käytetään ominaisuudella ' tekstin tasaus ' arvolla ' keskusta ”. Se tasaa sarakkeen tekstin keskelle.

    Tyyli 'painike' elementti

    -painiketta {
    taustaväri: kadetinsininen;
    täyte: 10px 10px;
    väri: #ffffff;
    leveys: 150 pikseliä;
    }


    Yllä olevassa HTML-koodissa käytetty painikeelementti on tyylitelty uusilla CSS-ominaisuuksilla, jotka selitetään alla:

      • ' taustaväri ” määrittää elementin taustan värin.
      • ' pehmuste ' arvoilla, jotka on määritetty ' 10px 10px ” lisää tilaa 10 pikseliä elementin kohteiden ylä-alaan ja 10 kuvapistettä vasemmalle ja oikealle puolelle.
      • ' väri- ” säätää elementin fontin väriä.
      • ' leveys ” on ominaisuus, joka säätää elementin leveyttä.

    Yllä oleva koodi tuottaa seuraavan tuloksen:


    Toistaiseksi olemme keskustelleet CSS:n tarjoamista kohdistimista. Tulevassa osiossa esimerkki kuvaa mukautetun kohdistimen luomista CSS:n avulla.

    Mukautettu kohdistin CSS

    Kehittäjien on käytettävä sovelluksilleen sopivia kohdistimia. Kursoreista tulee tehdä houkuttelevia käyttäjien huomion saamiseksi. Lisäksi mukautettu kohdistin voidaan luoda tätä tarkoitusta varten.

    Katso alla oleva esimerkki!

    Esimerkki: Kuinka luoda mukautettu kohdistin CSS:llä?

    Lisää HTML:ään kaksi div-elementtiä. Yksi luokan kanssa' ympyrä 'ja toinen luokan kanssa' kohta ”.

    HTML

    < div luokkaa = 'ympyrä' > div >
    < div luokkaa = 'kohta' > div >


    Siirrytään eteenpäin kohti CSS-osiota.

    Tyyli 'vartalo' elementti

    kehon {
    korkeus: 100vh;
    }


    HTML-tiedoston body-elementtiä käytetään tyylillä ' korkeus ”-ominaisuus elementin korkeuden asettamiseen.

    Tyyli 'ympyrä' jako

    .ympyrä {
    leveys: 20px;
    korkeus: 20px;
    reunus: 2px tasainen valkoinen;
    rajan säde: viisikymmentä % ;
    }


    Alla on selitys CSS-ominaisuuksista, joita sovelletaan div-elementtiin, jolla on luokka ' ympyrä ”:

      • ' leveys ”-ominaisuus säätää elementin leveyttä.
      • ' rajaa ' omaisuutta, jonka arvo on määritetty ' 2px kiinteä valkoinen ' edustaa reunuksen leveyttä, reunuksen tyyliä ja väriä.
      • ' raja-säde ”-ominaisuus muuttaa elementin reunan ympäri.

    Tyyli “piste” jako

    .kohta {
    leveys: 5px;
    korkeus: 5px;
    taustaväri: valkoinen;
    rajan säde: viisikymmentä % ;
    }


    Div-elementillä, jossa on luokkapiste, on erilaisia ​​ominaisuuksia, jotka kuvataan alla:

      • ' taustaväri ”-ominaisuus määrittää elementin taustan värin.
      • ' raja-säde ” pyöristää elementin reunat.
      • Muut ominaisuudet toimivat samoin kuin keskusteltiin.

    Annettu koodi näyttää seuraavan kohdistimen verkkosivulla:


    Olemme luoneet kursorin HTML:n ja CSS:n avulla. Nyt, seuraavassa osiossa, JavaScript-koodi kirjoitetaan lisäämään tarvittavat toiminnot kohdistimeen.

    JavaScript

    < käsikirjoitus >
    const cursorCircle = document.querySelector ( '.ympyrä' ) ;
    const cursorPoint = document.querySelector ( '.kohta' ) ;
    const moveCursor = ( ja ) = > {
    const mouseY = e.clientY;
    const hiiriX = e.clientX;

    cursorCircle.style.transform = ` Kääntää ( ${hiiriX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` Kääntää ( ${hiiriX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'mousemove' , siirrä kursoria )
    käsikirjoitus >


    Yllä olevan JavaScript-koodin kuvaus on alla:

      • ' -tunnisteen kanssa, jota käytetään JavaScript-koodin kirjoittamiseen.
      • ' konst ”-avainsana ilmaisee, että const-avainsanaa ja muuttujaa ei voida määrittää uudelleen.
      • ' document.querySelector('.circle') ” palauttaa ympyrä div -elementin, joka vastaa asiakirjassa määritettyä valitsinta.
      • ' document.querySelector('.point') ” palauttaa point div -elementin, joka vastaa asiakirjassa määritettyä valitsinta.
      • ' const moveCursori = (e) => ” Tämä toiminto määrittää kohdistimen toiminnon.
      • ' e.ClientY ” palauttaa pystysuoran koordinaatin, kun hiiren tapahtuma käynnistettiin.
      • ' e.clientX ” palauttaa vaakakoordinaatin, kun hiiren tapahtuma käynnistetään.
      • ' cursorCircle.style.transform ” ympyrädiv:tä käytetään tyylimuunnoksen avulla.
      • ' cursorPoint.style.transform pisteen div käytetään tyylimuunnoksen avulla.
      • ' käännä (${mouseX}px, ${mouseY}px) ” muunnosominaisuuden arvo asettaa vaaka- ja pystykoordinaatit.
      • ' window.addEventListener('hiiri', liikuta kursoria) ” tapahtumakuuntelumenetelmä kuuntelee hiiren liikettä. Se on osa globaalia ikkunaobjektia.

    Kun olet antanut yllä olevat koodilohkot, kohdistin liikkuu automaattisesti näytöllä alla olevan kuvan mukaisesti:


    Hyvä juttu! Olemme luoneet mukautetun kohdistimen erilaisilla CSS-ominaisuuksilla.

    Johtopäätös

    CSS' kohdistin ” -ominaisuudella on useita arvoja, jotka osoittavat eri kohdistintyylejä. HTML-elementtejä ja CSS-ominaisuuksia hyödyntämällä voimme kuitenkin tehdä mukautettuja kohdistimia. Sitten JavaScript-koodi otetaan käyttöön sen toiminnallisuuden aktivoimiseksi. Tämä tutkimus on osoittanut kuinka luoda mukautettuja CSS-kursoreita käytännön esimerkillä.

    muu

    Luokka

    Suosittu Viestiä

    Mikä on EOF C-ohjelmointikielessä

    MySQL CAST -toiminto

    SQL JA

    Mikä on JavaScriptin hasOwnProperty()-ominaisuus

    Tableau Word Cloud

    Mikä on pfp Discordissa?

    Tehdasmalli C++:ssa

    Kuinka ottaa EPEL-varasto käyttöön RHEL 9:ssä/AlmaLinux 9:ssä/Rocky Linux 9:ssä/CentOS Stream 9:ssä

    Muutosten tallentaminen arkistoon Git |:ssä Selitetty

    Kuinka sijoittaa korvatut elementit säiliöön myötätuulessa?

    CSS-osoitintapahtuma-ominaisuuden käyttäminen

    Kuinka sammuttaa tietokone eri menetelmillä Windowsissa?

    Kuinka lisätä kaksoisreunus eri väreillä?

    Linux chdir System Call C:ssä

    Lataa nykyinen tiedosto uudelleen Emacsissa

    Jokerimerkin käyttäminen – Raspberry Pi Linux

    Kuinka saada Git kloonaamaan nykyiseen hakemistoon

    Kuinka saada rivit ulottumaan myötätuulessa?

    SQL XOR -operaattori

    Rufuksen käyttäminen Linuxissa