Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij narozeninovou akci až 80 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Python week + discount 80

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Box model v CSS pro HTML element

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

 

Předchozí článek
Pozicování v HTML - Flexbox, float a grid
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 10.-11. lekci HTML a CSS
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
290 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (47)

Avatar
Martin Pluhař:22.4.2021 0:10

Nevíte někdo proč mi nejde v CSS změnít velikost obrázku ? v Html ve style ano, když zadám bez selektoru jen img {width:256px;} tak to jde taky, ale jakmile si ulozim selektor jako např .profilovka {width: 256px;} tak to nic neuděla. Prosím o radu

 
Odpovědět
22.4.2021 0:10
Avatar
Martin Libich:23.8.2021 9:00

Mockrát nepíšu komenty pod články, ale už to musím napsat - i diskuse mě často ještě posunou a dovysvětlí některé detaily nebo rovnou celé myšlenky. Díky!

Odpovědět
23.8.2021 9:00
Pokud se ráno probudím, je vše v pořádku
Avatar
Barbora Danihelova:25.10.2021 15:52

Ahoj. Nezobrazuje sa mi zelene referencne tlacitko, uz to prepisuju asi hodinu a stale nic..som bezradna, niekto pomoc prosim ?

 
Odpovědět
25.10.2021 15:52
Avatar
Odpovídá na Barbora Danihelova
Monika Salajková:9.11.2021 17:30

Ahoj, jediné co tam vidím, tak jsou uvozovky v souboru html <a href="referen­ce.html" class="reference-tlacitko">

 
Odpovědět
9.11.2021 17:30
Avatar
Vlasta
Tvůrce
Avatar
Odpovídá na Barbora Danihelova
Vlasta:14.11.2021 6:07

Ahoj, v html souboru nemáš ukončený atribut "ahref", na konci odkazu musí být opět uvozovky. Pak by to mělo fungovat, takhle ti to totiž ten selektor vůbec nerozpozná. :) V budoucnu to poznáš i podle toho, že se ti to takto podtrhne/nezabarví. VS Code a podobné editory tím vývojářům hodně pomáhají přicházet na chyby a nepřehlížet formální detaily. :-)

Odpovědět
14.11.2021 6:07
It's all about the mindset.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Petra Fialová:24. února 10:09

Ahoj, referenčni tlačítko se mi nezobrazuje v MS Edge, když ho sama napíšu, ale ve vašem ukázkovém webu se v Edge zobrazí. V ostatních prohlížečích se mé tlačítko zobrazí normálně.
Prosím, poradíte?

 
Odpovědět
24. února 10:09
Avatar
Gabriela Feiková :7. března 20:41

Jak dám obrázek též do rámečku aby nebyl mimo? Vše mám podle návodu i vzoru zip 🤷‍♀️ Pouze jsem vyměnila obrázek než jsem zkusila orámování. Ale to by na to nemělo mít vliv přece 🤔

 
Odpovědět
7. března 20:41
Avatar
Lumír Kus
Člen
Avatar
Lumír Kus:11. března 11:18

Proč je v index.html použito

<p class="tlacitko-odstavec">

když tato třída pak ve styl.css není definována? Když to odstraním, vzhled tlačítka se nezmění. Samotné tlačítko je definováno v třídě

class="reference-tlacitko"
 
Odpovědět
11. března 11:18
Avatar
Ondřej Raška:18. června 18:41

Pokračuje rozpačitost a frustrace z minulé lekce. Nemůžu se ubránit dojmu, jako by autor někam spěchal a chtěl mít tuhle lekci za sebou co nejrychleji.

Změny v kódu už ani nedáváme do speciální obrazovky, ale info hodíme doprostřed odstavce normálního textu. Info o některých změnách/vrácení tam nedáme vůbec.

Rámečky vysvětlíme napůl s tím, že nejsou důležité. Což možná nejsou, ale toto polovysvětlení studenta akorát zmate. Jak napsat padding hodíme do obrazovky, ale neuvedeme konkrétní příklad

 
Odpovědět
18. června 18:41
Avatar
Jakub Žitný
Tým ITnetwork
Avatar
Jakub Žitný:23. června 13:08

Ahoj, prvních deset lekcí jsem upravil. Původní kurz byl nepříliš uspokojivě předělán a je nám líto, že jeho aktualizace byla pro naše studenty spíše na škodu. Díky moc za informace, které jste nechali tady v komentářích!

 
Odpovědět
23. června 13:08
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

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