9. diel - Animácie efektov pri interakcii s elementmi (tooltip)

V predchádzajúcej lekcii, Animácie zobrazovanie textu pomocou CSS3 , sme si ukázali, ako fungujú animácie elementov na stránke všeobecne, napríklad jednoduchá zmena farby, pohybu a alebo veľkosti.

Vitajte u ďalšej lekcie ohľadom animácií v CSS3, v ktorej si ukážeme skôr efekty, než animácie ako také.

Čo sa v tejto lekcii naučíme vytvoriť:

Pre zobrazenie efektu je potrebné nabehnúť kurzorom na text.

Hover effect

Základom pre dnešné lekciu je teda hover efekt. Ten sa prejaví, ak kurzorom myši prekryjeme určitý element na stránke. V praxi to znamená, že sa určitému elementu (možno aj inému, než na ktorý prejdeme) zmení vlastnosti elementu. Nastavíme ho pomocou pseudo-elementu :hover pri nastavení triedy. Ak máme teda triedu .class01, hover jej nastavíme vytvorením novej, rovnomennej triedy s pseudo-elementom .class01:hover. V kóde CSS to vyzerá potom nejako 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>

Teraz, keď prejdeme kurzorom myši na element, prehodí sa jeho farba pozadia a textu z modrej na červenú:

Vďaka tomu potom môžeme vytvárať tzv. Tooltipy (popisky či pomocníka).

Tooltipy

Tooltip je špecifický efekt, kedy sa pri prekrytí kurzorom myši zobrazia ďalšie element, väčšinou s dodatočnými informáciami. Môžu sa zobrazovať kdekoľvek, vedľa textu, nad ním alebo pod ním. Môžu byť tiež na úplne opačnom konci stránky, čo by ale trochu nemalo zmysel. Je mnoho spôsobov, ako tieto okienka s textom vytvoriť. Pri vytváraní by však mal človek počítať s tým, ako môže zobrazené okienko ovplyvniť ďalšie elementy na stránke (posunutie atď.). Napíšeme teda nejaký text a vyberieme slovo, u ktorého chceme zobraziť tooltip:

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

Zatiaľ je to len obyčajný text s odkazom:

Teraz medzi tagom <a></a> vložíme za slovo TU tag <span></span>, ktorému pridáme triedu .classic a napíšeme do neho text, ktorý chceme potom zobrazovať v okienku ako 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, sprvu používaný pre zvýraznenie slov v texte. Funkčnosťou je rovnaký ako <div> tag, iba s tým rozdielom, že na stránke nezaberá celý blok, ale len jeho časť, rovnako veľkú ako sú rozmery textu.

CSS:

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

V triede .classic sme teda nastaviť vnútorné odsadenie textu padding: 0.8em 1em;, Aby bol čo najlepšie čitateľný, a okraj border: 1px solid black;, Aby boli jasne vidieť rozmery nášho tooltip okienka:

Teraz ho posunieme tam, kde chceme aby sa 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;
}

Teraz máme teda toto:

Trieda .tooltip slúži len pre estetickú úpravu textu. V našom prípade je dôležitá trieda .tooltip span. Tu sme nastavili, aby okraje boli zaoblené (border-radius: 5px 5px;), okienko malo pod sebou ilúziu tieňa (box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);) a vždy sa zobrazovalo nad / pred ostatnými elementy z pohľadu pozorovateľa pomocou z-index: 99;. Potom už sme ho iba posunuli pomocou vlastnosti left: 1em; doľava a vlastnosti top: 2em; nadol (pre to je potrebné nastaviť tiež position: absolute;). Zobrazenie display: inline; máme kvôli ďalšiemu kroku a šírka width: 250px; sa často musia nastaviť, inak by nefungovalo posúvanie elementu.

V tejto chvíli vieme, ako to bude vyzerať, keď na slovo TU nabehne niekto kurzorom. To znamená, že triedu .tooltip span bude z pohľadu CSS s pseudo-elementom :hover - .tooltip:hover span. Ďalej pridáme znova triedu .tooltip span, v ktorej len napíšeme, aby sa 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 prehliadači budeme mať tooltip hotový:

Ďalej už je to všetko len o úprave farieb alebo tvaru. Pokiaľ nie je niečo jasné, všetky zobrazené ukážky si môžete stiahnuť v prílohe tejto lekcie a svoju chybu opraviť:)

V ďalšej lekcii, Priebehy animácií elementov , si ukážeme, ako vyzerajú prednastavené priebehy animácií v CSS a urobíme si aj vlastné.

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