Lekce 11 - Rámeček, stín a boxmodel v CSS

V minulé lekci, Pozicování v HTML - Flexbox, float a grid, jsme se naučili pozicovat elementy vedle sebe.

V dnešním HTML/CSS tutoriálu dokončíme pole s článkem a naučíme se další nové vlastnosti HTML.

Vlastnost box-sizing

Do stylování našeho body přidáme vlastnost box-sizing, jehož výchozí hodnotou je content-box. Ta udává, že pokud nastavíme šířku nějakého elementu např. na 100 pixelů a později budeme chtít přidat třeba padding nebo rámeček (border), zvětší nám nově přidané vlastnosti celkovou šířku “boxu”. To může být u vytváření layoutu problematické.

Nastavíme proto hodnotu na border-box. Tím se stane, že náš element zůstane pořád stejně široký (oněch 100 pixelů), protože přidaný padding nebo border zaberou jeho vnitřní prostor.

Referenční tlačítko

Vytvořme si tlačítko odkazující na podstránku s našimi referencemi (soubor reference.html si můžeme vytvořit, budeme na něm však pracovat až později. Nyní to tedy není nutné).

Do index.html vložíme na konec <section> následující řádky:

<p class="tlacitko-odstavec">
            <a href="reference.html" class="reference-tlacitko">Moje reference</a>
</p>

Budeme stylovat třídu reference-tlacitko, třídu tlacitko-odstavec využijeme v pozdější lekci.

Pojďme si nyní toto tlačítko ostylovat. Do našeho CSS vložíme tento kód:

.reference-tlacitko {
    background: #70B73A;
    color: white;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}

Pojďme si říct, co jsme s tlačítkem udělali:

• Nastavili jsme mu zelené pozadí (background), barva textu (color) je bílá.
• Velikost písma (font-size) je zmenšena vůči zbytku stránky.
• Jelikož se jedná o odkaz (na další stránku), defaultně by se nám podtrhl, což by ovšem nevypadalo moc dobře. Proto tuto “dekoraci” zrušíme nastavením vlastnosti text-decoration na hodnotu none.
• Nastavíme, aby se text vždy vypsal velkými písmeny (text-transform: uppercase;).
• Ohraničíme tlačítko pomocí vlastnosti padding.
• A především se naučíme novou vlastnost, border-radius, kterou nastavíme, jak moc se zakulatí rohy rámečku. U tlačítek většinou chceme, aby byly rohy oblé. Občas se stane, že chceme zobrazovat kulatou fotku (například profilové obrázky velice často bývají v kruhu) - toho docílíme rovněž pomocí vlastnosti border-radius.

Výsledek bude vypadat takto:

Rámeček

Samotnou vlastnost border (rámeček) v našem projektu příliš nevyužijeme, ale protože je důležité znát ji, vysvětlíme si některé její možnosti.

Pro představu, jak rámeček funguje, můžeme například vlastnost border vložit do třídního selektoru .domu-article:

.domu-article {
  display: grid;
  ...
  border: 3px solid green;
}

Výše uvedený zápis vlastnosti border s hodnotami 3px solid green je zkráceným zápisem těchto vlastností:

• border-width: 3px; - šířka rámečku
• border-style: solid; - styl čáry
• border-color: green; - barva rámečku

S tímto stylem zápisu se budete v praxi často setkávat.

Styly čáry

Jako styl čáry můžete použít hodnoty:

• none - Bez rámečku.
• hidden - Rámeček se nevykreslí, ale zabírá místo.
• dotted - Tečkovaný.
• dashed - Čárkovaný.
• solid - Plná čára.
• double - Dvojitý.
• groove - 3D rámeček s efektem groove.
• ridge - 3D rámeček s efektem ridge.
• inset - 3D rámeček s efektem inset.
• outset - 3D rámeček s efektem outset.
• inherit - Zdědí styl čáry rámečku nadřazeného elementu.

Poslední 3D styly jsou dobře vidět jen s širokým rámečkem. Všechny hodnoty jsou samozřejmě opět popsané v českém CSS 3 manuálu - Border style včetně ukázek toho, jak vypadají.

Stránka s rámečkem by vypadala takto:

Vlastnost border s hodnotami 3px solid green ze třídního selektoru .domu-article jsme si vyzkoušeli, a nyní ji smažeme.

Více o rámečcích naleznete v českém CSS 3 manuálu - Rámečky.

Stín

Se stínem jsme se již v CSS setkali, byl to stín u textu pomocí CSS3 vlastnosti text-shadow. Stín můžeme nastavit libovolnému elementu na stránce pomocí vlastnosti box-shadow. My ostylujeme stín domu-article takto:

.domu-article {
  display: grid;
  ...
  box-shadow: 2px 2px 7px #1c2228;
}

• První 2 hodnoty (2px 2px) jsou pozice stínu.
• Třetí hodnotou (7px) je rozostření.
• Poslední hodnotou je barva.

Vlastnost ostyluje obdélníkový stín okolo elementu. Podívejme se na výsledek:

Opět, po vyzkoušení si vlastnost box-shadow s uvedenými hodnotami ze třídního selektoru .domu-article smažeme.

Odsazení

V předchozích lekcích jsme elementům nastavovali padding a margin. Nyní si pojďme lépe vysvětlit, jak tyto vlastnosti fungují.

Rozdíl mezi paddingem a marginem se vysvětluje na tzv. boxmodelu (česky někdy bývá přeloženo jako "krabičkový model"), který vypadá takto:

Na obrázku vidíme element a rámeček kolem něj. Rozestup mezi rámečkem a obsahem elementu se nazývá padding. Rozestup mezi rámečkem a okolím elementu se nazývá margin. Zjednodušeně řečeno: padding je vnitřní odsazení, margin to vnější.

Vlastnosti padding a margin lze rozepsat i takto:

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

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

Zápis výše bychom použili v případě, že bychom chtěli nastavit třeba jen okraj z jedné strany nebo z každé strany jiný. Jednotlivé hodnoty můžeme uvést i ve shrnujícím zápisu, který je v pořadí horní, pravý, dolní, levý:

padding: 20px 20px 20px 20px;
margin: 20px 20px 20px 20px;

Jako třetí typ zápisu se někdy používá uvedení pouze dvou hodnot:

padding: 20px 20px;
margin: 20px 20px;

Kde první hodnota udává okraj svislý (horní a dolní) a druhá vodorovný (levý a pravý).

Kód z dnešního HTML/CSS tutoriálu naleznete jako vždy ke stažení v příloze níže. Ani rámeček, ani stín však nebudeme v příštích lekcích používat, jedná se pouze o ukázku. To co si však na našem budoucím webu ponecháme je referenční tlačítko

V následujícím cvičení, Řešené úlohy k 10.-11. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.

 

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