Vítěz
Hlasování skončilo a vyhrál Nedělní šlofík, fotka od Anny! Přidali jsme pro ni štítek: prvek span na začátku její karty. Zatím štítek překáží: odsouvá fotku dolů.
- Vítězná karta vynikne: její rámeček je široký aspoň 2 px a má jinou barvu než rámečky ostatních karet, třeba jantarovou.
- Štítek 🏆 Vítěz leží přes fotku v levém horním rohu karty, 12 px od jejího horního a levého okraje. Fotka zase začíná nahoře v kartě, jako by tam štítek nebyl.
- Eva svou fotku Sněhová královna ze soutěže stáhla. Její karta je ztlumená, s neprůhledností nejvýš 60 %, takže je pořád vidět, ale už neupoutává pozornost. Ostatní karty zůstanou, jak jsou.
Tip: vzpomeňte si na štítek „Nový“ na Oskarově kartě v lekci Flexbox, Grid a pozice: štítek potřebuje pozici, a stejně tak prvek, od kterého se měří jeho posuny.
A to je celá galerie. S tím, co jste se naučili v posledních dvou lekcích, jste z obyčejných fotek udělali karty s rámečky, zaoblenými rohy a stíny, rozložili je do mřížky a umístili štítek přesně tam, kam jste chtěli. V příští lekci, Hover, focus a další stavy, zařídíte, aby tlačítka, jako je to pro hlasování, reagovala, když na ně najedete myší nebo na ně kliknete.
Jak psát:
Pokyny
Zvýrazněte vítěznou kartu a dejte štítek do jejího levého horního rohu, přes fotku.
Ztlumte kartu stažené fotky.
Začněte programovat zdarma
3/3