11 -- rozloženie stránky 2, dekoratívne prvky v CSS

Flex

Ako sme naznačili v predošlej lekcii, ďalším spôsobom tvorby layoutu je použitie vlastnosti display: flex. Ide o lineárny layout (t. j. v riadku alebo stĺpci), ktorý uľahčuje mnoho problémy, ktoré sa musia inak riešiť rôznymi, nie práve šikovnými okľukami. Ako ukážkovú situáciu, kde je vhodné používať flex, môžeme uviesť fotogalériu, kde každá fotografia má svoju pevnú šírku, avšak chceme aby medzi fotografiami boli rovnaké rozostupy a pokiaľ sa fotografie nezmestia do jedného riadku, automaticky sa usporiadajú do dvoch, resp. viac. Úplne najdôležitejšia je poznámka, že táto vlastnosť sa správa responzívne, čiže sa nemusíme zaoberať tým, akú šírku má materský kontajner, v ktorom sú fotky povkladané.

Pre upresnenie: Grid (minulá lekcia) slúži na dvojrozmerný layout, čiže ho používame na tvorbu celkového layoutu stránky -- ide v podstate o akúsi responzívnu tabuľku, kde jednotlivé bunky vypĺňame jednotlivými sekciami stránky. Flex je jednorozmerný layout, ktorý používame už na nejakú podčasť stránky, čiže, ako sme spomínali, rôzne fotogalérie, položky tovaru v e-shope a pod. Flex vo všeobecnosti nie je úplne vhodný na tvorbu celkového layoutu, nakoľko pri komplikovanejšom rozložení stránky sa môže správať chaoticky. Hoci je možné nájsť rôzne návody, ako sa s tým popasovať, grid je predsa len na tento účel vhodnejší, zrozumiteľnejší a názornejší.

Podobne ako grid, aj flex sa formátuje na dvoch úrovniach:

• materský kontajner (flex container) -- nastavujeme tu smer toku, zalamovanie a pozíciu položiek (dcérskych kontajnerov) v rámci materského kontajnera, všeobecne slúži na globálne nastavenie flexu,
• položky (flex items) -- tu nastavujeme v akom poradí sa zobrazia položky materského kontajnera, prípadne vlastné zarovnanie, rozmery a rast.

Flex container

Pokiaľ chceme, aby sa položky v materskom kontajneri zobrazili ako flex, do príslušného selektora materského kontajnera musíme vložiť vlastnosť display: flex;.

Keďže flex (materský) kontajner zvyčajne obsahuje viacero položiek, vieme nastaviť smer a poradie v akom sa budú zobrazovať pomocou vlastnosti flex-direction. Taktiež vieme povedať, že pokiaľ sa položky nezmestia do jedného riadku (stĺpca) môžu sa zalomiť do ďalšieho riadku pomocou vlastnoti flex-wrap. Tieto dve vlastnosti môžu nadobúdať nasledovné hodnoty:

Ďalej okrem toku flex kontajnera vieme formátovať aj vodorovné a zvislé rozmiestnenie jednotlivých položiek (budeme predpokladať flex-direction: row;). Ako vidíme, východisková možnosť v našom prípade je, že všetky položky sú naukladané za sebou v ľavom hornom rohu.

Pokiaľ chceme meniť vodorovné rozmiestnenie jednotlivých položiek použijeme vlastnosť justify-content, ktorá môže nadobúdať nasledovné hodnoty:

Sledujte, ako sa mení rozloženie položiek v kontajneri (biele miesto okolo farebných obdĺžnikov). Jednotlivé názvy jasne určujú, akým spôsobom sa to vykoná. Dôkladne si však všimnite, aký je rozdiel medzi hodnotami space-around a space-evenly.

Podobným spôsobom vieme meniť aj zvislé rozloženie pomocou vlastnosti align-items. Prvé tri možnosti sú rovnaké ako vo vodorovnom umiestnení. Avšak, je tu aj možnosť stretch, ktorá roztiahne jednotlivé položky na celú výšku materského kontajnera.

