Prilagođeni CSS kursor

Kursor označava poziciju na ekranu gdje korisnik može kliknuti ili unijeti tekst. Za različite komponente web stranice mogu se koristiti različiti pokazivači. Programer mora osigurati da pokazivači koji se koriste u aplikaciji budu atraktivni. Na primjer, kursor koji pokazuje rukom može se koristiti na gumbu dok lebdite mišem. Indikator teksta (trepereća linija) koristi se u tekstualnom okviru u koji treba unijeti tekst.

Postoji nekoliko stilova kursora u CSS-u koji se koriste samo navođenjem vrijednosti svojstva kursora. Međutim, razvojni programer može stvoriti prilagođeni pokazivač pomoću CSS-a.

Ovaj vodič za učenje će pružiti informacije o:

- CSS kursor
- Prilagođeni kursor CSS

Prije nego što naletimo na temu, pogledajmo neke od oblika CSS kursora na praktičnom primjeru.

CSS kursor

CSS ' kursor ” svojstvo ima različite vrijednosti, kao što su pokazivač, ništa, napredak i još mnogo toga. Kreirajmo tablicu koja sadrži retke na kojima će se pri lebdenju mišem prikazivati različiti kursori.

Primjer: Stvaranje tablice koja predstavlja različite CSS kursore u HTML-u

Prvo dodajte element

u HTML. Unutar ovog elementa:

- Oznaka

koristit će se za pravljenje redaka.

Prvi red sadrži naslove.

Ovi su naslovi navedeni korištenjem oznaka

oznake sadrže dvije

