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š.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 3535x (2.27 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS