Egendefinert CSS-markør

Egendefinert Css Markor



Markøren angir posisjonen på skjermen hvor brukeren kan klikke eller skrive inn tekst. Det kan være forskjellige markører som brukes for forskjellige nettstedkomponenter. En utvikler må sørge for at markørene som brukes i applikasjonen må være attraktive. For eksempel kan en pekende håndmarkør brukes på knappen ved musepeker. Tekstindikatoren (blinkende linje) brukes på tekstboksen der teksten skal skrives inn.

Det er flere markørstiler i CSS som brukes ved å bare spesifisere verdien av markøregenskapen. En utvikler kan imidlertid lage en tilpasset markør ved hjelp av CSS.





Denne studieveiledningen vil gi om:



    • CSS-markør
    • Egendefinert markør CSS

Før vi støter på emnet, la oss se noen av CSS-markørformene med et praktisk eksempel.



CSS-markør

CSS ' markøren ”-egenskapen har forskjellige verdier, for eksempel en peker, ingen, fremdrift og mer. La oss lage en tabell som inneholder rader der forskjellige markører vil vises når du holder musepekeren.



Eksempel: Lage en tabell som representerer forskjellige CSS-pekere i HTML

Først legger du til

-elementet i HTML. Inne i dette elementet:



-koden vil bli brukt til å lage rader.
  • Den første raden inneholder overskriftene.
  • Disse overskriftene spesifiseres ved å bruke
    • -tagger inneholder to
    -taggene. Andre
    -tagger for å fylle kolonnene med data.
  • Den andre
    		• -taggen representerer knappeelementene som brukes med en CSS ' markøren ” eiendom med ulike verdier.

    HTML-koden for scenariet ovenfor er gitt nedenfor:

    < bord >
    < tr >
    < th stil = 'bredde: 200px;' > css markørvelger th >
    < th stil = 'bredde: 200px;' > markørstil th >
    tr >
    < tr >
    < td > markør: peker td >
    < td >< knapp stil = 'markør: peker;' > pekeren knapp > td >
    tr >
    < tr >
    < td > markør: fremgang td >
    < td >< knapp stil = 'markør: fremgang;' > framgang knapp > td >
    tr >
    < tr >
    < td > markør: ikke tillatt td >
    < td >< knapp stil = 'markør: ikke-tillatt;' > ikke tillatt knapp > td >
    tr >
    < tr >
    < td > markør: ingen td >
    < td >< knapp stil = 'markør: ingen;' > ingen knapp > td >
    tr >
    < tr >
    < td > markør: flytte td >
    < td >< knapp stil = 'markør: flytte;' > bevege seg knapp > td >
    tr >
    < tr >
    < td > markør: grip td >
    < td >< knapp stil = 'markør: grip;' > gripe knapp > td >
    tr >
    < tr >
    < td > markør: kopi td >
    < td >< knapp stil = 'markør: kopi;' > kopiere knapp > td >
    tr >
    < tr >
    < td > markør: col-endre størrelse td >
    < td >< knapp stil = 'markør: col-resize;' > farge endre størrelsen knapp > td >
    tr >
    < tr >
    < td > markør: endre størrelse på rad td >
    < td >< knapp stil = 'markør: rad-endre størrelse;' > endre størrelse på rad knapp > td >
    tr >
    < tr >
    < td > markør: tekst td >
    < td >< knapp stil = 'markør: tekst;' > tekst knapp > td >
    tr >
    bord >


    Koden ovenfor vil generere følgende resultat:


    I neste avsnitt vil vi bruke forskjellige stiler på HTML-elementene.

    Stil 'alle' elementer

    * {
    polstring: 0 ;
    margin: 0 ;
    font-familie: Arial, Helvetica, sans-serif;
    }


    Alle HTML-elementene brukes med CSS-stiler som er forklart nedenfor:

      • ' polstring ' eiendom med ' 0 ”-verdien inkluderer ingen plass rundt elementets innhold.
      • ' margin ' eiendom med ' 0 ” verdi legger ikke til mellomrom utenfor hvert av elementene.
      • ' font-familie ' egenskap er tildelt en verdi ' Arial, Helvetica, sans-serif '. Listen over skriftstiler er gitt for å sikre at hvis den første stilen ikke støttes av nettleseren, må andre stiler brukes.

    Stil 'tabell' Element

    bord {
    margin: 0px auto;
    kantlinje: 1px solid gainsboro;
    }


    HTML-tabellelementet brukes med CSS-egenskapene som er beskrevet nedenfor:

      • ' grense ' egenskapen er satt med verdien ' 1px solid gainsboro ” som representerer henholdsvis kantbredde, kantstil og kantfarge.

    ' margin ” egenskapen oppfører seg som spesifisert ovenfor.

    Stil 'td' Element

    td {
    tekst-align: center;
    }


    		-elementet brukes med egenskapen ' tekstjustering ' med verdien ' senter '. Det vil justere kolonnens tekst i midten.

    Stil 'knapp'-element

    knapp {
    bakgrunnsfarge: kadettblå;
    polstring: 10px 10px;
    farge: #ffffff;
    bredde: 150px;
    }


    Knappeelementet som brukes i HTML-koden ovenfor er stilt med nye CSS-egenskaper som er forklart nedenfor:

      • ' bakgrunnsfarge ' spesifiserer fargen til elementets bakgrunn.
      • ' polstring ' med verdiene tilordnet som ' 10px 10px ” legger til plass på 10 piksler øverst og nederst og 10 piksler på venstre og høyre side av elementets elementer.
      • ' farge ' justerer elementets skriftfarge.
      • ' bredde ” er egenskapen som justerer elementets bredde.

    Koden ovenfor vil generere følgende resultat:


    Så langt har vi diskutert markørene som leveres av CSS. I den kommende delen vil eksemplet beskrive hvordan du lager en tilpasset markør med CSS.

    Egendefinert markør CSS

    Utviklerne må bruke egnede markører for sine applikasjoner. Markører bør gjøres attraktive for å få oppmerksomheten til brukerne. Dessuten kan den tilpassede markøren opprettes for dette formålet.

    Se på eksemplet nedenfor!

    Eksempel: Hvordan lage tilpasset markør med CSS?

    I HTML legger du til to div-elementer. En med klassen ' sirkel ' og den andre med klassen ' punkt '.

    HTML

    < div klasse = 'sirkel' > div >
    < div klasse = 'punkt' > div >


    La oss gå videre mot CSS-delen.

    Stil 'body' Element

    kropp {
    høyde: 100vh;
    }


    Body-elementet til HTML-filen brukes med stilen ' høyde ” egenskap for å angi elementets høyde.

    Stil “sirkel” div

    .sirkel {
    bredde: 20px;
    høyde: 20px;
    kantlinje: 2px solid hvit;
    border-radius: femti % ;
    }


    Nedenfor er forklaringen av CSS-egenskapene som brukes på div-elementet med klassen ' sirkel ':

      • ' bredde ” egenskap justerer elementets bredde.
      • ' grense ' egenskap med verdien spesifisert som ' 2px ensfarget hvit ” representerer kantbredden, kantstilen og fargen.
      • ' grense-radius egenskap endrer elementets kantlinje.

    Stil “punkt” div

    .punkt {
    bredde: 5px;
    høyde: 5px;
    bakgrunnsfarge: hvit;
    border-radius: femti % ;
    }


    div-elementet med klassepunkt er utstyrt med forskjellige egenskaper som er beskrevet nedenfor:

      • ' bakgrunnsfarge egenskapen spesifiserer fargen på elementets bakgrunn.
      • ' grense-radius ' setter elementets kanter runde.
      • Andre egenskaper vil fungere på samme måte som diskutert.

    Den gitte koden vil vise følgende markør på nettsiden:


    Vi har laget markøren ved hjelp av HTML og CSS. Nå, i neste seksjon, skrives JavaScript-koden for å legge til den nødvendige funksjonaliteten til markøren.

    JavaScript

    < manus >
    const cursorCircle = document.querySelector ( '.sirkel' ) ;
    const cursorPoint = document.querySelector ( '.punkt' ) ;
    const moveCursor = ( og ) = > {
    const mouseY = e.clientY;
    const mouseX = e.clientX;

    cursorCircle.style.transform = ` oversette ( ${mouseX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` oversette ( ${mouseX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'mousemove' , flyttmarkør )
    manus >


    Beskrivelsen av JavaScript-koden ovenfor er gitt nedenfor:

      • ' -taggen, som brukes til å skrive JavaScript-kode.
      • ' konst ” nøkkelord identifiserer at nøkkelordet const etterfulgt av en variabel ikke kan tilordnes på nytt.
      • ' document.querySelector(‘.circle’) ” returnerer sirkel div-elementet som samsvarer med den angitte velgeren i dokumentet.
      • ' document.querySelector(‘.point’) ” returnerer punkt div-elementet som samsvarer med den angitte velgeren i dokumentet.
      • ' const moveCursor = (e) => ” denne funksjonen spesifiserer markørfunksjonen.
      • ' e.klient ” returnerer den vertikale koordinaten når musehendelsen ble utløst.
      • ' e.clientX ” returnerer den horisontale koordinaten når musehendelsen utløses.
      • ' cursorCircle.style.transform ” sirkel-div brukes med stiltransformasjon.
      • ' cursorPoint.style.transform ” punkt-div brukes med stiltransformasjon.
      • ' translate(${mouseX}px, ${mouseY}px) ”-verdien til transform-egenskapen setter de horisontale og vertikale koordinatene.
      • ' window.addEventListener('mus', moveCursor) ” hendelseslyttermetoden vil lytte til musebevegelsen. Det er en del av det globale vindusobjektet.

    Etter å ha oppgitt kodeblokkene ovenfor, vil markøren automatisk bevege seg på skjermen som vist nedenfor:


    Det er kult! Vi har laget en egendefinert markør med forskjellige CSS-egenskaper.

    Konklusjon

    CSS ' markøren ”-egenskapen har mange verdier som indikerer ulike markørstiler. Ved å bruke HTML-elementene og CSS-egenskapene kan vi imidlertid lage tilpassede markører. Deretter implementeres JavaScript-kode for å aktivere funksjonaliteten. Denne studien har demonstrert hvordan du lager tilpassede CSS-pekere med et praktisk eksempel.

    Annen

    Kategori

    Populære Innlegg

    Hvordan bruker jeg Java.lang.Class.getMethod()-metoden?

    Hvordan sjekke Windows Update History ved hjelp av PowerShell

    9 reparasjoner for Windows 10 PC sitter fast ved omstart

    Redis XTRIM

    CSS @font-face-regel

    Grunner til at MacBook-viften er så høy og hvordan du fikser det

    Hard opplæring

    PySpark Les CSV()

    Hvordan bruke sizeof()-funksjonen i PHP

    Hvordan installere Ghidra på Linux Mint 21

    Hvordan finne det snødekte tundrabiomet i Minecraft

    Hvordan bruke Docker CLI på Mac uten behov for Docker Desktop?

    Slik viser du filer i Raspberry Pi ved hjelp av Python

    Slik leser du brukerinndata i en variabel i Bash

    String View i C++

    Hvordan installere Skype på Fedora Linux

    Hvordan skrive en Go-kode – Nybegynnerveiledning

    6 rettelser: Kan ikke angi Chrome som standard nettleser Windows 10

    Last inn Pickle File Python

    Hvordan legge til lokalt vertskode til GitHub?