podzim 2020, Praha
10. listopadu 2020
- Otevři si cvičení 01_svg.
- Vlož ikonu letadla do stránky.
- Zmenši ikonu na 20 % šířky stránky.
- Vycentruj ikonu.
- Změň barvu kruhového pozadí ikony.
- Změň barvu letadla při najetí myši.
- 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).
- Zjemni změny při najetí myši pomocí
transition
.
- Obal ikonu nadpisem.
- Text nadpisu: Letiště Václava Havla umísti v kódu před ikonu.
- Nadpis vespod orámuj 2px rámečkem.
- Zmenši ikonu úměrně textu.
- Ikonu a text umísti pod sebe, přičemž ikona bude první.
- Obarvi nadpis i jeho rámování na
hotpink
. - Obarvi ikonu shodně s nadpisem
Ú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
- Otevři si cvičení 02_custom-properties.
- Pozadí stránky: světlejší průsvitnou
- Písmo stránky: tmavou barvou
- Hlavní nadpis: primární, stín tmavou
- Nadpisy: tmavou
- Odkazy v navigaci: písmo a orámování tmavou, podbarvit světlou; na hover změna pozadí (jak libo)
- Sekce: podbarvit světlou, ohraničení tmavou Bonus: Odstraň orámování poslední sekce.
- Nastav barevné proměnné (pro
:root
). - 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
Zjednodušíme zápis pro pozadí receptů.
- Otevři si cvičení 03_recepty.
- 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 - Uprav kód jednotlivých receptů: odstraň vlastnost
background-image
a nastav pro každý recept hodnotu proměnné--bg-recipe
.
- Najdi vhodný emotikon pro komentář (bublina?).
- Úpravou CSS umísti emotikon před počet komentářů