Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

15. diel - Úpravy a nastavenia kurzorov v CSS3

V minulej lekcii, Zmeny vlastností posuvníkov (scrollbar) , sme si ukázali, ako v CSS zmeniť veľkosť, farbu, alebo dokonca aj tvar posuvníkov na stránke.

Vitajte u lekcie, v ktorej si ukážeme, ako v CSS3 nastaviť vlastný vzhľad kurzora myši a aké všetky typy existujú.

Čo sa v tejto lekcii naučíme vytvoriť (dajte kurzor na oranžový obdĺžnik)?

Změna kurzoru
localhost

Kurzory všeobecne

Zo základu sa nám vzhľad kurzora mení na základe nastavenia alebo funkcie elementu, ktorý kurzorom prekryjeme. Zmeniť toto nastavenie môžeme tak, že k triede elementu pridáme vlastnosť cursor:, v ktorej nastavíme požadovaný atribút. Tu je výpočet všetkých možných základných nastavení:

  • auto
  • default
  • none
  • context-menu
  • help
  • pointer
  • progress
  • wait
  • cell
  • crosshair
  • text
  • vertical-text
  • alias
  • copy
  • move
  • no-drop
  • not-allowed
  • grab
  • grabbing
  • url (adresa obrázku)
  • wait
  • zoom-in
  • zoom-out
  • all-scroll
  • col-resize
  • row-resize

Značná časť z tohto zoznamu sa už používa len výnimočne, ale je dobré vedieť, že existujú. Ďalej sa môžeme ešte stretnúť s kurzory znázorňujúcimi zmenu veľkosti okna. Ich názvy sú logicky odvodené podľa anglických názvov svetových strán (N Orth, W est, E ast, S outh) a ich kombináciu:

  • n-resize
  • e-resize
  • s-resize
  • w-resize
  • ns-resize
  • ew-resize
  • ne-resize
  • nw-resize
  • se-resize
  • sw-resize
  • nesw-resize
  • nwse-resize

Všetky jednotlivé nastavenia si môžeme vyskúšať nižšie, stačí váš kurzor umiestniť na príslušný boxík:

Tvoja stránka
localhost

Na mobilnej verzii sa vám kurzor pravdepodobne neukáže.

Pri vytváraní stránok je ale lepšie základné vzhľady kurzorov na určitých elementoch nepřenastavovat, zbytočne to mate užívateľa.

Zmeny kurzora v CSS

Na niektorých špecifických webových stránkach sa dnes môžeme stretnúť s kurzory myši, ktoré vyzerajú inak ako tie základné, čo sa zvyčajne používajú. Nastaviť si niečo také aj na svoje vlastné stránky je pomerne jednoduché. Ukážeme si teda, ako miesto základného vzhľadu kurzora nastaviť obrázok čo vyzerá ako kurzor nový. Vytvoríme si jednoduchý HTML súbor s jedným elementom a triedou box:

<div class="box"></div>

K tomu pridáme CSS súbor s nastavením našej triedy:

.box {
  width: 350px;
  min-height: 55vh;
  background-color: #F90;
}

Nezabudnite si CSS súbor do HTML stránky importovať alebo použite interný štýly:

<link rel="stylesheet" href="main.css" type="text/css">

Mali by sme mať niečo takéto:

Změna kurzoru
localhost

Teraz už stačí len nastaviť, aby sa pri prekrytí nášho obdĺžnika kurzor zmenil. Je potrebné, aby sme kurzor mali niekde uložený lokálne, aby sa nestalo, že webová stránka bude časom nedostupná alebo súbor odstráni. Kurzor si môžete stiahnuť nižšie:

CSS3

Teraz si nastavme cestu správne ku kurzora (cesta k súboru sa môže u vás líšiť):

.box:hover {
 cursor: url('mycursor.gif'), auto;
}

Použiť sa dá akýkoľvek obrázok. Jediné, na čo si človek musí dať pozor, je jeho veľkosť. Niektoré prehliadače a operačné systémy majú totiž pre tieto zmeny kurzorov prednastavené limity. Najlepšie je používať obrázky s veľkosťou 32x32 pixelov, tie by mali fungovať vo veľkej väčšine prípadov. Ak nastavíte obrázok väčší ako stanovený limit, prehliadač ho bude automaticky ignorovať. Veľká väčšina prehliadačov tiež teraz nepodporuje v rámci CSS animované kurzory, takže súbory s príponou gif alebo ani sa budú ukazovať buď ako obyčajný statický obrázok alebo pre istotu nebudú fungovať vôbec. Náš príklad bude po nastavení CSS vyzerať takto:

