Lekce 9 - Interakce s elementy v CSS3

V předchozí lekci, Animace zobrazování textu pomocí CSS3, jsme si ukázali, jak fungují animace elementů na stránce obecně, například jednoduchá změna barvy, pohybu a nebo velikosti.

Vítejte u další lekce ohledně animací v CSS3, ve které si ukážeme spíše efekty, než animace jako takové.

Co se v této lekci naučíme vytvořit:

Pro zobrazení efektu je nutné najet kurzorem na text.

Hover effect

Základem pro dnešní lekci je tedy hover efekt. Ten se projeví, pokud kurzorem myši překryjeme určitý element na stránce. V praxi to znamená, že se určitému elementu (lze i jinému, než na který najedeme) změní vlastnosti elementu. Nastavíme ho pomocí pseudo-elementu :hover při nastavení třídy. Pokud máme tedy třídu .class01, hover jí nastavíme vytvořením nové, stejnojmenné třídy s pseudo-elementem .class01:hover. V kódu CSS to vypadá potom nějak takto:

.class01 {
 background-color: blue;
 color: red;
}

.class01:hover {
 background-color: red;
 color: blue;
}

HTML kód bude jednoduchý:

<div class="class01">
  Text co mění barvu.
</div>

Nyní, když najedeme kurzorem myši na element, prohodí se jeho barva pozadí a textu z modré na červenou:

Díky tomu potom můžeme vytvářet tzv. tooltipy (popisky či nápovědy).

Tooltipy

Tooltip je specifický efekt, kdy se při překrytí kurzorem myši zobrazí další element, většinou s dodatečnými informacemi. Mohou se zobrazovat kdekoliv, vedle textu, nad ním nebo pod ním. Mohou být také na úplně opačném konci stránky, což by ale trochu postrádalo smysl. Je mnoho způsobů, jak tyto okénka s textem vytvořit. Při vytváření by však měl člověk počítat s tím, jak může zobrazené okénko ovlivnit další elementy na stránce (posunutí atd.). Napíšeme tedy nějaký text a vybereme slovo, u kterého chceme zobrazit tooltip:

<p>Obyčejný Tooltip - <a class="tooltip">ZDE</a></p>

Zatím je to jen obyčejný text s odkazem:

Nyní mezi tagem <a></a> vložíme za slovo ZDE tag <span></span>, kterému přidáme třídu .classic a napíšeme do něj text, který chceme potom zobrazovat v okénku jako tooltip:

<p>Obyčejný Tooltip - <a class="tooltip">ZDE<span class="classic">Obyčejný rámeček bez efektů a barev.</span></a></p>

<span></span> je párový tag, zprvu používaný pro zvýraznění slov v textu. Funkčností je stejný jako <div> tag, pouze s tím rozdílem, že na stránce nezabírá celý blok, ale jenom jeho část, stejně velkou jako jsou rozměry textu.

CSS:

.classic {
    padding: 0.8em 1em;
    border: 1px solid black;
}

V třídě .classic jsme tedy nastavili vnitřní odsazení textu padding: 0.8em 1em;, aby byl co nejlépe čitelný, a okraj border: 1px solid black;, aby byly jasně vidět rozměry našeho tooltip okénka:

Nyní ho posuneme tam, kde chceme aby se zobrazoval:

.tooltip {
    color: black;
    outline: none;
    text-decoration: none;
    position: relative;
}

.tooltip span {
    border-radius: 5px 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 1em;
    top: 2em;
    z-index: 99;
    display: inline;
    width: 250px;
}

Nyní máme tedy toto:

Třída .tooltip slouží pouze pro estetickou úpravu textu. V našem případě je důležitá třída .tooltip span. Zde jsme nastavili, aby okraje byly zaoblené (border-radius: 5px 5px;), okénko mělo pod sebou iluzi stínu (box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);) a vždy se zobrazovalo nad/před ostatními elementy z pohledu pozorovatele pomocí z-index: 99;. Potom už jsme ho pouze posunuli pomocí vlastnosti left: 1em; doleva a vlastnosti top: 2em; dolů (pro to je potřeba nastavit také position: absolute;). Zobrazení display: inline; máme kvůli dalšímu kroku a šířka width: 250px; se často musí nastavit, jinak by nefungovalo posouvání elementu.

V tuto chvíli víme, jak to bude vypadat, když na slovo ZDE najede někdo kurzorem. To znamená, že třídu .tooltip span bude z pohledu CSS s pseudo-elementem :hover - .tooltip:hover span. Dále přidáme znovu třídu .tooltip span, v níž pouze napíšeme, aby se daný element nezobrazoval (display: none;):

.tooltip span {
    display:none;
    position: absolute;
}

.tooltip:hover span {
    border-radius: 5px 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 1em;
    top: 2em;
    z-index: 99;
    width: 250px;
    display: inline;
}

V prohlížeči budeme mít tooltip hotov:

Dále už je to všechno pouze o úpravě barev nebo tvaru. Pokud není něco jasné, všechny zobrazené ukázky si můžete stáhnout v příloze této lekce a svou chybu opravit

V další lekci, Průběhy animací elementů v CSS3, si ukážeme, jak vypadají přednastavené průběhy animací v CSS a uděláme si i vlastní.

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š.