. Druge
oznake za popunjavanje stupaca podacima. Druga	oznaka predstavlja elemente gumba koji se primjenjuju s CSS-om “ kursor ” svojstvo s različitim vrijednostima. HTML kôd za gornji scenarij dan je u nastavku: < stol > < tr > < th stil = 'width: 200px;' > css selektor kursora th > < th stil = 'width: 200px;' > stil kursora th > tr > < tr > < td > kursor: pokazivač td > < td >< dugme stil = 'kursor: pokazivač;' > pokazivač dugme > td > tr > < tr > < td > kursor: napredak td > < td >< dugme stil = 'kursor: napredak;' > napredak dugme > td > tr > < tr > < td > kursor: nije dopušteno td > < td >< dugme stil = 'kursor: nije dopušteno;' > nije dozvoljeno dugme > td > tr > < tr > < td > kursor: nema td > < td >< dugme stil = 'kursor: nema;' > nikakav dugme > td > tr > < tr > < td > kursor: pomakni td > < td >< dugme stil = 'kursor: premjesti;' > potez dugme > td > tr > < tr > < td > kursor: zgrabi td > < td >< dugme stil = 'kursor: zgrabi;' > zgrabiti dugme > td > tr > < tr > < td > kursor: kopiraj td > < td >< dugme stil = 'kursor: kopiraj;' > kopirati dugme > td > tr > < tr > < td > kursor: promijeni veličinu u boji td > < td >< dugme stil = 'kursor: promijeni veličinu u stupcu;' > mijenjanje veličine u boji dugme > td > tr > < tr > < td > kursor: promjena veličine reda td > < td >< dugme stil = 'kursor: promjena veličine reda;' > promjena veličine reda dugme > td > tr > < tr > < td > kursor: tekst td > < td >< dugme stil = 'kursor: tekst;' > tekst dugme > td > tr > stol > Gornji kod će generirati sljedeći rezultat: U sljedećem odjeljku primijenit ćemo različite stilove na HTML elemente. Stilizirajte 'sve' elemente * { padding: 0 ; margina: 0 ; obitelj fontova: Arial, Helvetica, sans-serif; } Svi HTML elementi primjenjuju se s CSS stilovima koji su objašnjeni u nastavku: “ podstava ' vlasništvo s ' 0 ” vrijednost ne uključuje razmak oko sadržaja elementa. “ margina ' vlasništvo s ' 0 ” vrijednost ne dodaje prostor izvan svakog od elemenata. “ obitelj-fontova ' svojstvu je dodijeljena vrijednost ' Arial, Helvetica, sans-serif ”. Popis stilova fontova dan je kako bi se osiguralo da se drugi stilovi moraju primijeniti ako preglednik ne podržava prvi stil. Element stila 'stol'. stol { margina: 0px auto; rub: 1px solid gainsboro; } Element HTML tablice primjenjuje se s CSS svojstvima koja su opisana u nastavku: “ granica ” svojstvo je postavljeno s vrijednošću “ 1px solid gainsboro ” koji predstavlja širinu obruba, stil obruba i boju obruba. “ margina ” svojstvo se ponaša kako je gore navedeno. Element stila 'td'. td { poravnanje teksta: središte; } Element	primjenjuje se sa svojstvom ' poravnanje teksta ' sa vrijednošću ' centar ”. Poravnat će tekst stupca u sredini. Element stila 'gumb'. dugme { boja pozadine: kadetplava; padding: 10px 10px; boja: #ffffff; širina: 150px; } Element gumba korišten u gornjem HTML kodu stiliziran je novim CSS svojstvima koja su objašnjena u nastavku: “ boja pozadine ” određuje boju pozadine elementa. “ podstava ' s vrijednostima dodijeljenim kao ' 10px 10px ” dodaje prostor od 10 px na vrhu i dnu i 10 px na lijevoj i desnoj strani stavki elementa. “ boja ” prilagođava boju fonta elementa. “ širina ” je svojstvo koje prilagođava širinu elementa. Gornji kod će generirati sljedeći rezultat: Do sada smo razgovarali o kursorima koje nudi CSS. U sljedećem odjeljku, primjer će opisati kako stvoriti prilagođeni pokazivač pomoću CSS-a. Prilagođeni kursor CSS Programeri moraju koristiti odgovarajuće kursore za svoje aplikacije. Pokazivači bi trebali biti privlačni kako bi privukli pozornost korisnika. Štoviše, u tu se svrhu može izraditi prilagođeni kursor. Pogledajte primjer u nastavku! Primjer: Kako stvoriti prilagođeni pokazivač pomoću CSS-a? U HTML dodajte dva div elementa. Jedan s razredom ' krug ”, a drugi s razredom “ točka ”. HTML < div razreda = 'krug' > div > < div razreda = 'točka' > div > Idemo naprijed prema odjeljku CSS. Stilski element 'tijela'. tijelo { visina: 100vh; } Element tijela HTML datoteke primjenjuje se sa stilom ' visina ” svojstvo za postavljanje visine elementa. Stil 'krug' div .krug { širina: 20px; visina: 20px; obrub: 2px puna bijela; radijus granice: pedeset % ; } Ispod je objašnjenje CSS svojstava koja se primjenjuju na element div koji ima klasu ' krug ”: “ širina ” Svojstvo prilagođava širinu elementa. “ granica ' svojstvo s vrijednošću navedenom kao ' 2 px puna bijela ” predstavlja širinu obruba, stil obruba i boju. “ granični radijus ” Svojstvo mijenja krug elementa. Stil “point” div .točka { širina: 5px; visina: 5px; boja pozadine: bijela; radijus granice: pedeset % ; } Element div s točkom klase ima različita svojstva koja su opisana u nastavku: “ boja pozadine ” Svojstvo određuje boju pozadine elementa. “ granični radijus ” zaokružuje rubove elementa. Ostala svojstva će raditi isto kao što je objašnjeno. Zadani kod će prikazati sljedeći kursor na web stranici: Kreirali smo pokazivač koristeći HTML i CSS. Sada, u sljedećem odjeljku, JavaScript kod je napisan za dodavanje potrebne funkcije kursoru. JavaScript < skripta > const cursorCircle = document.querySelector ( '.krug' ) ; const cursorPoint = document.querySelector ( '.točka' ) ; const pomakni kursor = ( i ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` Prevedi ( ${mouseX} px, ${mouseY} px ) ` ; cursorPoint.style.transform = ` Prevedi ( ${mouseX} px, ${mouseY} px ) ` ; } window.addEventListener ( 'pomak miša' , pomakni kursor ) skripta > Opis gornjeg JavaScript koda dan je u nastavku: “ ” oznaka je uparena s oznakom koja se koristi za pisanje JavaScript koda. “ konst ” ključna riječ identificira da se ključna riječ const nakon koje slijedi varijabla ne može ponovno dodijeliti. “ document.querySelector('.krug') ” vraća kružni div element koji odgovara navedenom biraču u dokumentu. “ document.querySelector(‘.point’) ” vraća point div element koji odgovara navedenom biraču u dokumentu. “ const pomakni kursor = (e) => ” ova funkcija određuje funkciju kursora. “ e.clientY ” vraća vertikalnu koordinatu kada je pokrenut događaj miša. “ e.clientX ” vraća vodoravnu koordinatu kada se pokrene događaj miša. “ cursorCircle.style.transform ” krug div se primjenjuje s transformacijom stila. “ cursorPoint.style.transform ” točka div se primjenjuje s transformacijom stila. “ prevedi (${mouseX}px, ${mouseY}px) ” vrijednost svojstva transformacije postavlja vodoravne i okomite koordinate. “ window.addEventListener('miš', pomakni kursor) ” metoda slušatelja događaja slušat će kretanje miša. To je dio globalnog objekta prozora. Nakon unosa gornjih blokova koda, pokazivač će se automatski pomaknuti na zaslonu kao što je prikazano u nastavku: To je super! Napravili smo prilagođeni kursor s različitim CSS svojstvima. Zaključak CSS ' kursor ” Svojstvo ima brojne vrijednosti koje označavaju različite stilove kursora. Međutim, korištenjem HTML elemenata i CSS svojstava, možemo napraviti prilagođene pokazivače. Zatim se implementira JavaScript kod za aktiviranje njegove funkcionalnosti. Ova je studija na praktičnom primjeru pokazala kako stvoriti prilagođene CSS kursore. ostalo Kategorija Malina Pi Ethernet Ostalo Nano Zum Cimet Recenzije Zorinos Radio Minecraft Ssh Openvas Kompresija Laravel Zračna Pukotina Softver Za Produktivnost Ureda Čizma Pozivi Sustava Sysctl Umrežavanje Gpu Gimp Pleks Uefi Lučki Radnik Vatrozid Žičana Udica Sinnologija Pdf Ethereum Os Papiga Uzvišen Selinux Hiper-V Telefon Kodirati Gnom Poslastica Miš Nmap Metasploit Bujica Tableta Piharm Kovrča Gdje Gcc Fontova Ssl Nvidia Slike Usb Lignje Pariti Vlc Media Player Dns Bitcoin Tipkovnica Inkscape Šifriranje Fedora Owncloud Skener Atom Crveni Šešir Teamviewer Skype Vpn Xfce Bilježnica Jupyter Nfs Blog Lvm Suse Media Playeri Posix Pare Jenkins Vlast Oracle Linux Netstat M2 Bluetooth Ssd Zahvat Gentoo Odiseja Audio Cpu Tenzorski Tok Autodesk Lubuntu Llvm Windows Microsoft Edge (Naslijeđeni) Internet Explorer Ured ostalo web kamera media playeri cPanel haproxy čizma uzvišen Ubuntu 24.04 nextcloud vrlina usb-prolaz #sigurno pokretanje prolaz uređaja SDN Popularni Postovi Kako koristiti vrstu podataka datuma u SQLiteu? ostalo Kako riješiti problem s Android GPS-om koji ne radi ostalo Kako generirati nasumični UUID u JavaScriptu? ostalo Kako koristiti svojstvo CSS pointer-events ostalo Kako sakriti JavaScript kod u prikazu izvornog koda ostalo Omogućite skrivenu stranicu 'Opcije dijeljenja' u aplikaciji Postavke sustava Windows 10 - Winhelponline Windows Koji se Tailwind pomoćni programi koriste za kontrolu postavljanja pozicioniranih elemenata ostalo Kako dodati vrijednosti objektu u JavaScriptu ostalo Kako izvesti virtualne strojeve VMware Workstation Pro u OVF/OVA formatu ostalo Što je AWS Application Migration Service? ostalo Čemu služi SQLiteStudio? ostalo Što rade Discord modovi ostalo Sekvencijalni logički sklopovi i SR flip flop ostalo Kako pokrenuti više naredbi u istom Cron poslu ostalo Kako koristiti PostrgreSQL Crosstab modul ostalo Kako stvoriti SQLite bazu podataka i tablicu u Node.js? ostalo Razumijevanje Kirchhoffovog zakona napona i očuvanja energije: Opsežan vodič ostalo Koja je razlika između matrice i polja u MATLAB-u? ostalo MongoDB Sortiraj rezultate upita ostalo Kako provjeriti verziju Network Managera na Debianu ostalo

