Lekce 11 - Rámeček, stín a boxmodel v CSS

V minulé lekci, Plovoucí obsah v HTML, jsme se naučili pracovat s plovoucím obsahem a pozicovat elementy vedle sebe.

V dnešním HTML/CSS tutoriálu dokončíme pole s článkem a naučíme se další nové vlastnosti HTML.

Rámeček

Pole s článkem jsme rozdělili do 2 elementů, header a section, které jsme napozicovali vedle sebe. Dejme elementu section (bílému poli s obsahem článku) rámeček.

Rámeček se v CSS nastaví přes shrnující vlastnost border. Jako hodnotu uvedeme tloušťku rámečku, typ čáry a nakonec barvu. Selektor pro section v souboru styl.css již máme, jelikož v něm nastavujeme float, šířku a pozadí. Rozšiřme tento styl o nastavení rámečku:

article section {
    width: 706px;
    float: left;
    background: white;
    border: 2px solid #006797;
}

U vlastnosti border jsme uvedli šířku rámečku 2px, styl čáry "plná čára" (solid) a barvu čáry přes nám již známý šestnáctkový zápis, je to tmavě modrá. Bystřejší si jistě všimli, že jsme snížili šířku elementu z 710px na 706px. To proto, že k šířce elementu se připočítá z obou stran ještě 2px široký rámeček (šířka elementu se tedy zvětší o 4px a jelikož chceme celkovou původní šířku 710px zachovat, je nutné tyto 4px ubrat). Šířka rámečku se tedy do width nepočítá a element je vždy kvůli rámečku o chlup větší.

Podívejme se na výsledek:

Jen opět připomenu, že jsme použili barvu, co nám do designu ladí.

Stejného stylu lze dosáhnout tak, že vlastnost border rozepíšeme na její 3 složky:

border-style: solid;
border-width: 2px;
border-color: #006797;

Jelikož je tento zápis delší, není důvod ho používat, pokud nechceme třeba jen změnit určitou složku. Uvádím ho pro úplnost a hlavně proto, abyste mu rozuměli, když se s ním někde setkáte.

Styly čáry

Jako styl čáry můžete použít hodnoty:

• none - Bez rámečku.
• hidden - Rámeček se nevykreslí, ale zabírá místo.
• dotted - Tečkovaný.
• dashed - Čárkovaný.
• solid - Plná čára.
• double - Dvojitý.
• groove - 3D rámeček s efektem groove.
• ridge - 3D rámeček s efektem ridge.
• inset - 3D rámeček s efektem inset.
• outset - 3D rámeček s efektem outset.
• inherit - Zdědí styl čáry rámečku nadřazeného elementu.

Vyzkoušejte si je Poslední 3D styly jsou dobře vidět jen s širokým rámečkem. Všechny hodnoty jsou samozřejmě opět popsané v českém CSS 3 manuálu - Border style včetně ukázek toho, jak vypadají.

Kulaté rohy

Zajímavou vlastností je border-radius, která umožňuje zakulatit rohy rámečku. Zkusme si to a přidejme si ji do stylu section:

border-radius: 10px;

Výsledek:

Obvykle se nepoužívají hodnoty vyšší než 10px, protože nevypadají dobře. Pokud nastavíme velmi vysokou hodnotu, stane se z elementu kruh. Lze tak udělat např. kruhová tlačítka.

Zajímavé je, že border-radius lze použít i u obrázků, rohy se poté zakulatí. Vysoké hodnoty dají obrázek do kruhu. Vyzkoušíme si to.

Pro testovací účely lze obejít psaní selektoru a napsat styl přímo do HTML, slouží k tomu HTML atribut style. Je určitě jasné, že tím znepřehledňujeme kód a porušujeme hlavní princip oddělení obsahu a vzhledu. Nicméně pokud vymýšlíme design a zkoušíme co vypadá dobře, je tento atribut velmi užitečný. Upravme tedy náš obrázek v HTML:

<img src="obrazky/avatar.png" alt="Programátor HoBi" style="border-radius: 500px;" />

Výsledek:

Do designu naší konkrétní šablony se kulaté rohy příliš nehodí, proto vlastnosti zase odstraňme. Pokud by se nám líbily, odstraníme atribut style a uděláme pro ně plnohodnotný selektor v souboru styl.css. Na hotových stránkách by se ideálně atribut style neměl u HTML elementů nikde objevit.

Více o rámečkách naleznete v českém CSS 3 manuálu - Rámečky.

Stín

Se stínem jsme se již v CSS setkali, byl to stín u textu pomocí CSS 3 vlastnosti text-shadow. Stín můžeme nastavit libovolnému elementu na stránce pomocí vlastnosti box-shadow. My ostylujeme stín section takto:

box-shadow: 2px 2px 7px #1c2228;

První 2 hodnoty jsou pozice stínu, další rozostření, poslední barva. Vlastnost ostyluje obdélníkový stín okolo elementu. Podívejme se na výsledek:

Odsazení

Obsah section je velmi nalepený na okraje, což působí nevzhledně. Bývá dobrým zvykem udržovat mezi elementy určité rozestupy. Ty můžeme nastavit pomocí CSS vlastností padding a margin. Rozdíl mezi nimi se vysvětluje na tzv. boxmodelu (česky někdy bývá přeloženo jako "krabičkový model"). Vypadá takto:

Na obrázku vidíme element (např. náš section) a rámeček (border) kolem něj. Rozestup mezi rámečkem a obsahem elementu se nazývá padding. Rozestup mezi rámečkem a okolím elementu se nazývá margin. Zjednodušeně řečeno: padding je vnitřní odsazení, margin to vnější.

Ani jeden okraj se podobně jako rámeček nepočítá do velikosti elementu! Do stylu k section nastavme padding na 20px a musíme také opět snížit šířku elementu o 40px (20px z každé strany):

padding: 20px;
width: 666px;

Tím jsme docílili vnitřního odsazení o 20px na všech stranách:

Vlastnost lze rozepsat i takto:

padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

Zápis výše bychom použili v případě, že bychom chtěli nastavit třeba jen okraj z jedné strany nebo z každé strany jiný. Jednotlivé hodnoty můžeme uvést i ve shrnujícím zápisu (v pořadí horní, pravý, dolní, levý):

padding: 20px 20px 20px 20px;

Jako třetí typ zápisu se někdy používá:

padding: 20px 20px;

Kde první hodnota udává okraj svislý (horní a dolní) a druhá vodorovný (levý a pravý). Kód z dnešního HTML/CSS tutoriálu naleznete jako vždy ke stažení v příloze níže.

V následujícím cvičení, Řešené úlohy k 10.-11. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.