Pielāgots CSS kursors

Pielagots Css Kursors



Kursors norāda vietu ekrānā, kurā lietotājs var noklikšķināt vai ievadīt tekstu. Dažādiem vietnes komponentiem var tikt izmantoti dažādi kursori. Izstrādātājam ir jānodrošina, lai lietojumprogrammā izmantotie kursori būtu pievilcīgi. Piemēram, kursoru var izmantot uz pogas, kas atrodas peles kursorā. Teksta (mirgojošas līnijas) indikators tiek izmantots tekstlodziņā, kurā jāievada teksts.

CSS tiek izmantoti vairāki kursora stili, tikai norādot kursora rekvizīta vērtību. Tomēr izstrādātājs var izveidot pielāgotu kursoru, izmantojot CSS.





Šajā mācību rokasgrāmatā tiks sniegta informācija par:



    • CSS kursors
    • Pielāgota kursora CSS

Pirms pievērsties tēmai, apskatīsim dažas CSS kursora formas ar praktisku piemēru.



CSS kursors

CSS ' kursors ” īpašumam ir dažādas vērtības, piemēram, rādītājs, nav, progress un citas. Izveidosim tabulu, kurā ir rindas, uz kurām, virzot peles kursoru, tiks parādīti dažādi kursori.



Piemērs. Tabulas izveide, kas attēlo dažādus CSS kursorus HTML

Vispirms HTML kodā pievienojiet elementu

. Šī elementa iekšpusē:



    • Tags
