3 sty 2020

Animacja kart css

card animation
Mały przerywnik, coś miłego dla oka - animacja kart.
Każda z kart składa się z nagłówka w którym jest ikona, oraz sekcji z opisem i buttonem "więcej". Powiedzmy 3 karty w rzędzie a gdy zmniejszymy stronę karty ustawiają się w pionie.

Zacznijmy od ikon, tutaj opisałem dokładnie jak dodajemy obecnie ikony svg do strony - nowy sposób serwowania ikon SVG

Najpierw ikony które dodajemy na górze strony.

11 wrz 2019

Animacja 3d w css

3D animation
Animacja 3d w css możliwa już od wersji IE10, za pomocą przychodzi nam parametr perspective.
Nasza animacja będzie polegała na obracaniu sześcianu. Jak wiemy sześcian to sześć ścian więc zaczniemy od nich.

<div class="scene">
  <div class="cube">
    <div class="cube__wall cube__front">front</div>
    <div class="cube__wall cube__back">back</div>
    <div class="cube__wall cube__right">right</div>
    <div class="cube__wall cube__left">left</div>
    <div class="cube__wall cube__top">top</div>
    <div class="cube__wall cube__bottom">bottom</div>
  </div>
</div>

Jak widać nic szczególnego, scene - która zawiera div [cube] wraz z sześcioma ścianami. Każda ze ścian posiada napis tak aby można było zauważysz rotację tej kostki.
Teraz same "mięsko" a mianowicie css. Zaczynamy od podstaw zbudowanie podstaw, body na 100% wysokości do tego dodam animację backgroundu - tutaj wykorzystałem z generatora gradientów