Vzhled

Pozadí a gradienty

Barva, fotka nebo gradient. Pozadí dělá z obyčejného bloku úvodní plakát.

Postavíme hero sekci pozvánky na tábor. V náhledu vidíte, kam se dostaneme.

Začátek

Blok bez pozadí

Nadpis, věta a tlačítko v jednom bloku .hero. Má jen padding, pozadí je průhledné.

Průhledné pozadí je výchozí hodnota: prosvítá cokoli, co je pod blokem. Tady bílá stránka.

Vlastnost · 1

Barva background-color

Nejjednodušší pozadí je plná barva. Na tmavém pozadí potřebujeme světlý text.

Barva vyplní celý blok včetně padding, ale ne margin.

Vlastnost · 2

Obrázek background-image

Do pozadí dáme fotku hor. Cesta k obrázku se píše do url().

Obrázek je ve své plné velikosti 800 × 500 px, takže vidíme jen jeho levý horní roh. A bílý text na světlém nebi skoro není vidět. Obojí za chvíli spravíme.

Vlastnost · 3

Velikost background-size

cover obrázek zvětší nebo zmenší tak, aby zakryl celý blok, a co přečuhuje, ořízne. background-position: center pak ořezává rovnoměrně ze všech stran.

Kdyby byl obrázek menší než blok, opakoval by se jako dlaždice. To vypne background-repeat: no-repeat. Druhá častá velikost je contain: celý obrázek, i za cenu prázdných okrajů.

Vlastnost · 4

linear-gradient

Aby byl text čitelný, položíme přes fotku gradient z tmavé do průhledné. Pozadí může mít víc vrstev oddělených čárkou: první je nahoře.

Gradient jde z tmavé vlevo, kde je text, do úplně průhledné vpravo. background-color nemažeme: je to fallback pro chvíli, kdy se obrázek ještě nenačetl.

Vlastnost · 5

Gradient jako barva

Gradient nemusí ležet na fotce. Tlačítku dáme místo plné barvy jemný gradient shora dolů, působí pak plastičtěji.

Směr se zadává slovy (to right, to bottom right) nebo úhlem (135deg). Bez směru jde gradient shora dolů. Barev může být víc než dvě.

Responzivita

Na telefonu gradient shora

Na úzkém displeji jde text přes celou šířku a vpravo, kde je gradient průhledný, se ztrácí. Na mobilu proto ztmavíme celou fotku, shora víc a dole míň. A zmenšíme padding i nadpis.

background-size: cover funguje na telefonu sám: obrázek se přizpůsobí jinému tvaru bloku.

Shrnutí

Fotka, gradient a fallback

Ano

• background-size: cover a background-position: center pro fotky
• tmavý gradient přes fotku, aby byl text čitelný
• background-color jako fallback pod obrázkem
• jiný směr gradientu na mobilu

Ne

• světlý text přímo na pestré fotce
• gradienty přes celou stránku v pěti barvách

Další lekce: Stíny a zaoblení →