tiks izmantots rindu izveidošanai.
  • Pirmajā rindā ir virsraksti.
  • Šie virsraksti tiek norādīti, izmantojot tagus
    • tagos ir divi
    . Citos
    tagi, lai aizpildītu kolonnas ar datiem.
  • Otrais
    		• tags apzīmē pogas elementus, kas tiek lietoti ar CSS. kursors ” īpašums ar dažādām vērtībām.

    Iepriekš minētā scenārija HTML kods ir norādīts tālāk:

    < tabula >
    < tr >
    < th stils = 'platums: 200 pikseļi;' > css kursora atlasītājs th >
    < th stils = 'platums: 200 pikseļi;' > kursora stils th >
    tr >
    < tr >
    < td > kursors: rādītājs td >
    < td >< pogu stils = 'kursors: rādītājs;' > rādītājs pogu > td >
    tr >
    < tr >
    < td > kursors: progress td >
    < td >< pogu stils = 'kursors: progress;' > progresu pogu > td >
    tr >
    < tr >
    < td > kursors: nav atļauts td >
    < td >< pogu stils = 'kursors: nav atļauts;' > nav atļauts pogu > td >
    tr >
    < tr >
    < td > kursors: nav td >
    < td >< pogu stils = 'kursors: nav;' > neviens pogu > td >
    tr >
    < tr >
    < td > kursors: pārvietot td >
    < td >< pogu stils = 'kursors: pārvietot;' > pārvietot pogu > td >
    tr >
    < tr >
    < td > kursors: paķert td >
    < td >< pogu stils = 'kursors: satvert;' > sagrābt pogu > td >
    tr >
    < tr >
    < td > kursors: kopēt td >
    < td >< pogu stils = 'kursors: kopija;' > kopiju pogu > td >
    tr >
    < tr >
    < td > kursors: col-resize td >
    < td >< pogu stils = 'kursors: col-resize;' > krāsas maiņa pogu > td >
    tr >
    < tr >
    < td > kursors: rindas lieluma maiņa td >
    < td >< pogu stils = 'kursors: rindas lieluma maiņa;' > rindas lieluma maiņa pogu > td >
    tr >
    < tr >
    < td > kursors: teksts td >
    < td >< pogu stils = 'kursors: teksts;' > tekstu pogu > td >
    tr >
    tabula >


    Iepriekš minētais kods ģenerēs šādu rezultātu:


    Nākamajā sadaļā HTML elementiem izmantosim dažādus stilus.

    Stila “visi” elementi

    * {
    polsterējums: 0 ;
    piemale: 0 ;
    fontu saime: Arial, Helvetica, sans-serif;
    }


    Visi HTML elementi tiek lietoti ar CSS stiliem, kas izskaidroti tālāk:

      • ' polsterējums ' īpašums ar ' 0 ” vērtība neietver atstarpes ap elementa saturu.
      • ' starpība ' īpašums ar ' 0 ” vērtība nepievieno atstarpi ārpus katra elementa.
      • ' fontu ģimene 'īpašumam ir piešķirta vērtība' Arial, Helvetica, sans-serif ”. Fontu stilu saraksts ir dots, lai nodrošinātu, ka, ja pārlūkprogramma neatbalsta pirmo stilu, ir jāpiemēro citi stili.

    Stila “galda” elements

    tabula {
    piemale: 0px auto;
    apmale: 1 pikselis ciets gainsboro;
    }


    HTML tabulas elements tiek lietots ar tālāk aprakstītajiem CSS rekvizītiem:

      • ' robeža 'īpašums ir iestatīts ar vērtību ' 1 pikselis ciets gainsboro ”, kas apzīmē attiecīgi apmales platumu, apmales stilu un apmales krāsu.

    ' starpība ” īpašums darbojas, kā norādīts iepriekš.

    Stila “td” elements

    td {
    teksta līdzināšana: centrs;
    }


    Elements

    		tiek lietots ar rekvizītu ' teksta līdzināšana ' ar vērtību ' centrs ”. Tas izlīdzinās kolonnas tekstu centrā.

    Stila “pogas” elements

    pogu {
    fona krāsa: kadetzils;
    polsterējums: 10 pikseļi 10 pikseļi;
    krāsa: #ffffff;
    platums: 150 pikseļi;
    }


    Iepriekš minētajā HTML kodā izmantotais pogas elements ir veidots ar jauniem CSS rekvizītiem, kas ir izskaidroti tālāk:

      • ' fona krāsa ” norāda elementa fona krāsu.
      • ' polsterējums ' ar vērtībām, kas piešķirtas kā ' 10 pikseļi 10 pikseļi ” pievieno 10 pikseļu atstarpi elementa vienumu augšdaļā un apakšā un 10 pikseļus kreisajā un labajā pusē.
      • ' krāsa ” pielāgo elementa fonta krāsu.
      • ' platums ” ir rekvizīts, kas pielāgo elementa platumu.

    Iepriekš minētais kods ģenerēs šādu rezultātu:


    Līdz šim mēs esam apsprieduši kursorus, ko nodrošina CSS. Nākamajā sadaļā piemērs aprakstīs, kā izveidot pielāgotu kursoru, izmantojot CSS.

    Pielāgota kursora CSS

    Izstrādātājiem ir jāizmanto piemēroti kursori savām lietojumprogrammām. Kursori ir jāpadara pievilcīgi, lai piesaistītu lietotāju uzmanību. Turklāt šim nolūkam var izveidot pielāgotu kursoru.

    Apskatiet piemēru zemāk!

    Piemērs: Kā izveidot pielāgotu kursoru, izmantojot CSS?

    HTML valodā pievienojiet divus div elementus. Viens ar klasi ' aplis ”un otrs ar klasi” punktu ”.

    HTML

    < div klasē = 'aplis' > div >
    < div klasē = 'punkts' > div >


    Pārejam uz CSS sadaļu.

    Stila “ķermeņa” elements

    ķermeni {
    augstums: 100vh;
    }


    HTML faila pamatelements tiek lietots ar stilu “ augstums ” rekvizītu elementa augstuma iestatīšanai.

    Stils “aplis” div

    .aplis {
    platums: 20 pikseļi;
    augstums: 20 pikseļi;
    apmale: 2 pikseļi vienkrāsains balts;
    robežas rādiuss: piecdesmit % ;
    }


    Tālāk ir sniegts skaidrojums par CSS rekvizītiem, kas tiek lietoti div elementam ar klasi ' aplis ”:

      • ' platums ” rekvizīts pielāgo elementa platumu.
      • ' robeža ” īpašums ar vērtību, kas norādīta kā “ 2 pikseļi vienkrāsains balts ” apzīmē apmales platumu, apmales stilu un krāsu.
      • ' robeža-rādiuss ” rekvizīts maina elementa apmales kārtu.

    Stils “point” div

    .punkts {
    platums: 5 pikseļi;
    augstums: 5 pikseļi;
    fona krāsa: balta;
    robežas rādiuss: piecdesmit % ;
    }


    Div elementam ar klases punktu ir dažādas īpašības, kas aprakstītas tālāk:

      • ' fona krāsa ” rekvizīts norāda elementa fona krāsu.
      • ' robeža-rādiuss ” noapaļo elementa malas.
      • Citas īpašības darbosies tāpat kā apspriests.

    Dotais kods tīmekļa lapā parādīs šādu kursoru:


    Mēs esam izveidojuši kursoru, izmantojot HTML un CSS. Tagad nākamajā sadaļā ir rakstīts JavaScript kods, lai kursoram pievienotu nepieciešamo funkcionalitāti.

    JavaScript

    < skripts >
    const cursorCircle = document.querySelector ( '.circle' ) ;
    const cursorPoint = document.querySelector ( '.point' ) ;
    const moveKursors = ( un ) = > {
    const mouseY = e.clientY;
    const mouseX = e.clientX;

    cursorCircle.style.transform = ` tulkot ( ${mouseX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` tulkot ( ${mouseX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'mousemove' , pārvietot Kursoru )
    skripts >


    Iepriekš minētā JavaScript koda apraksts ir sniegts zemāk:

      • ' ” tags ir savienots pārī ar tagu, ko izmanto JavaScript koda rakstīšanai.
      • ' konst ” atslēgvārds norāda, ka atslēgvārdu const, kam seko mainīgais, nevar piešķirt no jauna.
      • ' document.querySelector('.circle') ” atgriež apļa div elementu, kas atbilst dokumentā norādītajam atlasītājam.
      • ' document.querySelector('.point') ” atgriež punkta div elementu, kas atbilst dokumentā norādītajam atlasītājam.
      • ' const moveKursors = (e) => ” šī funkcija norāda kursora funkciju.
      • ' e.klients ” atgriež vertikālo koordinātu, kad tika aktivizēts peles notikums.
      • ' e.clientX ” atgriež horizontālo koordinātu, kad tiek aktivizēts peles notikums.
      • ' cursorCircle.style.transform ” aplis div tiek piemērots ar stila pārveidošanu.
      • ' cursorPoint.style.transform ” punkts div tiek piemērots ar stila pārveidošanu.
      • ' tulkot (${mouseX}px, ${mouseY}px) ” transformācijas rekvizīta vērtība nosaka horizontālās un vertikālās koordinātas.
      • ' window.addEventListener(“pele”, pārvietot kursoru) ” notikumu klausītāja metode klausīsies peles kustībā. Tā ir daļa no globālā loga objekta.

    Pēc iepriekš minēto kodu bloku nodrošināšanas kursors automātiski pārvietosies ekrānā, kā parādīts zemāk:


    Tas ir forši! Mēs esam izveidojuši pielāgotu kursoru ar dažādiem CSS rekvizītiem.

    Secinājums

    CSS ' kursors Īpašumam ir daudz vērtību, kas norāda dažādus kursoru stilus. Tomēr, izmantojot HTML elementus un CSS rekvizītus, mēs varam izveidot pielāgotus kursorus. Pēc tam JavaScript kods tiek ieviests, lai aktivizētu tā funkcionalitāti. Šis pētījums ir parādījis, kā izveidot pielāgotus CSS kursorus ar praktisku piemēru.

    Cits

    Kategorija

    Populārākas Posts

    C# “Masīvs” pret “Saraksts”: atšķirības un priekšrocības

    Blox augļu karte — visas salas, atrašanās vietas un līmeņa prasības

    Kā lietotnē stats.isDirectory() metodi Node.js?

    Iepazīstinām ar Raspberry Pi 5: jaunāko Raspberry Pi 2023. gada modeli

    Windows 10 UNMOUNTABLE_BOOT_VOLUME BSOD kļūda | 3 Risinājumi

    Kā instalēt peles paliktni Raspberry Pi

    Kā lietot pārtraukuma punktus un multivides vaicājumus ar “vienumu izlīdzināšanu” programmā Tailwind?

    5 veidi, kā ierakstīt darbvirsmas ekrānu vietnē Raspberry Pi

    Kā izvilkt RAR failu operētājsistēmā Fedora Linux

    Kā programmā WordPress pievienot progresa joslu

    Kas ir bloķēšanas skaņa iPhone tālrunī sadaļā Sounds & Haptics

    Kā instalēt empātiju vietnē Raspberry Pi

    Kā izmantot PHP funkcijas date_sunrise() un date_sunset()

    Kā iegūt Nautilus apvalku Minecraft

    Izskaidrojiet komandu “git checkout” ar piemēriem | Checkout filiāle, Checkout Commit

    Novērsiet RSS plūsmas atjaunināšanas problēmas, atiestatot plūsmu datu bāzi programmā Internet Explorer 7 - Winhelponline

    Kā SSH ievadīt Linux serveros no Windows 10/11

    Ko JavaScript nozīmē [object Object]

    Oracle Sequence Nextval funkcija

    Kā saspiest failus operētājsistēmā Linux