Body zdarma PHP týden
Pouze tento týden sleva až 80 % na PHP e-learning
Využij podzimních slev a získej od nás až 40 % bodů zdarma! Více zde

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

Unicorn College 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

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

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 1644x (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?
55 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.
Předchozí článek
Plovoucí obsah v HTML
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 (34)

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.2.2018 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.2.2018 13:40
Péťa
Avatar
Odpovídá na Peter Butora
Štěpán Halíř:11.2.2018 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  +2 11.2.2018 16:47
Per aspera ad astras
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Matěj Bína
Člen
Avatar
Matěj Bína:4. března 17:52

Vědět tak o tom paddingu/marginu dvěma čísly dřív, to by ušetřilo práce ._.

Většina materiálů je pro mě opakováním, ale i tak se dobře bavím a nacházím vždycky nějakou novinku nebo upgrade :) Gj.

 
Odpovědět 4. března 17:52
Avatar
Tomáš Knor
Člen
Avatar
Tomáš Knor:28. března 15:08

Nevím co dělám špatně ale header a section se my nechtěj zarovnat vedle sebe.

CSS kód:

.centrovany{
text-align: center;
}
body{

font-family: Verdana;
font-size: 14px;
}
h2, h3, h4, h5, h6{
text-align: center;
color:rgb(100, 200,0);
font-family: Arial;
text-shadow: 3px 3px 2px #2e431e;
}
h1{
font-size: 2em;
font-weight: normal;
color: white;
text-align: center;
text-shadow: 2px 2px 1px #0a294b;
}
h2{
font-size: 1.7em;
}

article{
background: url('obrazky/po­zadi.png') #009aca;
}

article header {
width: 250px;
float: left;
border: 2px solid #006797;
}

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

.cistic {
clear: both;
}

html kód:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styl.css" type="text/css"/>
<title>HoBiho portfolio </title>
</head>

<body>
<article>
<header>
<h1>O mně</h1>
</header>

<section>
<p>Vítejte</p>

<p> <img src="obrazky/a­vatar.png" alt="Programátor HoBi" class="vlevo"/>Učím se programovat v C# a teď jsem se ješrě rozhodl přidat HTML </p>
<p> Tato stránka je vytvořena za pomocí tutoriálu na itnetwork.</p>
<p> Kontkatovat mě můžete na kontaktní stránce.</p>
<p> Více o mých dovednostech na Moje dovednosti</p>
</section>
<div class="cistic"></div>
</article>
</body>
</html>

 
Odpovědět 28. března 15:08
Avatar
Tomáš Knor
Člen
Avatar
Odpovídá na Tomáš Knor
Tomáš Knor:28. března 15:15

Teď jsem zjistil, že i když si stáhnu ten Zip pod článkem tak se mi to stejně dá pod sebe. :-(

 
Odpovědět 28. března 15:15
Avatar
Jakub Dykas
Člen
Avatar
Jakub Dykas:29. srpna 18:26

Ahoj,

lze hodnotu vlastnosti border-radius nějak rovnou zadat do stylu selektoru v tom jednořádkovém zápisu?

article section {
border: 2px solid na toto místo #006797;
}

takže plácnu... něco jako:

article section {
border: 2px solid border 10px #006797;
}

A ještě pro zajímavost. Kolik tam lze zapsat těchto vlastností zapsat? Jak editor chápe, že 5px má být např. právě u zaoblení rohů a ne u tloušťky rámečku?

Díky moc :-)

 
Odpovědět 29. srpna 18:26
Avatar
Odpovídá na Jakub Dykas
Michal Šmahel:30. srpna 8:16

Ahoj, na to je poměrně jednoduchá odpověď - border-radius do vlastností border v souhrnném jednořádkovém zápisu zapsat nelze. Je tam možné zapsat pouze barvu (border-color), tloušťku (border-width) a styl (border-style) a to v libovolném pořadí. Možné to je, protože každá elementární vlastnost (z těch tří) nabývá jiných hodnot.

Dále viz https://developer.mozilla.org/…b/CSS/border

Editováno 30. srpna 8:16
Odpovědět 30. srpna 8:16
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
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 44. Zobrazit vše