Mis on kohandatud kursor?

Kohandatud kursor on kasutaja määratletud hiireosakutin, mis asendab brauseri vaikimisi noole või osutikoni. Veebisaidid ja rakendused kasutavad kohandatud kursorit brändi tugevdamiseks, mängude või loovate kogemuste immersiivsuse parandamiseks või lihtsalt liidese unikaalsele visuaalsele puudutusele. Kohandatud kursorid määratletakse tavaliselt CSS-is cursor omaduse abil, kasutades url() väärtust, mis osutab pildifailile nagu .cur, .png või .svg.

Veebibrowserid toetavad natiivset mitut kursorifaili vormingut. .cur vorming on klassikaline Windowsi kursorivormingut, .ani lisab animatsiooni toetuse, samas kui .png ja .svg pakuvad kaasaegseid, eraldusvõimest sõltumatuid alternatiive, mis toimivad kõigil platvormidel.

Tööriista kirjeldus

Custom Cursor Tester võimaldab teil üles laadida mis tahes kursorifaili ja kohe näha, kuidas see brauseris välja näeb ja käitub. Pärast üleslaadimist asendab teie kursor vaikimisi osutikut spetsiaalsele testialale – ruudulisele vaatealale nupuga –, et saaksite hinnata nii vaba ruumi liikumist kui ka hõljumiskäitumist ilma ühtegi CSS-i rida kirjutamata.

Toetatud vormingud

Vorming Kirjeldus
.cur Windowsi kursorivormingut, laialdaselt toetatud
.ani Animeeritud Windowsi kursor
.png Rasterpilt, ideaalne kõrge kvaliteediga kursorite jaoks
.svg Skaleeritav vektorkujutis, terav igal suurusel
.ico Windowsi ikoonivormingut, kasutatav ka kursorina

Funktsioonid

  • Kohene eelvaade: Kursor rakendatakse otsekohe pärast faili üleslaadimist – lehekülg ei vaja uuesti laadimist
  • Interaktiivne testialal: Ruudulisele vaateala näitab kursori neutraalse tausta kohal selge nähtavuse jaoks
  • Nuputest sihtmärk: Testialal olev nupp võimaldab teil kontrollida kursori käitumist interaktiivsetel elementidel
  • Järjekindel kursori pärimine: Nupp pärib kohandatud kursori, mitte ei naase brauseri vaikimisele
  • Ainult kliendipoolne: Failid loetakse otse brauseris ja neid ei laadita kunagi üles ühegi serverisse

Kasutamise juhtumid

  • Kursorite kujundajad: Kontrollige, kuidas äsja loodud .cur või .png kursorifail välja näeb enne selle saatmist
  • Veebiarendajad: Testage kursorivara kiiresti enne selle integreerimist CSS-i cursor: url(...) omadusega
  • Mängu- ja loovaarendajad: Kontrollige kohandatud osutikute tundumust ja nähtavust interaktiivses UI kontekstis

Kuidas see toimib

Kui laadite faili üles, loob tööriist selle jaoks objekti URL-i, kasutades brauseri URL.createObjectURL() API-t, ja süstib selle CSS cursor stiilina testialale. See on samaväärne cursor: url(your-file.cur), auto kirjutamisega stiililehes. Tagavara auto tagab, et brauseril on võimalus kasutada oma vaikimisi kursori, kui faili ei saa laadida või seda ei saa sõeluda.

Näpunäited

  • .png kursorite puhul kasutab brauseris vasakul ülaosas (0 0) kuumuspunkti vaikimisi. Kui teie kursori aktiivne punkt peaks olema mujal (nt pliiatsi ots), peate seda pärast testimist CSS-is kohandama.
  • Animeeritud .ani kursorid mängivad automaatselt brauserites, mis neid toetavad (peamiselt Chromium-põhised).
  • SVG kursorid peavad olema väikesed (tavaliselt alla 128×128 px), et enamikus brauserites kursorina õigesti renderduda.