Lekce 14 - Obtékání v HTML - Float, Stín
V předešlém cvičení, Řešené úlohy k 7.-13. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
Naposled jsme v HTML/CSS tutoriálu skončili vložením
tagu <article>
, ve kterém se nacházela hlavička
(<header>
) a sekce s článkem
(<section>
). Naše stránka vypadá asi takto:
Dnes si ukážeme, jak k lepšímu rozvržení naší stránky využijeme obtékání prvku a posuneme tímto náš obrázek vpravo vedle textu. Podíváme se také jak lze využít nastavení stínu.
Plovoucí obsah (float
)
Float umožňuje nastavit obtékání elementu dalším obsahem - například pokud chceme do textu umístit obrázek a chceme, aby jej text nějakým způsobem obklopoval (tak, jako to známe například z Wordu a jiných textových editorů).
Dříve se používal float
k pozicování
elementů v layoutu vedle sebe. Toto užití je dnes už špatně. Používáme
k tomu flexbox, o kterém si povíme později. Nikdy bychom
float
neměli používat k vytváření layoutu stránky!
Někdo si myslí, že se float
už nemá vůbec
používat. Float jako takový ovšem špatně není a je to naprosto validní
vlastnost k obtékání elementů v textu.
Vlastnost float
použijeme na obrázek s naším avatarem,
který má již přiřazenou třídu .avatar
.
V CSS nyní upravíme selektor pro třídu .avatar
, kde jsme
doposud měli definovanou pouze šířku. K ní vložíme tyto další
vlastnosti:
.avatar{ float: right; width: 300px; padding-left: 10px; filter: grayscale(1); }
Ty nám umožní nastavit následující:
- vlastnost
float
s hodnotouright
umožní, že obrázek bude umístěn vpravo a obtékán textem zleva
Rovnou jsme obrázku nastavili i několik dalších věcí:
- vlastnost
padding
, o které si povíme dále v kurzu, zajistí odsazení obrázku, aby se text nenalepil přímo na fotografii - a přidání černobílého vzhledu díky vlastnosti
filter: greyscale(1);
, kdegrayscale
může nabývat číselné hodnoty0
,0.1
,0.2
, ... až1
podle toho, na kolik chceme obrázek "zčernobílit". Hodnotu vlastnostigrayscale
lze uvádět také v procentech. Můžeme si vyzkoušet zadat např. hodnotu0.5
(nebo50%
), abychom věděli, že i takové možnosti stylování CSS nabízí.
Floatem lze do textu vložit i jiné elementy než obrázky, je jim ovšem vždy potřeba nastavit pevnou šířku.
Ukončení obtékání
(clear
)
Někdy se může stát, že je text kratší, než je výška obrázku.
Obrázek pak může začít obtékat další element, který je za textem a
stránka by se nám rozhodila. Proto na konec textu vložíme element s
vlastností clear
. Na takový "čistič" nesmíme zapomenout a
obtékání na konci obsahu takto zastavit. Proto si jej nyní rovnou
přidáme.
Na konec <section>
tedy přidáme <div>
se třídou cistic
, tedy celým zápisem
<div class="cistic"></div>
:
<section> <img src="obrazky/avatar.jpg" class="avatar" alt="Programátor HoBi"/> <p> Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde. </p> <p> Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>. </p> ... <div class="cistic"></div> </section>
Následně si v CSS souboru pro tuto třídu vytvoříme selektor
.cistic
.
.cistic { clear: both; }
Vlastnost clear
nabývá hodnot left
,
right
nebo both
, podle toho, z jaké strany chceme
obtékání plovoucích elementů ukončit. Obvykle chceme jednoduše na konci
textu ukončit všechno obtékání, protože dále již text nepokračuje, a
vložíme tam tedy jednoduše <div>
s
clear: both
.
Výsledkem tedy je, že je fotka v šedých tónech a obtékána textem, což je nejlépe vidět při zmenšení prohlížeče:
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
. Ukážeme si to
na elementu <article>
s článkem, i když stín v designu
není, abychom si vlastnost vyzkoušeli. Pak stín zas odebereme. Do selektoru
article
přidáme nastavení box-shadow
:
article { margin: 0 auto; ... box-shadow: 2px 2px 7px #1c2228; }
Zadali jsme několik hodnot:
- 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:
Po vyzkoušení si vlastnost box-shadow
s uvedenými hodnotami
ze selektoru article
smažeme.
V příští lekci, Rámeček a boxmodel v CSS, si vysvětlíme tzv. boxmodel a dokončíme oblast s článkem.
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 7034x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS