CSS3 - Animowany Tooltip

Przyszedł czas na utworzenie czegoś bardziej zaawansowanego, czegoś co będzie wymagało wykorzystania całej wiedzy, jaką do tej pory zdobyliśmy we wszystkich działach tego kursu CSS.

W tej części kursu CSS będziemy dążyć do utworzenia układu elementów HTML, który został zaprezentowany poniżej.

W dziale drugim utworzyliśmy pionowe menu, które rozbudujemy w tej części kursu CSS. Dodamy do niego Tooltip, z którym mieliśmy okazję zapoznać się w poprzedniej części tego działu. Tym razem nasz Tooltip będzie animowany, ponieważ będzie zawierał w sobie animację CSS3.

Menu, które utworzyliśmy w dziale drugim, zostało zaprezentowane poniżej.

Kod pionowego menu CSS, które zostało umieszczone powyżej, możesz znaleźć w ostatniej części działu drugiego. Jeżeli nadal nie wiesz jak utworzyć układ elementów HTML, który przypomina pionowe menu, to musisz zapoznać się z działem drugim tego kursu CSS, ponieważ w tej części działu czwartego nie będę ponownie przypominał, w jaki sposób utworzyć pionowe menu CSS.

Rozbudowę naszego pionowego menu CSS będziemy przeprowadzali w kilku etapach, w których będziemy skupiać się na poszczególnych rzeczach, jakie będziemy musieli zrobić, aby otrzymać końcowy efekt, który został zaprezentowany na początku tej części kursu CSS.

Na początek zmienimy nieco kod, który został zaprezentowany w dziale drugim, a mianowicie sprawimy, aby tło gradientowe było umieszczone w elemencie li, a nie w elemencie a, ponieważ do elementu a będziemy chcieli dodać nowe tło, które będzie przedstawiało strzałkę, która pojawi się i zmieni swoje położenie, w momencie gdy najedziemy kursorem myszki na element a.

Wspomniana strzałka została umieszczona poniżej:

  • strzałka

Kod HTML, od którego zaczniemy tą część kursu CSS, został umieszczony pod spodem oraz zostały w nim zaznaczone zmiany względem ostatniej części działu drugiego.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* wygląd elementu - ul */
      ul {
        list-style-type:none;
        margin:0;
        padding:0;
        border:1px solid #CCC;
        width:250px;
        box-shadow:0 6px 6px -6px #666;
      }

      /* wygląd elementów - li */
      ul li {
        border-top:1px solid #CCC;
        background-color:#EEE;
        background-repeat:repeat-x;
        background-image:url('http://webkod.pl/images/tooltip.png');
        background-image:radial-gradient(ellipse at bottom, #FFF 0%, #DDD 100%);
      }

      /* wygląd pierwszego elementu - li */
      ul li:first-child {
        border-top:none;
      }

      /* wygląd elementu - li - po najechaniu na niego kursorem myszki */
      ul li:hover {
        background:#FFF;
      }

      /* wygląd elementów - a */
      ul li a {
        display:block;
        text-decoration:none;
        padding:10px;
        text-align:center;
        color:#00A0AA;
        text-shadow:1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
        font-size:18px;
        border:1px solid #FFF;
        background-repeat:no-repeat;
        background-position:center;
        transition:1s;
      }

      /* wygląd elementu - a - w momencie najechania na niego kursorem myszki */
      ul li a:hover {
        color:#000;
        background-image:url('http://webkod.pl/images/strzalka.png');
        background-position:97% center;
      }
    </style>
  </head>

  <body>

    <ul>
      <li>
        <a href="#">
          <span>Dział - 1</span>
        </a>
      </li>

      <li>
        <a href="#">
          <span>Dział - 2</span>
        </a>
      </li>

      <li>
        <a href="#">
          <span>Dział - 3</span>
        </a>
      </li>

      <li>
        <a href="#">
          <span>Dział - 4</span>
        </a>
      </li>
    </ul>

  </body>
</html>

Od tej pory to element li posiada tło obrazkowe, które jest gradientem promienistym, za co odpowiada właściwość background-image oraz funkcja radial-gradient().

Tło elementu li traci wszystkie właściwości tylko nie kolor, który jest biały. Efekt ten możemy zobaczyć, gdy najedziemy kursorem myszki na element li. Za wspomniany efekt odpowiada reguła ul li:hover oraz właściwość background wraz z wartością #FFF.

Do elementu a została dodana właściwość background-repeat:no-repeat; oraz właściwość background-position:center; Pierwsza z wymienionych właściwości CSS odpowiada za to, że tło obrazkowe danego elementu HTML nie powtarza się, natomiast druga z wymienionych właściwości CSS odpowiada za to, że niepowtarzające się tło obrazkowe elementu jest ustawione dokładnie na środku względem poziomu oraz pionu.

Nasz element a nie ma tła obrazkowego, lecz otrzymuje je w momencie gdy najedziemy na ten element a kursorem myszki, co więcej jego tło obrazkowe, w tym momencie, ma zmienić swoją pozycję początkową, która znajdowała się dokładnie na środku elementu HTML.

Za zmianę pozycji tła obrazkowego, w momencie najechania kursorem myszki na dany element HTML, odpowiada reguła ul li a:hover oraz właściwość background-position:97% center; dlatego tło jest umieszczone przy prawej krawędzi elementu HTML (97%) oraz jest umieszczone na środku względem pionu (center).

Całą drogę jaką musi przebyć tło obrazkowe, od swojej pozycji początkowej do pozycji 97% center, obserwujemy przez dokładnie jedna sekundę, ponieważ do elementu a został dodany efekt przejścia, czyli transition CSS3, za co odpowiada właściwość transition:1s;.

Tekst, który znajdował się w elemencie a, został umieszczony w dodatkowym elemencie span, ponieważ element ten wykorzystamy do tego, aby dodać do niego animację, która sprawi, że cały element span oraz zawartość, jaka się w nim znajdzie, zmienią stopień przezroczystości z wartości 0 na wartość 1. Animację tę nie możemy wykonać na elemencie a, ponieważ nie chcemy, aby cały element a "mignął" wraz ze strzałką, która pojawia się w elemencie a, gdy najedziemy kursorem myszki na wspomniany element HTML.

Tworzymy następującą animację:

@keyframes mignij
{
  0% { opacity:0; }
  100% { opacity:1; }
}

Dodajemy animację mignij do elementu span w momencie gdy najedziemy kursorem myszki na element li.

ul li:hover a span {
  animation:mignij 2s linear;
}

Rezultat:

Czas dodać Tooltip do naszego układu elementów HTML. W jaki sposób to uczynić, mogliśmy dowiedzieć się o tym w poprzedniej części tego działu.

Tym razem dodamy dwa dodatkowe elementy na raz, które utworzą nam Tooltip. Do tego celu wykorzystamy selektor :before, :after, właściwość content oraz wiele innych właściwości CSS, które pomogą nam dodać dodatkowe cechy wyglądu do dodatkowych elementów HTML, które będą dodawane do naszego układu elementów HTML, w momencie gdy najdziemy kursorem myszki na element li, za co będzie odpowiadała reguła ul li:hover:before oraz ul li:hover:after, jednak na sam początek utworzymy potrzebne atrybuty data w elemencie li, w których to atrybutach data umieścimy treść, którą będziemy chcieli zobaczyć w każdym z dodatkowych elementów, które ukarzą się naszym oczom, w momencie gdy najedziemy kursorem myszki na wspomniany element li.

<body>

    <ul>
      <li data-tooltip-1="Dział - 1" data-tooltip-2="W tym dziale zostały przedstawione oraz wyjaśnione różne zagadnienia języka CSS. Każdy, kto chce się nauczyć czegoś o języku CSS, powinien się z nimi zapoznać.">
        <a href="#">
          <span>Dział - 1</span>
        </a>
      </li>

      <li data-tooltip-1="Dział - 2" data-tooltip-2="W tym dziale zostały przedstawione oraz wyjaśnione różne zagadnienia języka CSS. Każdy, kto chce się nauczyć czegoś o języku CSS, powinien się z nimi zapoznać.">
        <a href="#">
          <span>Dział - 2</span>
        </a>
      </li>

      <li data-tooltip-1="Dział - 3" data-tooltip-2="W tym dziale zostały przedstawione oraz wyjaśnione różne zagadnienia języka CSS.">
        <a href="#">
          <span>Dział - 3</span>
        </a>
      </li>

      <li data-tooltip-1="Dział - 4" data-tooltip-2="W tym dziale zostały przedstawione oraz wyjaśnione różne zagadnienia języka CSS. Każdy, kto chce się nauczyć czegoś o języku CSS, powinien się z nimi zapoznać. Każdy, kto chce się nauczyć czegoś o języku CSS, powinien się z nimi zapoznać.">
        <a href="#">
          <span>Dział - 4</span>
        </a>
      </li>
    </ul>

  </body>

Naszym kolejnym krokiem będzie utworzenie dodatkowych elementów HTML, za pomocą reguł CSS oraz właściwości CSS, które zostały umieszczone poniżej:

ul li {
  position:relative;
  border-top:1px solid #CCC;
  background-color:#EEE;
  background-repeat:repeat-x;
  background-image:url('http://webkod.pl/images/tooltip.png');
  background-image:radial-gradient(ellipse at bottom, #FFF 0%, #DDD 100%);
}

ul li:before {
  content:'';
}

ul li:after {
  content:'';
}

ul li:hover:before {
  content:attr(data-tooltip-1);
  width:100%;
  padding:10px;
  line-height:20px;
  border:1px solid #CCC;
  position:absolute;
  top:-41px;
  left:110%;
  background-color:#EEE;
  background-repeat:repeat-x;
  background-image:url('../images/tooltip.png');
  background-image:radial-gradient(ellipse at center, #FFF 0%, #EEE 100%);
  font-size:1.2em;
  text-align:center;
  text-shadow:1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
}

ul li:hover:after {
  content:attr(data-tooltip-2);
  width:100%;
  padding:10px;
  line-height:25px;
  border:1px solid #CCC;
  position:absolute;
  top:0;
  left:110%;
  background-color:#FFF;
  background-image:radial-gradient(ellipse at center, #FFF 0%, #EEE 100%);
  font-family:Tahoma, sans-serif;
  text-shadow:0 0 2px #9AF6FA;
  box-shadow:0 6px 6px -6px #666;
}

Najważniejsze właściwości CSS zostały wyróżnione i zostaną omówione w kolejnym akapicie.

W momencie gdy najedziemy kursorem myszki na element li to do jego początkowej zawartości zostanie dodany dodatkowy element HTML, za co odpowiada reguła ul li:hover:before oraz właściwość content:attr(data-tooltip-1);. Zawartością tego elementu będzie zawartość jaka znajduje się w danym elemencie li, w jego atrybucie data-tooltip-1. Wartość szerokości tego elementu będzie równa 100% wartości szerokości jego rodzica, czyli elementu li. Element ten będzie pozycjonowany absolutnie, ponieważ została dodana do niego właściwość position:absolute; Pozycjonowanie tego elementu, za pomocą właściwości top:-41px; oraz left:110%; będzie odbywało się względem jego rodzica, ponieważ do rodzica, czyli elementu li, została dodana właściwość position:relative; Właściwość top posiada wartość -41px, ponieważ chcemy odsunąć dany element HTML, w górę o jedną długość jego wysokości, którą możemy obliczyć dodając wartości właściwości: padding, line-height, border, jakie znajdują się po górnej i dolnej stronie danego dodatkowego elementu HTML (nie wliczając wartości dolnego obramowania, ponieważ dolne obramowanie może być przekryte przez drugi element HTML, który będzie dodawany, w momencie gdy najedziemy kursorem myszki na element li).

Ponadto, w momencie gdy najedziemy kursorem myszki na element li to do jego końcowej zawartości zostanie dodany dodatkowy element HTML, za co odpowiada reguła ul li:hover:after oraz właściwość content:attr(data-tooltip-2);. Zawartością tego elementu będzie zawartość jaka znajduje się w danym elemencie li, w jego atrybucie data-tooltip-2. Wartość szerokości tego elementu będzie równa 100% wartości szerokości jego rodzica, czyli elementu li. Element ten będzie pozycjonowany absolutnie, ponieważ została dodana do niego właściwość position:absolute; Pozycjonowanie tego elementu, za pomocą właściwości top:0; oraz left:110%; będzie odbywało się względem jego rodzica, ponieważ do rodzica, czyli elementu li, została dodana właściwość position:relative;

Rezultat:

Czas utworzyć animacje CSS3 dla naszych dodatkowych elementów HTML.

@keyframes tooltip-1
{
  0% { transform:translateY(-1500px); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}

Animacja o nazwie tooltip-1 będzie zmieniała stopień przezroczystości elementu HTML z wartości 0 na 1, ale przede wszystkim sprawi ona, że dany element zostanie przesunięty od swojej pozycji początkowej w górę o 1500px, a następnie powróci do swojej pozycji początkowej. Wartość jaką określimy w funkcji translateY() powinna być większa od wysokości okna przeglądarki internetowej, dzięki czemu naszym oczom ukarzę się efekt spadającego elementu spoza górnej granicy okna przeglądarki internetowej.

Dodajemy animację tooltip-1 do elementu HTML, który jest dodawany do początkowej zawartości elementu li, gdy na ten element li najedziemy kursorem myszki.

ul li:hover:before {
  content:attr(data-tooltip-1);
  width:100%;
  padding:10px;
  line-height:20px;
  border:1px solid #CCC;
  position:absolute;
  top:-41px;
  left:110%;
  background-color:#EEE;
  background-repeat:repeat-x;
  background-image:url('../images/tooltip.png');
  background-image:radial-gradient(ellipse at center, #FFF 0%, #EEE 100%);
  font-size:1.2em;
  text-align:center;
  text-shadow:1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
  animation:tooltip-1 1s;
}

Rezultat:

Czas utworzyć kolejną animację CSS3.

@keyframes tooltip-2
{
  0% { transform:scale(0) rotate(0); opacity:0; }
  100% { transform:scale(1) rotate(360deg); opacity:1; }
}

Animacja o nazwie tooltip-2 będzie zmieniała stopień przezroczystości elementu HTML z wartości 0 na 1 oraz będzie skalowała dany element HTML od wartości 0 do wartości 1, dzięki funkcji scale. Wspomniana animacja tooltip-2 będzie obracała dany element HTML o 360 stopni, w przestrzeni 2D, względem jego punktu zero, za co odpowiada funkcja rotate().

Dodajemy animację tooltip-2 do elementu HTML, który jest dodawany do końcowej zawartości elementu li, gdy na ten element li najedziemy kursorem myszki. Dodatkowo możemy zmienić pozycję punktu zero, wspomnianego elementu HTML, za pomocą właściwości transform-origin:50% 100%; dzięki czemu urozmaicimy nasz efekt.

ul li:hover:after {
  content:attr(data-tooltip-2);
  width:100%;
  padding:10px;
  line-height:25px;
  border:1px solid #CCC;
  position:absolute;
  top:0;
  left:110%;
  background-color:#FFF;
  background-image:radial-gradient(ellipse at center, #FFF 0%, #EEE 100%);
  font-family:Tahoma, sans-serif;
  text-shadow:0 0 2px #9AF6FA;
  box-shadow:0 6px 6px -6px #666;
  transform-origin:50% 100%;
  animation:tooltip-2 1s;
}

Finalny rezultat:

Kod całego dokumentu HTML został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* wygląd elementu - ul */
      ul {
        list-style-type:none;
        margin:0;
        padding:0;
        border:1px solid #CCC;
        width:250px;
        box-shadow:0 6px 6px -6px #666;
      }

      /* wygląd elementów - li */
      ul li {
        position:relative;
        border-top:1px solid #CCC;
        background-color:#EEE;
        background-repeat:repeat-x;
        background-image:url('http://webkod.pl/images/tooltip.png');
        background-image:radial-gradient(ellipse at bottom, #FFF 0%, #DDD 100%);
      }

      /* wygląd pierwszego elementu - li */
      ul li:first-child {
        border-top:none;
      }

      /* wygląd elementu - li - po najechaniu na niego kursorem myszki */
      ul li:hover {
        background:#FFF;
      }

      /* wygląd elementów - a */
      ul li a {
        display:block;
        text-decoration:none;
        padding:10px;
        text-align:center;
        color:#00A0AA;
        text-shadow:1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
        font-size:18px;
        border:1px solid #FFF;
        background-repeat:no-repeat;
        background-position:center;
        transition:1s;
        -webkit-transition:1s;
      }

      /* wygląd elementu - a - w momencie najechania na niego kursorem myszki */
      ul li a:hover {
        color:#000;
        background-image:url('http://webkod.pl/images/strzalka.png');
        background-position:97% center;
      }

      /* wygląd elementu - span - po najechaniu kursorem myszki na element - li */
      ul li:hover a span {
        animation:mignij 2s linear;
        -webkit-animation:mignij 2s linear;
      }

      /* dodatkowa, pusta zawartość, dodana do początkowej zawartości elementu - li */
      ul li:before {
        content:'';
      }

      /* dodatkowa, pusta zawartość, dodana do końcowej zawartości elementu - li */
      ul li:after {
        content:'';
      }

      /* wygląd dodatkowej, pustej zawartości, dodanej do początkowej zawartości elementu - li - po najechaniu kursorem myszki na ten element - li */
      ul li:hover:before {
        content:attr(data-tooltip-1);
        width:100%;
        padding:10px;
        line-height:20px;
        border:1px solid #CCC;
        position:absolute;
        top:-41px;
        left:110%;
        background-color:#EEE;
        background-repeat:repeat-x;
        background-image:url('../images/tooltip.png');
        background-image:radial-gradient(ellipse at center, #FFF 0%, #EEE 100%);
        font-size:1.2em;
        text-align:center;
        text-shadow:1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
        animation:tooltip-1 1s;
        -webkit-animation:tooltip-1 1s;
      }

      /* wygląd dodatkowej, pustej zawartości, dodanej do końcowej zawartości elementu - li - po najechaniu kursorem myszki na ten element - li */
      ul li:hover:after {
        content:attr(data-tooltip-2);
        width:100%;
        padding:10px;
        line-height:25px;
        border:1px solid #CCC;
        position:absolute;
        top:0;
        left:110%;
        background-color:#FFF;
        background-image:radial-gradient(ellipse at center, #FFF 0%, #EEE 100%);
        font-family:Tahoma, sans-serif;
        text-shadow:0 0 2px #9AF6FA;
        box-shadow:0 6px 6px -6px #666;
        transform-origin:50% 100%;
        -webkit-transform-origin:50% 100%;
        animation:tooltip-2 1s;
        -webkit-animation:tooltip-2 1s;
      }

      /*----------------------ANIMACJE-CSS3----------------------*/
      @keyframes mignij
      {
        0% { opacity:0; }
        100% { opacity:1; }
      }
      @-webkit-keyframes mignij
      {
        0% { opacity:0; }
        100% { opacity:1; }
      }

      @keyframes tooltip-1
      {
        0% { transform:translateY(-1500px); opacity:0; }
        100% { transform:translateY(0); opacity:1; }
      }
      @-webkit-keyframes tooltip-1
      {
        0% { -webkit-transform:translateY(-1500px); opacity:0; }
        100% { -webkit-transform:translateY(0); opacity:1; }
      }

      @keyframes tooltip-2
      {
        0% { transform:scale(0) rotate(0); opacity:0; }
        100% { transform:scale(1) rotate(360deg); opacity:1; }
      }
      @-webkit-keyframes tooltip-2
      {
        0% { -webkit-transform:scale(0) rotate(0); opacity:0; }
        100% { -webkit-transform:scale(1) rotate(360deg); opacity:1; }
      }
    </style>
  </head>

  <body>

    <ul>
      <li data-tooltip-1="Dział - 1" data-tooltip-2="W tym dziale zostały przedstawione oraz wyjaśnione różne zagadnienia języka CSS. Każdy, kto chce się nauczyć czegoś o języku CSS, powinien się z nimi zapoznać.">
        <a href="#">
          <span>Dział - 1</span>
        </a>
      </li>

      <li data-tooltip-1="Dział - 2" data-tooltip-2="W tym dziale zostały przedstawione oraz wyjaśnione różne zagadnienia języka CSS. Każdy, kto chce się nauczyć czegoś o języku CSS, powinien się z nimi zapoznać.">
        <a href="#">
          <span>Dział - 2</span>
        </a>
      </li>

      <li data-tooltip-1="Dział - 3" data-tooltip-2="W tym dziale zostały przedstawione oraz wyjaśnione różne zagadnienia języka CSS.">
        <a href="#">
          <span>Dział - 3</span>
        </a>
      </li>

      <li data-tooltip-1="Dział - 4" data-tooltip-2="W tym dziale zostały przedstawione oraz wyjaśnione różne zagadnienia języka CSS. Każdy, kto chce się nauczyć czegoś o języku CSS, powinien się z nimi zapoznać. Każdy, kto chce się nauczyć czegoś o języku CSS, powinien się z nimi zapoznać.">
        <a href="#">
          <span>Dział - 4</span>
        </a>
      </li>
    </ul>

  </body>
</html>

Reguły ul li:before oraz ul li:after wraz z właściwością content:''; odpowiadają za dodanie pustej zawartości do początkowej oraz końcowej zawartości danego elementu HTML. Wspomniane reguły CSS nie muszą znaleźć się w naszym kodzie, jednej dla niektórych przeglądarek internetowych łatwiej jest wykonać przekształcenie, czy też animację CSS, na czymś co już istnieje, a nie jest dodawane dynamicznie, tak jak za pomocą reguły ul li:hover:before.

Ta część kursu CSS miała na celu przybliżyć nam, w jaki sposób możemy łączyć ze sobą selektory :before, :after, :hover, atrybuty data, właściwość content oraz przekształcenia, efekt transition i animacje CSS3.

W następnej części kursu CSS utworzymy elementy HTML, które wyglądem będą przypominały kartę w przestrzeni 3D.