Lekce 4 - Úpravy a nastavení kurzorů v CSS3

V minulé lekci, Změny vlastností posuvníků (scrollbarů) v CSS3, jsme si ukázali, jak v CSS změnit velikost, barvu, nebo dokonce i tvar posuvníků na stránce.

Vítejte u lekce, ve které si ukážeme, jak v CSS3 nastavit vlastní vzhled kurzoru myši a jaké všechny typy existují.

Co se v této lekci naučíme vytvořit (dejte kurzor na oranžový obdelník)?

Kurzory obecně

Ze základu se nám vzhled kurzoru mění na základě nastavení nebo funkce elementu, který kurzorem překryjeme. Změnit toto nastavení můžeme tak, že k třídě elementu přidáme vlastnost cursor:, v níž nastavíme požadovaný atribut. Zde je výčet všech 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á část z tohoto seznamu se už používá pouze vyjímečně, ale je dobré vědět, že existují. Dále se můžeme ještě setkat s kurzory znázorňujícími změnu velikosti okna. Jejich názvy jsou logicky odvozeny podle anglických názvů světových stran (North, West, East, South) a jejich kombinaci:

• 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šechna jednotlivá nastavení si můžeme vyzkoušet níže, stačí váš kurzor umístit na příslušný boxík:

Na mobilní verzi se vám kurzor pravděpodobně neukáže.

Při vytváření stránek je ale lepší základní vzhledy kurzorů na určitých elementech nepřenastavovat, zbytečně to mate uživatele.

Změny kurzoru v CSS

Na některých specifických webových stránkách se dnes můžeme setkat s kurzory myši, které vypadají jinak než ty základní, co se obvykle používají. Nastavit si něco takového i na svoje vlastní stránky je poměrně jednoduché. Ukážeme si tedy, jak místo základního vzhledu kurzoru nastavit obrázek co vypadá jako kurzor nový. Vytvoříme si jednoduchý HTML soubor s jedním elementem a třídou box:

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

K tomu přidáme CSS soubor s nastavením naší třídy:

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

Nezapomeňte si CSS soubor do HTML stránky importovat nebo použijte interní styly:

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

Měli bychom mít něco takového:

Teď už stačí pouze nastavit, aby se při překrytí našeho obdélníku kurzor změnil. Je třeba, abychom kurzor měli někde uložený lokálně, aby se nestalo, že webová stránka bude časem nedostupná nebo soubor odstraní. Kurzor si můžete stáhnout níže:

Nyní si nastavme cestu správně ke kurzoru (cesta k souboru se může u vás lišit):

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

Použít se dá jakýkoliv obrázek. Jediné, na co si člověk musí dát pozor, je jeho velikost. Některé prohlížeče a operační systémy mají totiž pro tyto změny kurzorů přednastavené limity. Nejlepší je používat obrázky s velikostí 32x32 pixelů, ty by měly fungovat ve velké většině případů. Pokud nastavíte obrázek větší než stanovený limit, prohlížeč ho bude automaticky ignorovat. Velká většina prohlížečů také nyní nepodporuje v rámci CSS animované kurzory, takže soubory s příponou gif nebo ani se budou ukazovat buď jako obyčejný statický obrázek nebo pro jistotu nebudou fungovat vůbec. Náš příklad bude po nastavení CSS vypadat takto:

Pokud vám ale obrázek nestačí a chcete mít kurzor nějakým způsobem animovaný, dá se toho docílit za pomocí Javascript funkcí. Celý kód si zde vysvětlovat nebudeme. Ve zkratce to funguje tím způsobem, že funkce zjistí pozici kurzoru a kolem něj vytvoří libovolný tvar nastavený podle CSS třídy. V našem případě to budou dva jednoduché kruhy. Ty se poté vykreslují stále dokola tak rychle, že při pohybu kurzorem to vypadá jako by šlo o vzhled kurzoru samotného:

Kód je poměrně složitý a nad rámec tohoto kurzu, patří to spíše 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>

Patří k tomu také 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;
}

Představivosti se meze opravdu nekladou, ale pamatujte na to, že čím složitější animace, tím pomalejší načítání stránky. Autor tohoto skriptu je seattleowl a můžete se podívat na jeho repozitář na GitHubu.

Pokud není něco jasné, všechny zobrazené ukázky si můžete stáhnout níže

V další lekci, Pozadí elementů: obrázek, barva, ohraničení v CSS3, se naučíme, jak nastavit elementům jednoduchou barvu nebo obrázek do pozadí.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.