mirukadlecova / lekce_09

Tvořím web A–Z: lekce 9

podzim 2020, Praha

10. listopadu 2020

---

Cvičení 1

1. Otevři si cvičení 01_svg.
2. Vlož ikonu letadla do stránky.
3. Zmenši ikonu na 20 % šířky stránky.
4. Vycentruj ikonu.
5. Změň barvu kruhového pozadí ikony.

---

Cvičení 2

1. Změň barvu letadla při najetí myši.
2. Otoč letadlo při najetí myši čumákem do prava.

note:

• Pozor! V případě transformací přímo na prvcích SVG, se hodí nastavit transform-origin: center;. Na rozdíl od HTML prvků, které mají tuto hodnotu výchozí, prvky SVG mají transform-origin: left top, tj. pokud je otáčíme, jako bychom je drželi za horní levý roh (a nikoli za střed).

---

Cvičení 3

1. Zjemni změny při najetí myši pomocí transition.

---

Cvičení 4

1. Obal ikonu nadpisem.
2. Text nadpisu: Letiště Václava Havla umísti v kódu před ikonu.
3. Nadpis vespod orámuj 2px rámečkem.
4. Zmenši ikonu úměrně textu.
5. Ikonu a text umísti pod sebe, přičemž ikona bude první.
6. Obarvi nadpis i jeho rámování na hotpink.
7. Obarvi ikonu shodně s nadpisem

---

Cvičení 5

Úpravou složek HSLA vytvoř varianty tzv. primární barvy:

--primary-light => světlá --primary-lighter => světlejší průsvitná --primary-dark => tmavá

Vytvořené barvy použijeme na prvky

1. Otevři si cvičení 02_custom-properties.
2. Pozadí stránky: světlejší průsvitnou
3. Písmo stránky: tmavou barvou
4. Hlavní nadpis: primární, stín tmavou
5. Nadpisy: tmavou
6. Odkazy v navigaci: písmo a orámování tmavou, podbarvit světlou; na hover změna pozadí (jak libo)
7. Sekce: podbarvit světlou, ohraničení tmavou Bonus: Odstraň orámování poslední sekce.

---

Cvičení 6

1. Nastav barevné proměnné (pro :root).
2. Nahraď přímo nastavené barvy u jednotlivých prvků proměnnými.

note:

• v devTools při najetí myši nad hodnotu s funkcí var() se v bublině ukáže hodnota proměnné vlastnoti

---

Cvičení 7

Zjednodušíme zápis pro pozadí receptů.

1. Otevři si cvičení 03_recepty.
2. Pro všechny recepty nastav jednotný obrázek na pozadí: gradient a proměnnou --bg-recipe s výchozí hodnotou SVG obrázek kuchařky
3. Uprav kód jednotlivých receptů: odstraň vlastnost background-image a nastav pro každý recept hodnotu proměnné --bg-recipe.

---

Cvičení 8

1. Najdi vhodný emotikon pro komentář (bublina?).
2. Úpravou CSS umísti emotikon před počet komentářů

---