Změna kurzoru
localhost

Pokiaľ vám ale obrázok nestačí a chcete mať kurzor nejakým spôsobom animovaný, dá sa to docieliť za pomocou Javascript funkcií. Celý kód si tu vysvetľovať nebudeme. V skratke to funguje tým spôsobom, že funkcia zistí pozíciu kurzora a okolo neho vytvoria ľubovoľný tvar nastavený podľa CSS triedy. V našom prípade to budú dva jednoduché kruhy. Tie sa potom vykresľujú stále dookola tak rýchlo, že pri pohybe kurzorom to vyzerá ako by išlo o vzhľad kurzora samotného:

Změna kurzoru
localhost

Kód je pomerne zložitý a nad rámec tohto kurzu, patrí to skôr do kurzu JavaScriptu:

<script>
const pointer = document.createElement("div")
pointer.id = "pointer-dot"
const ring = document.createElement("div")
ring.id = "pointer-ring"
document.body.insertBefore(pointer, document.body.children[0])
document.body.insertBefore(ring, document.body.children[0])

let mouseX = -100
let mouseY = -100
let ringX = -100
let ringY = -100
let isHover = false
let mouseDown = false
const init_pointer = (options) => {

    window.onmousemove = (mouse) => {
        mouseX = mouse.clientX
        mouseY = mouse.clientY
    }

    window.onmousedown = (mouse) => {
        mouseDown = true
    }

    window.onmouseup = (mouse) => {
        mouseDown = false
    }

    const trace = (a, b, n) => {
        return (1 - n) * a + n * b;
    }
    window["trace"] = trace

    const getOption = (option) => {
        let defaultObj = {
            pointerColor: "#750c7e",
            ringSize: 15,
            ringClickSize: (options["ringSize"] || 15) - 5,
        }
        if (options[option] == undefined) {
            return defaultObj[option]
        } else {
            return options[option]
        }
    }

    const render = () => {
        ringX = trace(ringX, mouseX, 0.2)
        ringY = trace(ringY, mouseY, 0.2)

        if (document.querySelector(".p-action-click:hover")) {
            pointer.style.borderColor = getOption("pointerColor")
            isHover = true
        } else {
            pointer.style.borderColor = "red"
            isHover = false
        }
        ring.style.borderColor = getOption("pointerColor")
        if (mouseDown) {
            ring.style.padding = getOption("ringClickSize") + "px"
        } else {
            ring.style.padding = getOption("ringSize") + "px"
        }

        pointer.style.transform = `translate(${mouseX}px, ${mouseY}px)`
        ring.style.transform = `translate(${ringX - (mouseDown ? getOption("ringClickSize") : getOption("ringSize"))}px, ${ringY - (mouseDown ? getOption("ringClickSize") : getOption("ringSize"))}px)`

        requestAnimationFrame(render)
    }
    requestAnimationFrame(render)
}</script>
<script>
 init_pointer({
    })
</script>

Patrí k tomu aj CSS:

#pointer-dot {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 2.5px solid red;
    position: fixed;
    border-radius: 4px;
    z-index: 101;
    pointer-events: none;
    transition: border-color 0.5s;
}

#pointer-ring {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    padding: 15px;
    border: 2px solid #750c7e;
    position: fixed;
    border-radius: 100px;
    z-index: 102;
    pointer-events: none;
}

html {
    cursor: none !important;
}

a {
    cursor: none !important;
}

Predstavivosti sa medze naozaj nekladú, ale pamätajte na to, že čím zložitejšie animácie, tým pomalší načítania stránky. Autor tohto skriptu je seattleowl a môžete sa pozrieť na jeho repozitár na GitHub.

Pokiaľ nie je niečo jasné, všetky zobrazené ukážky si môžete stiahnuť nižšie:)

V ďalšej lekcii, Pozadie elementov - obrázok, farba, ohraničenie , sa naučíme, ako nastaviť elementom jednoduchú farbu alebo obrázok do pozadia.


 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 28x (7.35 kB)
Aplikácia je vrátane zdrojových kódov v jazyku CSS3

 

Predchádzajúci článok
Zmeny vlastností posuvníkov (scrollbar)
Všetky články v sekcii
CSS3
Preskočiť článok
(neodporúčame)
Pozadie elementov - obrázok, farba, ohraničenie
Článok pre vás napísal Filip Opluštil
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Aktivity