Lekce 13 - Okraje a rámečky v CSS3

V minulé lekci, Okraje prvků: margin a padding v CSS3, jsme se zabývali neviditelnými okraji uvnitř i vně prvku: margin a padding.

Vítejte u další lekce ohledně nastavení v CSS3, ve které si ukážeme, jak pracovat se vzhledy okrajů, jaké jim lze nastavit barvy, velikost a styl. V této lekci se tedy naučíme udělat následující:

Vlastnost border

Pomocí vlastnosti border nastavujeme rámeček okolo HTML elementu. Podobně jako u mnoha dalších CSS3 vlastností, i border je shrnující vlastnost, ve které nastavujeme rámečku celkem 3 vlastnosti:

• šířku,
• styl a
• barvu:

border: sirka styl barva;

A stejně tak jako tomu bylo doposud, nezáleží na jejich pořadí při zápisu. Pro každou složku rámečku existuje také zvlášť specifická vlastnost, která ji nastavuje. Můžeme tedy nastavit pouze jednu konkrétní:

• border-width - Šířka rámečku
• border-style - Styl rámečku
• border-color - Barva rámečku

Jako hodnotu můžeme uvést i inherit, čímž zdědíme vlastnost border od rodičovského elementu. Ukažme si, jak to vypadá v praxi. Vytvoříme si jednoduchý HTML element s třídou .okraj. V CSS poté nastavíme základní vlastnosti, tedy výšku height: 200px;, šířku width: 300px; a červený celistvý okraj s šířkou 3px border: #e84e4e solid 3px;:

<div class="okraj">

</div>

CSS:

.okraj{
    height: 200px;
    width: 300px;
    border: #e84e4e 3px solid;
}

Máme tedy náš element s červeným rámečkem okolo něj.

Zde je potřeba dávat si pozor na velikost šířky rámečku. Ten se totiž vykresluje okolo našeho elementu, což znamená, že na každé straně přidá další 3px. Celkově tedy element i s orámováním zabere prostor o velikosti 206x306px! Pokud nám tedy z nějakého důvodu vadí na dolní straně šířka 3px, můžeme ji jednoduše změnit pomocí vlastnosti pro konkrétní stranu:

• border-bottom - Dolní hrana rámečku
• border-left - Levá hrana rámečku
• border-right - Pravá hrana rámečku
• border-top - Horní hrana rámečku

Šířku dolní strany nastavíme tedy na 1px, pravou stranu změníme na mordou barvu a levé straně změníme styl z celistvého na tečkovaný:

.okraj {
    height: 200px;
    width: 300px;
    border: #e84e4e 3px solid;
    border-bottom: 1px;
    border-right: #5454ff;
    border-left: dotted;
}

Výsledek na stránce:

Tyto vlastnosti sice nastavují pouze určitou stranu, ale při jejich použití musíme znovu specifikovat barvu, šířku i styl! Z příkladu také vyplývá, že styl musí být nastaven vždy, jinak žádný rámeček nevznikne.

Vlastnosti border-width, border-color a border-style

Už jsme si tedy ukázali jak rámeček vytvořit a nastavit mu základní vlastnosti. Pokud chceme, můžeme si border rozepsat do tří vlastností, ve kterých se nastavuje pouze to, k čemu jsou určeny:

• border-width - Nastavuje šířku orámování
• border-color - Nastavuje barvu orámování
• border-style - Nastavuje styl orámování

Když se vrátíme k našemu původnímu nastavení elementu, můžeme tedy separovat vlastnost border na jednotlivé složky:

.okraj {
    height: 200px;
    width: 300px;
    border-width: 3px;
    border-color: #e84e4e;
    border-style: solid;
}

Vizuálně nenastala žádná změna, je to pouze delší zápis v kódu:

Vrátíme se ale ke změnám, co jsme chtěli udělat u jednotlivých stran. K vlastnostem upravujícím určitou stranu přidáme i co přesně v ní chceme upravovat. U border-bottom přidáme ještě width, u border-right přidáme color a u border-left přidáme style:

.okraj {
    border: #e84e4e 3px solid;
    border-bottom-width: 1px;
    border-right-color: #5454ff;
    border-left-style: dotted;
}

Prohlížeč tak ví, že měníme pouze jednu určitou věc, a zbytek si doplní podle celkového nastavení:

border-width

Už víme jak nastavení šířky funguje, podíváme se tedy jaké přednastavené hodnoty lze zadat:

• thin - Tenký rámeček (1px).
• medium (výchozí) - Středně široký rámeček (3px).
• thick - Tlustý rámeček (5px).
• (šířka) - Šířku můžeme zadat např. v pixelech, tedy jako 5px a podobně.
• inherit - Zdědí šířku rámečku nadřazeného elementu.

Pokud žádnou hodnotu nezadáme, rámeček se vykreslí s přednastavenou hodnotou medium. Je možné zadat i více než jednu hodnotu následujícím způsobem:

border-width: thin thick;

V tomto případě první hodnota označuje vodorovné hrany (horní a dolní) a druhá hodnota označuje svislé hrany (levou a pravou):

Když zadáme 3 hodnoty:

border-width: thin medium thick;

první označuje horní hranu rámečku, druhá levou a pravou, třetí dolní:

Hodnoty můžeme zadat samozřejmě i 4 a tak nastavit individuálně všechny 4 hrany rámečku v pořadí horní, pravá, dolní, levá:

border-width: 2px 4px 6px 8px;

Výsledek různých velikostí rámečků:

border-color

Barva se nastavuje na stejném principu jako šířka. Pokud není nastavena, má rámeček automaticky černou barvu.

• barva - Barvu můžeme specifikovat slovně (např. blue), RGB kódem nebo třeba hexadecimální notací.
• transparent - Průhledná barva, rámeček se tedy nevykresluje.
• inherit - Barva rámečku se určí podle rodičovského elementu.

Při zadávání více hodnot pak platí stejná pravidla jako pro šířku:

border-color: #5454ff green;

Výsledek:

Tři hodnoty:

border-color: #5454ff #e84e4e green;

Výsledek:

A všechny 4 hodnoty:

border-color: #5454ff #e84e4e green yellow;

Každý rámeček má jinou barvu:

border-style

A jako poslední se podíváme na to jaké různé styly lze nastavit našemu rámečku:

• none - Bez rámečku.
• hidden - Rámeček se nevykreslí (stejný efekt jako u none).
• dotted - Tečkovaný rámeček.
• dashed - Čárkovaný rámeček.
• solid - Celistvá plná čára.
• double - Dvojitá čára.
• groove - 3D rámeček s efektem groove (drážky).
• ridge - 3D rámeček s efektem ridge.
• inset - 3D rámeček s efektem inset (jako stlačené tlačítko).
• outset - 3D rámeček s efektem outset (jako nestlačené tlačítko).
• inherit - Zdědí styl čáry rámečku nadřazeného elementu.

Opět při zadání více než jedné hodnoty platí stejná pravidla jako u šířky a barvy:

border-style: solid dotted;

Výsledek:

Dvojitý a tečkovaný rámeček:

border-style: solid dotted double;

Výsledek:

Čárkovaný, dvojitý a tečkovaný rámeček:

border-style: dashed solid dotted double;

Výsledek:

Pokud něčemu nerozumíte, doporučuji stáhnout si soubory v příloze k této lekci a vše si pořádně vyzkoušet

V další lekci, Pokročilejší okraje a rámečky v CSS3, si ukážeme jak pracovat s tvarem okrajů rámečků a pokročilým nastavením barevného vzhledu.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.