. Druge

oznake za popunjavanje stupaca podacima.

Druga

oznaka predstavlja elemente gumba koji se primjenjuju s CSS-om “ kursor ” svojstvo s različitim vrijednostima.

HTML kôd za gornji scenarij dan je u nastavku:

< stol >
< tr >
< th stil = 'width: 200px;' > css selektor kursora th >
< th stil = 'width: 200px;' > stil kursora th >
tr >
< tr >
< td > kursor: pokazivač td >
< td >< dugme stil = 'kursor: pokazivač;' > pokazivač dugme > td >
tr >
< tr >
< td > kursor: napredak td >
< td >< dugme stil = 'kursor: napredak;' > napredak dugme > td >
tr >
< tr >
< td > kursor: nije dopušteno td >
< td >< dugme stil = 'kursor: nije dopušteno;' > nije dozvoljeno dugme > td >
tr >
< tr >
< td > kursor: nema td >
< td >< dugme stil = 'kursor: nema;' > nikakav dugme > td >
tr >
< tr >
< td > kursor: pomakni td >
< td >< dugme stil = 'kursor: premjesti;' > potez dugme > td >
tr >
< tr >
< td > kursor: zgrabi td >
< td >< dugme stil = 'kursor: zgrabi;' > zgrabiti dugme > td >
tr >
< tr >
< td > kursor: kopiraj td >
< td >< dugme stil = 'kursor: kopiraj;' > kopirati dugme > td >
tr >
< tr >
< td > kursor: promijeni veličinu u boji td >
< td >< dugme stil = 'kursor: promijeni veličinu u stupcu;' > mijenjanje veličine u boji dugme > td >
tr >
< tr >
< td > kursor: promjena veličine reda td >
< td >< dugme stil = 'kursor: promjena veličine reda;' > promjena veličine reda dugme > td >
tr >
< tr >
< td > kursor: tekst td >
< td >< dugme stil = 'kursor: tekst;' > tekst dugme > td >
tr >
stol >

