20. diel - Okraje a rámčeky v CSS 3

V predchádzajúcej lekcii, Vzhľady a nastavenie tabuliek v CSS 3 , sme si ukázali, ako nastaviť vlastný vzhľad tabuľky, aké vytvoriť okraje a ako pracovať s jej obsahom.

Vitajte u ďalšej lekcie ohľadom nastavenia v CSS 3, v ktorej si ukážeme, ako pracovať so vzhľady okrajov, aké im možno nastaviť farby, veľkosť a štýl. V tejto lekcii sa teda naučíme urobiť nasledovné:

Vlastnosť border

Pomocou vlastnosti border nastavujeme rámik okolo HTML elementu. Podobne ako u mnohých ďalších CSS 3 vlastností, aj border je zhrnutím vlastnosť, v ktorej nastavujeme rámčeku celkom 3 vlastnosti:

• šírku,
• štýl a
• farbu:

border: sirka styl barva;

A rovnako tak ako tomu bolo doteraz, nezáleží na ich poradie pri zápise. Pre každú zložku rámčeku existuje tiež zvlášť špecifická vlastnosť, ktorá ju nastavuje. Môžeme teda nastaviť iba jednu konkrétnu:

• border-width - Šírka rámika
• border-style - Štýl rámčeku
• border-color - Farba rámčeku

Ako hodnotu môžeme uviesť aj inherit, čím zdedíme vlastnosť border od rodičovského elementu. Ukážme si, ako to vyzerá v praxi. Vytvoríme si jednoduchý HTML element s triedou .okraj. V CSS potom nastavíme základné vlastnosti, teda výšku height: 200px;, Šírku width: 300px; a červený celistvý okraj s šírkou 3px border: #e84e4e solid 3px;:

<div class="okraj">

</div>

CSS:

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

Máme teda náš element s červeným rámikom okolo neho.

Tu je potrebné dávať si pozor na veľkosť šírky rámčeka. Ten sa totiž vykresľuje okolo nášho elementu, čo znamená, že na každej strane pridá ďalšie 3px. Celkovo teda element is orámovaním zaberie priestor o veľkosti 206x306px! Ak nám teda z nejakého dôvodu vadí na dolnej strane šírka 3px, môžeme ju jednoducho zmeniť pomocou vlastnosti pre konkrétnu stranu:

• border-bottom - Dolná hrana rámčeku
• border-left - Ľavá hrana rámčeku
• border-right - Pravá hrana rámčeku
• border-top - Horná hrana rámčeku

Šírku dolnej strany nastavíme teda na 1px, pravú stranu zmeníme na papuľou farbu a ľavej strane zmeníme štýl z celistvého na bodkovaný:

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

Výsledok na stránke:

Tieto vlastnosti síce nastavujú iba určitú stranu, ale pri ich použití musíme znovu špecifikovať farbu, šírku i štýl! Z príkladu tiež vyplýva, že štýl musí byť nastavený vždy, inak žiadny rámček nevznikne.

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

Už sme si teda ukázali ako rámček vytvoriť a nastaviť jeho základné vlastnosti. Ak chceme, môžeme si border rozpísať do troch vlastností, v ktorých sa nastavuje len to, k čomu sú určené:

• border-width - Nastavuje šírku orámovania
• border-color - Nastavuje farbu orámovania
• border-style - Nastavuje štýl orámovania

Keď sa vrátime k nášmu pôvodnému nastaveniu elementu, môžeme teda separovať vlastnosť border na jednotlivé zložky:

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

Vizuálne nenastala žiadna zmena, je to len dlhší zápis v kóde:

Vrátime sa ale k zmenám, čo sme chceli urobiť pri jednotlivých strán. K vlastnostiam upravujúcim určitú stranu pridáme aj čo presne v nej chceme upravovať. U border-bottom pridáme ešte width, u border-right pridáme color au border-left pridáme style:

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

Prehliadač tak vie, že meníme iba jednu určitú vec, a zvyšok si doplní podľa celkového nastavenia:

border-width

Už vieme ako nastavenie šírky funguje, pozrieme sa teda aké prednastavené hodnoty možno zadať:

• thin - Tenký rámček (1px).
• medium (predvolené) - Stredne široký rámček (3px).
• thick - Tlustý rámček (5px).
• (Šírka) - Šírku môžeme zadať napr. V pixeloch, teda ako 5px a podobne.
• inherit - Zdedí šírku rámika nadradeného elementu.

Ak žiadnu hodnotu nezadáme, rámček sa vykreslí s prednastavenou hodnotou medium. Je možné zadať aj viac ako jednu hodnotu nasledujúcim spôsobom:

border-width: thin thick;

V tomto prípade prvá hodnota označuje vodorovnej hrany (horné a dolné) a druhá hodnota označuje zvislej hrany (ľavú a pravú):

Keď zadáme 3 hodnoty:

border-width: thin medium thick;

prvá označuje hornú hranu rámčeka, druhá ľavú a pravú, tretí dolný:

Hodnoty môžeme zadať samozrejme aj 4 a tak nastaviť individuálne všetky 4 hrany rámčeka v poradí hornej, pravá, dolná, ľavá:

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

Výsledok rôznych veľkostí rámčekov:

border-color

Farba sa nastavuje na rovnakom princípe ako šírka. Ak nie je nastavená, má rámik automaticky čiernu farbu.

• barva - Farbu môžeme špecifikovať slovne (napr. blue), RGB kódom alebo napríklad hexadecimálne notáciou.
• transparent - Priehľadná farba, rámik sa teda nevykresľuje.
• inherit - Farba rámčeku sa určí podľa rodičovského elementu.

Pri zadávaní viacerých hodnôt potom platia rovnaké pravidlá ako pre šírku:

border-color: #5454ff green;

výsledok:

Tri hodnoty:

border-color: #5454ff #e84e4e green;

výsledok:

A všetky 4 hodnoty:

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

Každý rámik má inú farbu:

border-style

A ako posledný sa pozrieme na to aké rôzne štýly možno nastaviť nášmu rámčeka:

• none - Bez rámčeka.
• hidden - Rámček sa nevykreslí (rovnaký efekt ako pri none).
• dotted - Bodkovaný rámček.
• dashed - čiarkované rámček.
• solid - Celistvá plná čiara.
• double - Dvojitá čiara.
• groove - 3D rámček s efektom groove (drážky).
• ridge - 3D rámček s efektom ridge.
• inset - 3D rámček s efektom inset (ako stlačené tlačidlo).
• outset - 3D rámček s efektom outset (ako nestlačené tlačidlo).
• inherit - Zdedí štýl čiary rámčeka nadradeného elementu.

Opäť pri zadaní viac ako jednej hodnoty platia rovnaké pravidlá ako u šírky a farby:

border-style: solid dotted;

výsledok:

Dvojitý a bodkovaný rámček:

border-style: solid dotted double;

výsledok:

Čiarkovaný, dvojitý a bodkovaný rámček:

border-style: dashed solid dotted double;

výsledok:

Ak niečomu nerozumiete, odporúčam stiahnuť si súbory v prílohe k tejto lekcii a všetko si poriadne vyskúšať:)

V ďalšej lekcii, Pokročilejšie okraje a rámčeky v CSS 3 , si ukážeme ako pracovať s tvarom okrajov rámčekov a pokročilým nastavením farebného vzhľadu.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.