Pokročilý CSS — Grid layout, responzivní design, přechody a pseudotřídy. Tvoje stránky budou vypadat profesionálně!
🔲 CSS Grid
📱 Mobil
✨ Přechody
🏆 6 odznaků
Kapitola 1
CSS Proměnné — barvy na jednom místě
🎨
🎨 Co jsou CSS proměnné?
Představ si, že máš oblíbenou modrou barvu a použiješ ji na 50 místech v CSS. Pak ji chceš změnit — musíš to měnit 50×. S proměnnými stačí změna na jednom místě!
💡 Proč :root? Je to nejvyšší rodič celé stránky — proměnné tam platí všude.
✏️ Změň barvy proměnnou
⚡ ŽIVÝ KÓD
🧠 Otázka: Jak použijeme CSS proměnnou --barva?
Kapitola 2
CSS Grid — mřížka pro layout
🔲
🔲 Co je Grid?
Grid (mřížka) je způsob jak rozmístit prvky do řádků a sloupců — jako šachovnice. Perfektní pro galerie, kartičky nebo rozložení stránky.
Jak zapnout Grid? Nastavíme display: grid na rodičovský prvek, pak grid-template-columns pro sloupce.
📐 3 stejné sloupce
Buňka 1
Buňka 2
Buňka 3
Buňka 4
Buňka 5
Buňka 6
📐 Automatické sloupce (přizpůsobí se šířce)
Auto 1
Auto 2
Auto 3
Auto 4
Auto 5
.galerie {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 stejné sloupce */gap: 16px; /* mezera mezi buňkami */
}
/* 1fr = jeden díl dostupného místa */.velka { grid-column: span 2; } /* zabere 2 sloupce */
✏️ Fotogalerie s Gridem
⚡ ŽIVÝ KÓD
🧠 Otázka: Co znamená grid-column: span 2?
Kapitola 3
Responzivní design — funguje na mobilu!
📱
📱 Co je responzivní design?
Responzivní stránka vypadá dobře na počítači, tabletu i mobilu. Na počítači 3 sloupce, na mobilu 1. Klíčem jsou media queries — pravidla pro různé šířky okna.
/* Toto platí vždy */.karticky { grid-template-columns: repeat(3, 1fr); }
/* Na mobilech (šířka max 600px) */@media (max-width: 600px) {
.karticky { grid-template-columns: 1fr; }
}
/* Na tabletech (šířka max 900px) */@media (max-width: 900px) {
.karticky { grid-template-columns: repeat(2, 1fr); }
}
💡 Zkus to! Zužuj okno prohlížeče a sleduj jak se layout mění. To je responzivita v akci!
✏️ Responzivní kartičky
⚡ ŽIVÝ KÓD
🧠 Otázka: Kdy se použijí styly uvnitř @media (max-width: 600px)?
Kapitola 4
Přechody — plynulé animace
✨
✨ Co jsou přechody (transitions)?
Přechody způsobují, že změny CSS probíhají plynule. Místo aby tlačítko okamžitě změnilo barvu, přejde z jedné do druhé za půl sekundy.
button {
background: #818CF8;
/* vlastnost čas typ */transition: all 0.3s ease;
}
button:hover {
background: #F472B6;
transform: scale(1.05); /* mírné zvětšení */
}
✏️ Animovaná tlačítka
⚡ ŽIVÝ KÓD
🧠 Otázka: Co dělá transform: scale(1.1)?
Kapitola 5
Pseudotřídy — styly pro různé stavy
🎭
🎭 Co jsou pseudotřídy?
Pseudotřídy jsou speciální stavy prvků. :hover platí jen když najedeš myší. :first-child pro první dítě. :nth-child pro n-tý prvek. Píšou se s dvojtečkou za selektorem.
a:hover { color: red; } /* při najetí myší */li:first-child { font-weight: bold; } /* první prvek */li:last-child { border-bottom: none; } /* poslední prvek */tr:nth-child(even) { background: #f5f5f5; } /* každý sudý */input:focus { border-color: blue; } /* při psaní */
✏️ Interaktivní seznam
⚡ ŽIVÝ KÓD
🧠 Otázka: Jaká pseudotřída platí pro každý druhý prvek?
Kapitola 6
Projekt — Profilová karta!
🏆
🏆 Vytvoř svoji profilovou kartu
Použij CSS proměnné, přechody a pseudotřídy. Změň emoji, jméno, barvu a popis na svojí oblíbenou postavu!