Gornji kod će generirati sljedeći rezultat:

U sljedećem odjeljku primijenit ćemo različite stilove na HTML elemente.

Stilizirajte 'sve' elemente

* {
padding: 0 ;
margina: 0 ;
obitelj fontova: Arial, Helvetica, sans-serif;
}

Svi HTML elementi primjenjuju se s CSS stilovima koji su objašnjeni u nastavku:

- “ podstava ' vlasništvo s ' 0 ” vrijednost ne uključuje razmak oko sadržaja elementa.
- “ margina ' vlasništvo s ' 0 ” vrijednost ne dodaje prostor izvan svakog od elemenata.
- “ obitelj-fontova ' svojstvu je dodijeljena vrijednost ' Arial, Helvetica, sans-serif ”. Popis stilova fontova dan je kako bi se osiguralo da se drugi stilovi moraju primijeniti ako preglednik ne podržava prvi stil.

Element stila 'stol'.

stol {
margina: 0px auto;
rub: 1px solid gainsboro;
}

Element HTML tablice primjenjuje se s CSS svojstvima koja su opisana u nastavku:

- “ granica ” svojstvo je postavljeno s vrijednošću “ 1px solid gainsboro ” koji predstavlja širinu obruba, stil obruba i boju obruba.

“ margina ” svojstvo se ponaša kako je gore navedeno.

Element stila 'td'.

td {
poravnanje teksta: središte;
}

Element

primjenjuje se sa svojstvom ' poravnanje teksta ' sa vrijednošću ' centar ”. Poravnat će tekst stupca u sredini.

Element stila 'gumb'.

dugme {
boja pozadine: kadetplava;
padding: 10px 10px;
boja: #ffffff;
širina: 150px;
}

Element gumba korišten u gornjem HTML kodu stiliziran je novim CSS svojstvima koja su objašnjena u nastavku:

- “ boja pozadine ” određuje boju pozadine elementa.
- “ podstava ' s vrijednostima dodijeljenim kao ' 10px 10px ” dodaje prostor od 10 px na vrhu i dnu i 10 px na lijevoj i desnoj strani stavki elementa.
- “ boja ” prilagođava boju fonta elementa.
- “ širina ” je svojstvo koje prilagođava širinu elementa.

Gornji kod će generirati sljedeći rezultat:

Do sada smo razgovarali o kursorima koje nudi CSS. U sljedećem odjeljku, primjer će opisati kako stvoriti prilagođeni pokazivač pomoću CSS-a.

Prilagođeni kursor CSS

Programeri moraju koristiti odgovarajuće kursore za svoje aplikacije. Pokazivači bi trebali biti privlačni kako bi privukli pozornost korisnika. Štoviše, u tu se svrhu može izraditi prilagođeni kursor.

