Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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í:

Okraje a rámečky
localhost

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.

Okraje a rámečky
localhost

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:

Okraje a rámečky
localhost

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:

Okraje a rámečky
localhost

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í:

Okraje a rámečky
localhost

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):

Okraje a rámečky
localhost

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í:

Okraje a rámečky
localhost

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ů:

Okraje a rámečky
localhost

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:

Okraje a rámečky
localhost

Tři hodnoty:

border-color: #5454ff #e84e4e green;

Výsledek:

Okraje a rámečky
localhost

A všechny 4 hodnoty:

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

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

Okraje a rámečky
localhost

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:

Okraje a rámečky
localhost

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

border-style: solid dotted double;

Výsledek:

Okraje a rámečky
localhost

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

border-style: dashed solid dotted double;

Výsledek:

Okraje a rámečky
localhost

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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 52x (1.06 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS3

 

Předchozí článek
Okraje prvků: margin a padding v CSS3
Všechny články v sekci
Základy CSS3
Přeskočit článek
(nedoporučujeme)
Pokročilejší okraje a rámečky v CSS3
Článek pro vás napsal Filip Opluštil
Avatar
Uživatelské hodnocení:
80 hlasů
Aktivity