Ako vidíme, existuje aj vlastnosť align-content, ktorá môže nadobúdať rovnaké hodnoty ako justify-content. Rozdiel oproti align-items je v tom, že tu nezarovnávame položky ako celok, ale zarovnávame jednotlivé riadky. Taktiež, táto vlastnosť v niektorých prípadoch prebije to, čo sme nastavili v align-items. Názornejšie si vyskúšajte toto správanie na nasledovnej úlohe.

ÚLOHA

Pracujeme opäť v ukážke 1 a pomocou možnosti "Preskúmať" budeme meniť jednotlivé hodnoty v selektore .container.

link Ukážka 1

1. Nastavte si šírku okna tak, aby ste mali všetky položky v jednom riadku. Skúšajte meniť hodnoty vlastností justify-content a align-items a sledujte ako sa mení biele miesto okolo jednotlivých položiek.

Ako dokonale vycentrovať položky (vodorovne aj zvisle) vzhľadom na .container využitím flexu?

Obidvom vlastnostiam nastavíme hodnoty center.

2. Teraz si okno zúžte tak, aby ste položky mali v dvoch riadkoch. Kliknutím do okna s vlastnosťami selektora .container pridajte vlastnosť align-content a sledujte ako sa správajú hodnoty. Všimnite si najmä, že hodnoty space-... sa správajú vzhľadom na riadky rovnako, ako je to v prípade justify-content.

Poznámka: na začiatku sme si uviedli predpoklad, že uvažujeme flex-direction: row. To má priamy vplyv na to, ako sa správajú hodnoty flex-start a flex-end vzhľadom na kontajner -- čiže, ide o začiatok/koniec v smere flexu -- a vlastne to aj vysvetľuje, prečo sa nepoužívajú napr. hodnoty left, top a podobne. Totiž pokiaľ by sme použili napr. flex-direction: row-reverse, hodnota flex-start by reprezentovala pravý horný roh, analogicky odvodíme hodnotu pre koniec flexu. Pri používaní rôznych smerov toku preto treba na toto dávať pozor 😉.

Flex items

Druhá úroveň, na ktorej nastavujeme flex, sú samotné položky. Podrobnejšie si vysvetlíme dve dôležité vlastnosti, ktoré majú najväčšie praktické využitie. Tieto vlastnosti nastavujeme už pre jednotlivé položky, čiže v našom prípade pre selektory .A, .B, .C, .D a .E.

Pre zobrazenie stránky na rôznych zariadeniach môžeme požadovať, aby sa jednotlivé položky zobrazovali v rôznom poradí. Poradie položiek vo flex kontajneri vieme meniť pomocou vlastnosti order. Je dôležité, aby všetky položky mali svoj vlastný a jedinečný selektor (tak, ako to máme napr. v ukážke, každá z piatich položiek je trieda charakterizovaná iným písmenom), pokiaľ im túto vlastnosť chceme priradiť. Vlastnosti order môžeme priradiť ľubovoľnú celočíselnú hodnotu (t. j. aj záporné čísla). Jednotlivé položky sa následne zobrazia od najmenšieho po najväčšie. Východiskovo sa položky zobrazia v takom poradí, ako sú zadané v HTML kóde, čiže pokiaľ dvom rôznym položkám priradíme rovnakú hodnotu order, zobrazia v takom poradí, ako sú napísané v HTML.

V praxi to vyzerá nasledovne (vyskúšajte si to na ukážke 1 meniť pre rôzne situácie):

Vlastnosť display: flex spôsobí, že položky budú zaberať len toľko miesta koľko je nutné (v našom prípade je okolo písmen nastavený len padding). V zásade môžeme každej položke nastaviť aj pevnú šírku, resp. výšku pomocou vlastností width a height. Avšak flex nám umožňuje nastavovať aj relatívne šírky (pokiaľ sú položky v riadku) jednotlivých položiek vzhľadom na materský kontajner. Robí sa to pomocou vlastnosti flex-grow, ktorej môžeme nastaviť ľubovoľnú hodnotu väčšiu, resp. rovnú 1 (táto je východisková). Pokiaľ nastavíme niektorej položke hodnotu flex-grow: 2, znamená to, že táto položka sa pokúsi zabrať dvakrát viac miesta, ako ostatné položky v kontajneri.