Pogledajte primjer u nastavku!

Primjer: Kako stvoriti prilagođeni pokazivač pomoću CSS-a?

U HTML dodajte dva div elementa. Jedan s razredom ' krug ”, a drugi s razredom “ točka ”.

HTML

< div razreda = 'krug' > div >
< div razreda = 'točka' > div >

Idemo naprijed prema odjeljku CSS.

Stilski element 'tijela'.

tijelo {
visina: 100vh;
}

Element tijela HTML datoteke primjenjuje se sa stilom ' visina ” svojstvo za postavljanje visine elementa.

Stil 'krug' div

.krug {
širina: 20px;
visina: 20px;
obrub: 2px puna bijela;
radijus granice: pedeset % ;
}

Ispod je objašnjenje CSS svojstava koja se primjenjuju na element div koji ima klasu ' krug ”:

- “ širina ” Svojstvo prilagođava širinu elementa.
- “ granica ' svojstvo s vrijednošću navedenom kao ' 2 px puna bijela ” predstavlja širinu obruba, stil obruba i boju.
- “ granični radijus ” Svojstvo mijenja krug elementa.

Stil “point” div

.točka {
širina: 5px;
visina: 5px;
boja pozadine: bijela;
radijus granice: pedeset % ;
}

Element div s točkom klase ima različita svojstva koja su opisana u nastavku:

- “ boja pozadine ” Svojstvo određuje boju pozadine elementa.
- “ granični radijus ” zaokružuje rubove elementa.
- Ostala svojstva će raditi isto kao što je objašnjeno.

Zadani kod će prikazati sljedeći kursor na web stranici:

Kreirali smo pokazivač koristeći HTML i CSS. Sada, u sljedećem odjeljku, JavaScript kod je napisan za dodavanje potrebne funkcije kursoru.

JavaScript

< skripta >
const cursorCircle = document.querySelector ( '.krug' ) ;
const cursorPoint = document.querySelector ( '.točka' ) ;
const pomakni kursor = ( i ) = > {
const mouseY = e.clientY;
const mouseX = e.clientX;

cursorCircle.style.transform = ` Prevedi ( ${mouseX} px, ${mouseY} px ) ` ;
cursorPoint.style.transform = ` Prevedi ( ${mouseX} px, ${mouseY} px ) ` ;
}
window.addEventListener ( 'pomak miša' , pomakni kursor )
skripta >

Opis gornjeg JavaScript koda dan je u nastavku:

- “ ” oznaka je uparena s oznakom koja se koristi za pisanje JavaScript koda.
- “ konst ” ključna riječ identificira da se ključna riječ const nakon koje slijedi varijabla ne može ponovno dodijeliti.
- “ document.querySelector('.krug') ” vraća kružni div element koji odgovara navedenom biraču u dokumentu.
- “ document.querySelector(‘.point’) ” vraća point div element koji odgovara navedenom biraču u dokumentu.
- “ const pomakni kursor = (e) => ” ova funkcija određuje funkciju kursora.
- “ e.clientY ” vraća vertikalnu koordinatu kada je pokrenut događaj miša.
- “ e.clientX ” vraća vodoravnu koordinatu kada se pokrene događaj miša.
- “ cursorCircle.style.transform ” krug div se primjenjuje s transformacijom stila.
- “ cursorPoint.style.transform ” točka div se primjenjuje s transformacijom stila.
- “ prevedi (${mouseX}px, ${mouseY}px) ” vrijednost svojstva transformacije postavlja vodoravne i okomite koordinate.
- “ window.addEventListener('miš', pomakni kursor) ” metoda slušatelja događaja slušat će kretanje miša. To je dio globalnog objekta prozora.

Nakon unosa gornjih blokova koda, pokazivač će se automatski pomaknuti na zaslonu kao što je prikazano u nastavku:

To je super! Napravili smo prilagođeni kursor s različitim CSS svojstvima.

Zaključak

CSS ' kursor ” Svojstvo ima brojne vrijednosti koje označavaju različite stilove kursora. Međutim, korištenjem HTML elemenata i CSS svojstava, možemo napraviti prilagođene pokazivače. Zatim se implementira JavaScript kod za aktiviranje njegove funkcionalnosti. Ova je studija na praktičnom primjeru pokazala kako stvoriti prilagođene CSS kursore.

Prilagođeni CSS kursor

CSS kursor

Prilagođeni kursor CSS

Zaključak

Kategorija

Popularni Postovi