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 hodnotou right 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);, kde grayscale může nabývat číselné hodnoty 0, 0.1, 0.2, ... až 1 podle toho, na kolik chceme obrázek "zčernobílit". Hodnotu vlastnosti grayscale lze uvádět také v procentech. Můžeme si vyzkoušet zadat např. hodnotu 0.5 (nebo 50%), 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š.