Avšak je dôležité povedať, že nie za každú cenu. Takáto položka nezaberie dvojnásobok miesta, pokiaľ by to znamenalo, že by mala vytlačiť nejakú inú do nového riadku. A naopak, pokiaľ je v riadku miesta dosť, pokojne zaberie aj viac ako dvojnásobok miesta, len aby bol riadok vyplnený (pravedpodobne kvôli tomu má táto vlasnosť názov "grow"). Vyskúšajte si to na ukážke nasledovne:

Priamočiarejším spôsobom, ako nastaviť šírku v prípade riadkového zobrazenia (a výšku v prípade stĺpcového zobrazenia) je pomocou vlastnosti flex-basis, kde zadávame konkrétnu hodnotu, napr. v pixeloch. Ďalšie nastavenie, ktoré môžeme položke priradiť je align-self, ktoré pre tú danú položku prepíše hodnotu, ktorá je zapísaná vo vlastnosti kontajnera align-items (čiže, ostatné zostanú zachované).

Poznámka na záver: Všetky vlastnosti, ktoré sme si uviedli či už pre flex alebo grid, sa aplikujú len vtedy, keď v príslušnom materskom kontajneri zadefinujeme príslušnú vlastnosť display: flex, resp. display: grid. Preto, keď ich chceme využívať, netreba na to zabudnúť.

Dekoratívne prvky v CSS

Prechody

Na webstránkach, špeciálne pri odkazoch, sa po prejdení kurzora často zmení farba písma, resp. sa vykoná nejaká iná grafická zmena. V CSS sme to robili pomocou špeciálneho selektora, ktorý má sufix :hover. Problém je, že tento prechod je v podstate len prebliknutie a môže pre návštevníka stránky pôsobiť nepríjemne. Našťastie, tieto prechody vieme animovať takým spôsobom, že pokiaľ dôjde k nejakej zmene hodnoty v CSS, táto zmena sa vykoná plynule.

Funguje to nasledovným spôsobom. Do selektora, ktorý chceme animovať (teda bez sufixu :hover) vložíme vlastnosť transition, kde uvedieme názov vlastnosti, ktorá sa má animovať a následne čas, za ktorý sa má prechod vykonať. Do selektora so sufixom :hover už len uvedieme výsledné hodnoty po prechode. Zápis teda vyzerá nasledovne:

V zásade dokážeme animovať akúkoľvek CSS vlastnosť, ktorej hodnoty sa dajú rozumným spôsobom interpolovať -- asi zbytočne by si robili prechod od jednej rodiny písma k inej.

Vyskúšajte si, ako v praxi funguje prechod na nasledovnej ukážke a skúste experimentovať (ide o selector .animated-button):

link Ukážka 2

Poznámka: pokiaľ chceme v možnosti "Preskúmať" meniť vlastnosti v stave :hover, robíme to nasledovným spôsobom:

Transformácie

Pokiaľ sa bavíme o prechodoch, určite treba spomenúť aj transformácie. S nimi sme sa už stretli pri práci v Inkscape a stretávame ich prakticky všade, kde sa tvorí grafika na počítači (či už 2D alebo 3D). V CSS môžeme pri prechode využiť škálovanie, posunutie a otočenie -- napr. po prejdení kurzora ponad tlačidlo, sa zväčší. Transformácie nastavujeme pomocou vlastnosti transform, pričom ako hodnotu uvedieme názov transformácie + hodnoty transformácie v zátvorke (môžu byť aj záporné):

• posunutie -- transform: translate(60px, 120px); -- prvá hodnota je posunutie v smere x (vodorovne), druhá hodnota v smere y (zvisle).
• otočenie -- transform: rotate(20deg); -- otočenie okolo stredu objektu, hodnota sa zadáva v stupňoch.
• škálovanie -- transform: scale(2, 3); -- prvá hodnota je škálovanie v smere x, druhá hodnota v smere y. Samotné číslo udáva škálovací faktor, t. j. koľkonásobne sa v danom smere obrázok natiahne vzhľadom na originálny rozmer (pre uniformné škálovanie musia byť obe hodnoty rovnaké).

V ukážke 2 môžete vidieť, ako to vyzerá v praxi (pozerajte triedu .transform-button). Transformáciu sme vykonali po prejdení kurzora ponad (:hover) a animovali sme ju pomocou vlastnosti transition. Navyše, naraz môžeme vykonať aj viac transformácií -- v takom prípade jednotlivé hodnoty oddelíme medzerou. Všimnite si, že transformácia nemá problém s prekrytím ostatných objektov na stránke a presahovať mimo viditeľné okno.

Priesvitnosť

Ďalším pekným efektom je použitie prechodu tak, že sa zmení priesvitnosť. Robí sa to pomocou CSS vlastnosti opacity, kde ako hodnotu vkladáme ľubovoľnú hodnotu v intervale 0 až 1, pričom 1 znamená, že objekt je nepriesvitný a 0 znamená úplne zmiznutie. Rozdiel oproti alfa kanálu, ktorý vieme nastaviť pri farbách je ten, že priesvitnosť vieme aplikovať na ľubovoľný kontajner (čiže, spriesvitníme aj texty, obrázky, pozadie a podobne). Taktiež, je hodné poznamenania, že opacity: 0 a display: none nemá ten istý efekt, nakoľko pri nulovej priesvitnosti sa kontajner ako taký v dokumente zachová, zatiaľ čo v druhom prípade z dokumentu zmizne úplne a nasledovný obsah sa tomu prispôsobí.

Gradienty

Ďalším spôsobom, ako nastaviť nejakú výplň pozadia je za obrázok zvoliť gradientný prechod pomocou vlastnosti background-image. Takisto ako v Inkscape, máme na výber lineárny gradient (linear-gradient) alebo radiálny gradient (radial-gradient). Nastavujeme ho podobným spôsobom ako transformácie, pričom do zátvorky uvádzame sklon gradientu a aspoň dve zastávky. Avšak Príklad zápisu vyzerá nasledovne:

Taktiež v ukážke 2 si môžete skúsiť gradient modifikovať v selektore .gradient-box.

Poznámka: v základnom CSS vieme nastavovať gradienty len ako pozadie nejakého kontajnera. Pokiaľ by sme chceli nastaviť gradientnú výplň napr. textu, museli by sme použiť Webkit.

Tiene

Tiene vieme pridávať dvom typom objektov. Osobitne ich vieme aplikovať na text a osobitne na samotný kontajner. Samotné názvy príslušných vlastností hovoria samy osebe:

V ukážke dva si môžete skúsiť modifikovať jednotlivé typy tieňov v selektore .shadow-box

Favicon a názov stránky

Hoci nejde o súčasť CSS, miesto na predstavenie faviconu je predsa len tu. Jedná sa o ikonku, ktorá sa zobrazí vedľa názvu stránky na karte a má ju prakticky každá stránka na internete, ktorú navštívime. Ako ju teda dostaneme do nášho projektu?

Do HTML súboru stačí vložiť do hlavičky nasledovný tag:

<link href="favicon.png" type="image/png" rel="icon">

Ako vidíme, tento tag má názov link a musí obsahovať tri atribúty. Prvým atribútom je href, kde zadávame cestu k súboru ikonky. Druhý atribút type zaznamenáva o aký druh súboru sa jedná (t. j. obrázok vo formáte .png) a tretí atribút rel hovorí, že tento link reprezentuj ako ikonu stránky.

Kedysi bolo možné vkladať ikony stránky len vo formáte .ico, avšak súčasne je podporovaný aj formát .png (čiže ikonku si viete v pohode nadizajnovať a vyexportovať v Inkscape). Pre správne zobrazenie je potrebné rešpektovať, aby ikonka bola vždy štvorcového formátu (t. j. veľkosť plátna je štvorec, ikonka môže byť hocijaký útvar v tomto štvorci), väčšinou stačí 64x64px.

Okrem ikonky potrebujeme aby sa naša stránka aj nejako volala, pridať jej nadpis, ktorý sa zobrazuje na karte v prehliadači vedľa ikonky. Ten pridáme jednoducho, a to tak, že do hlavičky HTML dokumentu vložíme tag:

<title>Moja webstránka</title>

Príklad vloženia faviconu a titulky je aj v našej ukážke 2.