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 hodnotunone
. - 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í vlastnostiborder-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čkuborder-style
: solid; - styl čáryborder-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š.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 2215x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
Komentáře


Zobrazeno 10 zpráv z 57. Zobrazit vše