11. diel - Rámček, tieň a boxového modelu v CSS

V minulej lekcii, Štylovanie textu v CSS - Google fonty, veľkosť fontu a tieň , sme si ukázali štylovanie písma pomocou Google fontov a nastavili veľkosť a tieň písma.

V minulej lekcii, Štylovanie textu v CSS - Google fonty, veľkosť fontu a tieň , sme sa naučili pracovať s plávajúcim obsahom a pozicový elementy vedľa seba.

V dnešnom tutoriále dokončíme polia s článkom a naučíme sa ďalšie nové vlastnosti.

Rámček

Pole s článkom sme rozdelili do 2 elementov, header a section, ktoré sme napozicovali vedľa seba. Dajme section (bielemu poli s obsahom článku) rámček.

Rámček sa v CSS nastaví cez sumarizuje vlastnosť border. Ako hodnotu uvedieme hrúbku rámčeka, typ čiary a nakoniec farbu. Selektor pre section vo styl.css už máme, pretože v ňom nastavujeme float, šírku a pozadia. Rozšíri tento štýl o nastavení rámčeka:

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

U vlastnosti border sme uviedli šírku rámčeka 2px, štýl čiary "plná čiara" (solid) a farbu čiary cez nám už známy šestnástkovom, je to tmavo modrá. Bystrejší si iste všimli, že sme znížili šírku elementu z 710px na 706px. To preto, že k šírke elementu sa pripočíta z oboch strán ešte 2x široký rámik (šírka elementu sa teda zväčší o 4px a keďže chceme celkovú pôvodnú šírku 710px zachovať, je nutné tieto 4px ubrať). Šírka rámčeka sa teda do width nepočíta a element je vždy kvôli rámčeku o chlp väčšie.

Pozrime sa na výsledok:

Len opäť pripomeniem, že sme použili farbu, čo nám do dizajnu ladia.

Rovnakého štýlu možno dosiahnuť tak, že vlastnosť border rozpíšeme na jej 3 zložky:

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

Keďže je tento zápis dlhší, nie je dôvod ho používať, ak nechceme treba len zmeniť určitú zložku. Uvádzam ho pre úplnosť a hlavne preto, aby ste mu rozumeli, keď sa s ním niekde stretnete.

Štýly čiary

Ako štýl čiary môžete použiť hodnoty:

• none - Bez rámčeka.
• hidden - Rámček sa nevykreslí, ale zaberá miesto.
• dotted - Bodkovaný.
• dashed - čiarkované.
• solid - Plná čiara.
• double - Dvojitý.
• groove - 3D rámček s efektom groove.
• ridge - 3D rámček s efektom ridge.
• inset - 3D rámček s efektom inset.
• outset - 3D rámček s efektom outset.
• inherit - Zdedí štýl čiary rámčeka nadradeného elementu.

Vyskúšajte si ich Posledný 3D štýly sú dobre vidieť len s širokým rámčekom. Všetky hodnoty sú samozrejme opäť popísané v českom CSS 3 manuálu - Border style vrátane ukážok toho, ako vyzerajú.

Guľaté rohy

Zaujímavou vlastnosťou je border-radius, ktorá umožňuje zaguľatiť rohy rámčeka. Skúsme si to a pridajme si ju do štýlu section:

border-radius: 10px;

výsledok:

Obykle sa nepoužívajú hodnoty vyššie ako 10px, pretože nevyzerajú dobre. Ak nastavíme veľmi vysokú hodnotu, stane sa z elementu kruh. Možno tak urobiť napr. Kruhová tlačidla.

Zaujímavé je, že border-radius možno použiť aj u obrázkov, rohy sa potom zaguľatia. Vysoké hodnoty dajú obrázok do kruhu. Vyskúšame si to.

Na testovacie účely možno obísť písanie selektora a napísať štýl priamo do HTML, slúži na to HTML atribút style. Je určite jasné, že tým zneprehľadňuje kód a porušujeme hlavný princíp opddělení obsahu a vzhľadu. Avšak ak vymýšľame dizajn a skúšame čo vyzerá dobre, je tento atribút veľmi užitočný. Upravme teda náš obrázok v HTML:

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

výsledok:

Do dizajnu našej konkrétnej šablóny sa guľaté rohy príliš nehodí, preto vlastnosti zase odstráňme. Ak by sa nám páčili, odstránime atribút style a urobíme pre nich plnohodnotný selektor v styl.css. Na hotových stránkach by sa ideálne atribút style nemal u HTML elementov nikde objaviť.

Viac o rámečkách nájdete v českom CSS 3 manuálu - Rámčeky.

Tieň

So tieňom sme sa už v CSS stretli, bol to tieň u textu pomocou CSS 3 vlastnosti text-shadow. Tieň môžeme nastaviť ľubovoľnému elementu na stránke pomocou vlastnosti box-shadow. My ostylujeme tieň section takto:

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

Prvé 2 hodnoty sú pozície tieňa, ďalšie rozostrenie, posledná farba. Vlastnosť ostyluje obdĺžnikový tieň okolo elementu. Pozrime sa na výsledok:

Odsadenie

Obsah section je veľmi nalepený na okraje, čo pôsobí nepekne. Býva dobrým zvykom udržiavať medzi elementmi určité rozostupy. Tie môžeme nastaviť pomocou CSS vlastností padding a margin. Rozdiel medzi nimi sa vysvetľuje na tzv. Boxového modelu (slovensky niekedy býva preložené ako "Krabičková model"). Vyzerá takto:

Na obrázku vidíme element (napr. Náš section) a rámček (border) okolo neho. Rozostup medzi rámčekom a obsahom elementu sa nazýva padding. Rozostup medzi rámčekom a okolím elementu sa nazýva margin. Zjednodušene povedané: padding je vnútorný odsadenie, margin to vonkajšie.

Ani jeden okraj sa podobne ako rámček nepočíta do veľkosti elementu! Do štýlu k section nastavme padding na 20px a musíme tiež opäť znížiť šírku elementu o 40px (20px z každej strany):

padding: 20px;
width: 666px;

Tým sme docielili 20px vnútorného čalúnenia na všetkých stranách:

Vlastnosť možno rozpísať aj takto:

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

Zápis vyššie sme použili v prípade, že by sme chceli nastaviť napríklad len okraj z jednej strany alebo z každej strany iný. Jednotlivé hodnoty môžeme uviesť aj vo zhrňujúcim zápisu (v poradí hornej, pravý, dolný, ľavý):

padding: 20px 20px 20px 20px;

Ako tretí typ zápisu sa niekedy používa:

padding: 20px 20px;

Kde prvá hodnota udáva okraj zvislý (horné a dolné) a druhá vodorovný (ľavý a pravý). V budúcej lekcii, Pozadie webu a veľkosť elementov , sa pozrieme na navigačnú lištu, kód z dnešného HTML / CSS tutoriálu nájdete ako vždy k stiahnutiu v prílohe.

V budúcej lekcii, Pozadie webu a veľkosť elementov , si ukážeme štylovanie pozadia webovej stránky a nastavíme výšku a šírku elementov.

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