Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy
Discount week - May - 50

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

V minulé lekci, Změny vlastností posuvníků (scrollbarů), 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)?

Změna kurzoru
localhost

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:

Your page
localhost

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Změna kurzoru
localhost

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:

Změna kurzoru
localhost

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:

Změna kurzoru
localhost

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 CSS 3, 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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 9x (7.35 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS3

 

Předchozí článek
Změny vlastností posuvníků (scrollbarů)
Všechny články v sekci
CSS3 od A do Z
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (4)

 

 

Komentáře

Avatar
Petr Laštovička
Super redaktor
Avatar
Petr Laštovička:7. února 13:46

Ten kód v javascriptu je poměrně komplikovaný a je nad rámec kurzu o CSS.
Zobrazit kruh místo kurzoru lze jednoduše:

const ring = document.createElement("div")
ring.id = "pointer-ring"
const size = 15;
ring.style.padding = size + "px"
document.body.appendChild(ring)

window.onmousemove = (mouse) => {
    ring.style.transform = `translate(${mouse.clientX - size}px, ${mouse.clientY - size}px)`
}
 
Odpovědět
7. února 13:46
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.