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

HTML a CSS Statický web Rámeček, stín a boxmodel v CSS American English version English version

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Plovoucí obsah v HTML, jsme se naučili pracovat s plovoucím obsahem a pozicovat elementy vedle sebe.

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

Rámeček

Pole s článkem jsme rozdělili do 2 elementů, headeru a section, které jsme napozicovali vedle sebe. Dejme section (bílému poli s obsahem článku) rámeček.

Rámeček se v CSS nastaví přes shrnující vlastnost border. Jako hodnotu uvedeme tloušťku rámečku, typ čáry a nakonec barvu. Selektor pro section ve styl.css již máme, jelikož v něm nastavujeme float, šířku a pozadí. Rozšiřme tento styl o nastavení rámečku:

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

U vlastnosti border jsme uvedli šířku rámečku 2px, styl čáry "plná čára" (solid) a barvu čáry přes nám již známý šestnáctkový zápis, je to tmavě modrá. Bystřejší si jistě všimli, že jsme snížili šířku elementu z 710px na 706px. To proto, že k šířce elementu se připočítá z obou stran ještě 2x široký rámeček (šířka elementu se tedy zvětší o 4px a jelikož chceme celkovou původní šířku 710px zachovat, je nutné tyto 4px ubrat). Šířka rámečku se tedy do width nepočítá a element je vždy kvůli rámečku o chlup větší.

Podívejme se na výsledek:

HTML rámeček přes CSS vlastnost border

Jen opět připomenu, že jsme použili barvu, co nám do designu ladí.

Stejného stylu lze dosáhnout tak, že vlastnost border rozepíšeme na její 3 složky:

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

Jelikož je tento zápis delší, není důvod ho používat, pokud nechceme třeba jen změnit určitou složku. Uvádím ho pro úplnost a hlavně proto, abyste mu rozuměli, když se s ním někde setkáte.

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.

Vyzkoušejte si je :) 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í.

Kulaté rohy

Zajímavou vlastností je border-radius, která umožňuje zakulatit rohy rámečku. Zkusme si to a přidejme si ji do stylu section:

border-radius: 10px;

Výsledek:

Kulaté rohy rámečku v HTML a CSS

Obykle se nepoužívají hodnoty vyšší než 10px, protože nevypadají dobře. Pokud nastavíme velmi vysokou hodnotu, stane se z elementu kruh. Lze tak udělat např. kruhová tlačítka.

Zajímavé je, že border-radius lze použít i u obrázků, rohy se poté zakulatí. Vysoké hodnoty dají obrázek do kruhu. Vyzkoušíme si to.

Pro testovací účely lze obejít psaní selektoru a napsat styl přímo do HTML, slouží k tomu HTML atribut style. Je určitě jasné, že tím znepřehledňujeme kód a porušujeme hlavní princip opddělení obsahu a vzhledu. Nicméně pokud vymýšlíme design a zkoušíme co vypadá dobře, je tento atribut velmi užitečný. Upravme tedy náš obrázek v HTML:

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

Výsledek:

Kulaté rohy rámečku v HTML a CSS

Do designu naší konkrétní šablony se kulaté rohy příliš nehodí, proto vlastnosti zase odstraňme. Pokud by se nám líbily, odstraníme atribut style a uděláme pro ně plnohodnotný selektor v styl.css. Na hotových stránkách by se ideálně atribut style neměl u HTML elementů nikde objevit.

Více o rámečká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í CSS 3 vlastnosti text-shadow. Stín můžeme nastavit libovolnému elementu na stránce pomocí vlastnosti box-shadow. My ostylujeme stín section takto:

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

První 2 hodnoty jsou pozice stínu, další rozostření, poslední barva. Vlastnost ostyluje obdélníkový stín okolo elementu. Podívejme se na výsledek:

Stín elementů v HTML pomocí CSS vlastnosti box-shadow

Odsazení

Obsah section je velmi nalepený na okraje, což působí nevzhledně. Bývá dobrým zvykem udržovat mezi elementy určité rozestupy. Ty můžeme nastavit pomocí CSS vlastností padding a margin. Rozdíl mezi nimi se vysvětluje na tzv. boxmodelu (česky někdy bývá přeloženo jako "krabičkový model"). Vypadá takto:

Box model v CSS pro HTML element

Na obrázku vidíme element (např. náš section) a rámeček (border) 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šene řečeno: padding je vnitřní odsazení, margin to vnější.

Ani jeden okraj se podobně jako rámeček nepočítá do velikosti elementu! Do stylu k section nastavme padding na 20px a musíme také opět snížit šířku elementu o 40px (20px z každé strany):

padding: 20px;
width: 666px;

Tím jsme docílili 20px vnitřního odsazení na všech stranách:

Okraj padding v HTML ostylovaný přes CSS

Vlastnost lze rozepsat i takto:

padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-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 (v pořadí horní, pravý, dolní, levý):

padding: 20px 20px 20px 20px;

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

padding: 20px 20px;

Kde první hodnota udává okraj svislý (horní a dolní) a druhá vodorovný (levý a pravý). V příští lekci, Navigační menu, patička a HTML entity, se podíváme na navigační lištu, kód z dnešního HTML/CSS tutoriálu naleznete jako vždy ke stažení v příloze.


 

Stáhnout

Staženo 1489x (75.2 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
47 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Plovoucí obsah v HTML
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Cvičení k 10.-11. lekci HTML a CSS
Aktivity (3)

 

 

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

Avatar
albertpatera
Redaktor
Avatar
albertpatera:16.12.2015 23:49

nebo stačí nastavit elementu vlastnost:

background-repeat: no repeat;
 
Odpovědět 16.12.2015 23:49
Avatar
Mate
Člen
Avatar
Mate:3.4.2016 18:29

Ahoj chtěl bych se zeptat, proč nemám obrázek centrovaný na střed. Nevím kde dělám chybu. Kód mám následující:

Editováno 3.4.2016 18:31
 
Odpovědět 3.4.2016 18:29
Avatar
Mate
Člen
Avatar
Odpovídá na Mate
Mate:3.4.2016 19:03

Už jsem si to opravil :)

 
Odpovědět 3.4.2016 19:03
Avatar
Neaktivní uživatel:14.6.2016 12:10

Styly čáry - double lze přiřadit k posledním 3D stylům :-) širší rámeček. ;-)

Odpovědět 14.6.2016 12:10
Neaktivní uživatelský účet
Avatar
Richard Luko
Člen
Avatar
Odpovídá na Mate
Richard Luko:26.1.2017 21:38

Inak tieto poznámky k textu ktoré máš, to je dobrý nápad. To začnem využívať.

Odpovědět 26.1.2017 21:38
S Bohom je všetko možné
Avatar
Veronika Zouharová:18.11.2017 9:56

Prosím pěkně, jak zaoblit zároveň rámeček i obrázek v css? Jediné jak mi to funguje je přes style přímo u img.

<div class="obrazek"><img src="img/kopec.jpg" style="border-radius: 15px;"></div>

.obrazek{
padding: 10px 10px 40px 10px;
border-radius: 30px;
border: solid 3px #7a7a7a;
}

 
Odpovědět 18.11.2017 9:56
Avatar
Odpovídá na Veronika Zouharová
Štěpán Halíř:18.11.2017 13:53

Ahoj,
do svých stylů si přidej tento:

.obrazek img {
        border-radius: 15px;
}

Říkáš tím, že veškeré obrázky (img) ve třídním selektoru .obrazek, budou mít border-radius na 15 px. Působíš tak tedy konkrétně na img, nikoliv celkově na .obrazek. Mělo by ti to normálně jít. :-)

Odpovědět 18.11.2017 13:53
Per aspera ad astras
Avatar
Odpovídá na Štěpán Halíř
Veronika Zouharová:18.11.2017 14:34

Jo tákhle je to, tak super funguje. Děkuji moc za rychlou odpověď :)

 
Odpovědět  +1 18.11.2017 14:34
Avatar
Peter Butora
Člen
Avatar
Peter Butora:11. února 13:40

Ahoj, díky mo za tutoriál stále více mě to baví když vidiím že můj web vypadá stále více k světu a lépe :3 :D

A potřebuji se doptat k čemu pořádně slouží to <div class> jen k označení aby se na to použila ta třída?

Odpovědět 11. února 13:40
Péťa
Avatar
Odpovídá na Peter Butora
Štěpán Halíř:11. února 16:47

Ahoj,
ano, div je blokový element, který v sobě nenese nic, co by samo text stylovalo. Používá se nejvíce jako nějaký blok, který pak v CSS souboru stylujeme, a to právě pomocí class nebo id. Dříve tím byl stavěn celý layout stránek, což ale nahradily značky, se kterými tento kurz pracuje.

Odpovědět  +1 11. února 16:47
Per aspera ad astras
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 39. Zobrazit vše