Vzhled

Stíny, zaoblení a průhlednost

Tři vlastnosti, díky kterým prvky přestanou být ploché krabice: zaoblené rohy, stín pod kartou a zprůhlednění.

Postavíme dvě karty turnusů, jeden je už obsazený. V náhledu vidíte, kam se dostaneme.

Začátek

Hranaté karty

Dvě karty vedle sebe, každá s obrázkem, nadpisem a tlačítkem. Od pozadí je odděluje tenký border.

Stránka má světle béžové pozadí, na bílé kartě pak stín lépe vynikne.

Vlastnost · 1

Zaoblení `border-radius`

Kartě zaoblíme rohy. Obrázek uvnitř ale zůstane hranatý a vyčuhoval by, proto kartě přidáme overflow: hidden: co je za zaoblením, se ořízne.

Velké číslo jako 999px udělá z tlačítka „pilulku“ s půlkruhovými konci. border-radius: 50% udělá ze čtverce kruh, třeba u profilové fotky.

Vlastnost · 2

Stín `box-shadow`

Border vyměníme za stín. Karta se pak jakoby zvedne nad stránku.

Čtyři hodnoty: posun doprava, posun dolů, rozmazání a barva. Stín má být jemný, proto černá s průhledností 8 %. Border jsme smazali.

Vlastnost · 3

Dva stíny přes sebe

Skutečný stín je u předmětu ostrý a dál od něj se rozpíjí. Napodobíme to dvěma stíny oddělenými čárkou: malým ostrým a velkým měkkým.

Stín nezabírá místo, okolní prvky se kvůli němu neposunou. Proto ho můžete měnit, aniž by se rozbil layout.

Vlastnost · 4

Průhlednost `opacity`

Obsazený turnus zešedne: celou kartu zprůhledníme na polovinu. Je pořád vidět, ale je jasné, že se na něj už nedá přihlásit.

opacity zprůhlední celý prvek i se vším uvnitř: text, obrázek, tlačítko. Když chcete průhledné jen pozadí, použijte barvu s průhledností, viz lekce Barvy.

Responzivita

Na telefonu lehčí stín

Karty se na telefonu postaví pod sebe. Velký měkký stín se tam rozlévá do mezer mezi kartami a působí těžce. Na mobilu ho zmenšíme a rohy trochu zaoblíme méně.

Menší prvky snesou menší zaoblení. Rohy 12 px na úzké kartě působí jako bublina.

Shrnutí

Jemně, nebo vůbec

Ano

border-radius s overflow: hidden, když je uvnitř obrázek
jemný stín s průhlednou černou
dva stíny přes sebe pro přirozený vzhled
opacity pro neaktivní prvky

Ne

černý ostrý stín bez průhlednosti
opacity, když má být průhledné jen pozadí

Další lekce: Pseudotřídy →