Interaktivní laboratoř transformací – CSS Transition Playground

Tento projekt slouží jako praktická ukázka chování vlastnosti transition v CSS.
Studenti si zde mohou vyzkoušet různé stavové změny prvků — změny barvy, velikosti, průhlednosti, rotace, posunu, stínu a dalších transformací.

Cílem projektu je pochopit rozdíl mezi:

• transition → reaguje na změnu stavu (např. :hover, :focus, přidání/odebrání třídy)
• keyframes animací → běží samostatně v čase, bez nutnosti interakce

Projekt obsahuje tři úrovně obtížnosti:

1. Základní box – jednoduché změny barvy, velikosti a opacity
2. Pokročilý box – rotace, posun, změna tvaru
3. Mini galerie – více prvků, každý s jiným efektem

Součástí HTML je rozsáhlé komentářové zadání, které vede uživatele krok za krokem.
CSS existuje ve dvou verzích:

• hotová verze (vyplněné efekty)
• studentská verze (kostra bez efektů, které musí doplnit sami)

---

🧩 Struktura projektu

    index.html
    README.md
    styles-students.css
    styles.css

---

🚀 Jak projekt použít

1. Otevři soubory v libovolném editoru nebo na CodePen.io
2. Pro studijní účely použij studentskou verzi CSS
3. Postupuj podle zadání v HTML komentáři
4. Experimentuj s různými hodnotami transition, transform, opacity, background-color atd.

---

🎯 Co si uživatel osvojí

• práci se stavovými selektory (:hover, :active, :focus)
• rozdíl mezi transition a animací
• transformace: scale, rotate, translate
• vizuální efekty: stíny, průhlednost, změna tvaru
• tvorbu interaktivních UI prvků

---

📜 Licence

Projekt je dostupný pod licencí MIT (viz soubor LICENSE).

---

✉️ Autor

Jakub Březa (Vlk samotář)

VlkSamotar.cz | Informatika | Trading | Elektrotechnika