Tvorba klientských aplikací v JavaScriptu

CSS transitions, animations, efekty, CSS Custom Properties - cvičení

Obsah

  1. Transitions
  2. Animations
  3. Efekty
  4. CSS Custom Properties

Transitions + animations

Úkol: Menu

Úkol: Animace pomocí sprite

Úkol: Modal window

Úkol: CSS Custom Properties

  1. Vytvořte stránku, která používá dvě custom properties:
    1. Barvu (textu a rámečku)
    2. Velikost (mezery, tloušťka rámečku)
  2. Upravte tyto hodnoty v rámci media query
  3. Upravte tyto hodnoty skriptem pomocí style.setProperty()
  4. Upravujte tyto hodnoty skriptem dynamicky v rámci interakce s ovládacími prvky (input color, input range)

Flex game

  • http://flexboxfroggy.com/ otestujte si své znalosti Flex CSS
  • Řešení