14. diel - Obtekanie v HTML - Float, Tieň

V predchádzajúcom cvičení, Riešené úlohy k 7.-13. lekcii HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

Naposledy sme v HTML/CSS tutoriále skončili vložením tagu <article>, v ktorom sa nachádzala hlavička (<header>) a sekcia s článkom (<section>). Naša stránka vyzerá asi takto:

Dnes si ukážeme, ako k lepšiemu rozvrhnutiu našej stránky využijeme obtekanie prvku a posunieme týmto náš obrázok vpravo vedľa textu. Pozrieme sa tiež, ako je možné využiť nastavenie tieňa.

Plávajúci obsah (float)

Float umožňuje nastaviť obtekanie elementu ďalším obsahom – ak chceme napríklad do textu umiestniť obrázok a chceme, aby ho text nejakým spôsobom obklopoval (tak, ako to poznáme napríklad z Wordu a iných textových editorov).

Predtým sa používal float na pozicionovanie elementov v layoute vedľa seba. Toto použitie je dnes už nesprávne. Používame na to flexbox, o ktorom si povieme neskôr. Nikdy by sme float nemali používať na vytváranie layoutu stránky!

Niekto si myslí, že sa float už nemá vôbec používať. Float ako taký však zlý nie je a je to úplne validná vlastnosť na obtekanie elementov v texte.

Vlastnosť float použijeme na obrázok s naším avatarom, ktorý má už priradenú triedu .avatar.

V CSS teraz upravíme selektor pre triedu .avatar, kde sme doteraz mali definovanú iba šírku. K nej vložíme tieto ďalšie vlastnosti:

.avatar {
    float: right;
    width: 300px;
    padding-left: 10px;
    filter: grayscale(1);
}

Tie nám umožnia nastaviť nasledujúce:

• vlastnosť float s hodnotou right umožní, že obrázok bude umiestnený vpravo a obtekaný textom zľava

Obrázku sme rovno nastavili aj niekoľko ďalších vecí:

• vlastnosť padding, o ktorej si povieme ďalej v kurze, zaistí odsadenie obrázku, aby sa text nenalepil priamo na fotografiu
• pridanie čiernobieleho vzhľadu vďaka vlastnosti filter: greyscale(1);, kde grayscale môže nadobúdať číselné hodnoty 0, 0.1, 0.2, ... až 1 podľa toho, na koľko chceme obrázok "sčernobieliť". Hodnotu vlastnosti grayscale možno uvádzať aj v percentách. Môžeme si vyskúšať zadať napr. hodnotu 0.5 (alebo 50%), aby sme vedeli, že aj také možnosti štýlovania CSS ponúka.

Floatom je možné do textu vložiť aj iné elementy ako obrázky, je im však vždy potrebné nastaviť pevnú šírku.

Ukončenie obtekania (clear)

Niekedy sa môže stať, že text je kratší než výška obrázku. Obrázok potom môže začať obtekať ďalší element, ktorý je za textom a stránka by sa nám rozhodila. Preto na koniec textu vložíme element s vlastnosťou clear. Na taký "čistič" nesmieme zabudnúť a obtekanie na konci obsahu takto zastaviť. Preto si ho teraz rovno pridáme.

Na koniec <section> teda pridáme <div> s triedou cleaner, teda celým zápisom <div class="cleaner"></div>:

<section>
    <img src="images/avatar.jpg" class="avatar" alt="Programmer SaBi" />

    <p>
        Welcome! I'm thrilled to help you transform your ideas into stunning, <strong>high-performing websites</strong>.
    </p>

    <p>
        I'm Sam Bittner, a web developer with a passion for creating dynamic and responsive websites. I have expertise in various technologies, including HTML, CSS, JavaScript, and Java with Spring Boot.
    </p>
    ...

    <div class="cleaner"></div>

</section>

Následne si v CSS súbore pre túto triedu vytvoríme selektor .cleaner.

.cleaner {
    clear: both;
}

Vlastnosť clear nadobúda hodnoty left, right alebo both podľa toho, z akej strany chceme obtekanie plávajúcich elementov ukončiť. Obvykle chceme jednoducho na konci textu ukončiť všetko obtekanie, pretože ďalej už text nepokračuje. Vložíme tam teda jednoducho <div> s clear: both.

Výsledkom je, že fotka je v sivých tónoch a je obtekaná textom, čo je najlepšie vidieť pri zmenšení prehliadača:

Tieň

S tieňom sme sa už v CSS stretli, bol to tieň textu pomocou CSS3 vlastnosti text-shadow. Tieň môžeme nastaviť ľubovoľnému elementu na stránke pomocou vlastnosti box-shadow. Ukážeme si to na elemente <article> s článkom, aby sme si vlastnosť vyskúšali, aj keď tieň v dizajne nie je. Potom tieň zas odoberieme. Do selektora article pridáme nastavenie box-shadow:

article {
    margin: 0 auto;
    ...
    box-shadow: 2px 2px 7px #1c2228;
}

Zadali sme niekoľko hodnôt:

• Prvé 2 hodnoty (2px 2px) sú pozície tieňa.
• Treťou hodnotou (7px) je rozostrenie.
• Poslednou hodnotou je farba.

Vlastnosť oštýluje obdĺžnikový tieň okolo elementu. Pozrime sa na výsledok:

Po vyskúšaní si vlastnosť box-shadow s uvedenými hodnotami zo selektora article zmažeme.

V budúcej lekcii, Rámček a boxmodel v CSS, si vysvetlíme tzv. boxmodel a dokončíme oblasť s článkom.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.