11. díl - 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

V minulém dílu našeho seriálu tutoriálů o tvobě jednoduchého webu v HTML jsme se naučili pracovat s plovoucím obsahem a pozicovat elementy vedle sebe.

Dnes 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ý). Příště se podíváme na navigační lištu, kód z dnešního článku naleznete jako vždy ke stažení v příloze.


 

Stáhnout

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

 

  Aktivity (2)

Článek pro vás napsal David Čápka
Avatar
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 se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (27 hlasů) :
4.629634.629634.629634.629634.62963


 


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

 

 

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

Avatar
Tonda Kozák
Člen
Avatar
Tonda Kozák:

Přidej do půlky mezeru a text se zalomí.

 
Odpovědět  +3 9.2.2015 18:25
Avatar
Michal Štěpánek:

Když tam není žádná mezera, tak nemůže vědět, kde to má zalomit. Dej tam "normální" text, tzn. slova a mezery a bude se to chovat tak, jak má...

Odpovědět 9.2.2015 19:08
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Už vím jak na to i na pozadí ;). Když chci mít na pozadí obrázek musí mít apsoŇ velikost 1366x768 nebo o trošku menší aby se obrázek neopakoval.

 
Odpovědět 18.5.2015 20:39
Avatar
Jozef Novák
Člen
Avatar
Jozef Novák:

Dobrý, chtěl bych se zeptat proč nefunguje zakulacení rámečku u tohoto kodu.Lépe řečeno proč nefunguje při rámečku s obrázkem. Děkuji

article section{
          width:300px;
          float:left;
          background:white;
          border: 10px solid ;
          border-image: url('pozadi.png') 30;
          border-radius: 10px; }
 
Odpovědět 19.11.2015 18:33
Avatar
Majki Rak
Člen
Avatar
Majki Rak:

Mám problem,,nefunguje mi article,,vše co do css article section napišu se neoběví,,zkoušel sem aji stahnout web od tud,,taky se nic z article nezobrazilo,,nevite někdo co s tím ?

 
Odpovědět 4.12.2015 21:08
Avatar
Odpovídá na Majki Rak
Martin Halada:

Možná v html kódu nemáš odkaz na css. Nebo v css zapomínáš na středníky.

Odpovědět 16.12.2015 19:54
Počítač je zařízení sloužící k řešení problémů, které by bez něj vůbec nevznikly.
Avatar
albertpatera
Redaktor
Avatar
Odpovídá na vojtanosek
albertpatera:

nebo stačí nastavit elementu vlastnost:

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

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. dubna 18:31
 
Odpovědět 3. dubna 18:29
Avatar
Mate
Člen
Avatar
Odpovídá na Mate
Mate:

Už jsem si to opravil :)

 
Odpovědět 3. dubna 19:03
Avatar
Neaktivní uživatel:

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

Odpovědět 14. června 12:10
Neaktivní uživatelský účet
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 33. Zobrazit vše