September discount week
Tento týden až 80% sleva na e-learning týkající se jazyka C
50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 9 - Animace efektů při interakci s elementy (tooltip)

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:

Efekty hover & Tooltip
localhost

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:

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

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:

Tooltip
localhost

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:

Tooltip
localhost

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:

Tooltip
localhost

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:

Tooltip
localhost

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ů, si ukážeme, jak vypadají přednastavené průběhy animací v CSS a uděláme si i vlastní.


 

Stáhnout

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

 

Předchozí článek
Animace zobrazování textu pomocí CSS3
Všechny články v sekci
CSS3
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (3)

 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!