V minulej časti som vám ukázal trendy vo svete webdizajnu na rok 2017. Dnes by som chcel napísať viac technickú časť - ako tvoriť ne-obdĺžníkové tvary (ktoré ste si mohli všimnúť aj na stránkach z predchádzajúceho článku). Pokiaľ ste developer, webdizajnér alebo sa len proste zaujímate o trendy vo webdizajne, pokúsim sa popísať čo najlepšie niektoré neštandardné tvary.

Aby som lepšie priblížil, čo znamenajú tie ne-obdĺžníkové tvary, hneď na úvod pripájam pár príkladov, ktoré ma v tomto smere najviac zaujali:

Zdroj: https://dribbble.com/shots/3141626-Design-Agency-Website)

Zdroj: https://dribbble.com/shots/3191881-xishi-coming)

Zdroj: https://dribbble.com/shots/3192224-Robin-Movies)

Zdroj: https://dribbble.com/shots/3191983-Mail-Message-Selection)

Zdroj: https://dribbble.com/shots/3191663-One-from-the-archive)

Ale ako dosiahnuť podobné výsledky? Možností je hneď niekoľko a aj si ich uvedieme.

Obrázky

Najjednoduchšou cestou sú obrázky. V grafickom editore (napríklad Photoshop) si vytvoríme/nakreslíme objekt, ktorý chceme / plánujeme pridať na stránku. Zvyšok necháme priehľadný, nastavíme mu pozadie tohto obrázka a teda vytvoríme dojem, že je časť elementu odstrihnutá. No nevýhodou je, že stratíme dobrú responzivitu, nakoľko pri zmene veľkosti obrázka sa stráca kvalita a obrázok vyzerá rozmazane. Taktiež je to položka načítaná externe, čo zbytočne zaberá miesto pre jednoduchý tvar. Ukážka príkladu na stránke CodePen.io:

SVG

Oproti obrázkom je cesta SVG oveľa efektívnejšia, ľahko upraviteľná, všestranná a hlavne je jednoduchá k responzivite. Vyzerá pekne na všetkých prehliadačoch a netreba sa strachovať o stratu kvality. SVG je v tomto prípade najviac odporúčané riešenie.

SVG môžeme dokonca využiť v rôznych prípadoch podľa toho, na čo ho potrebujeme. Napríklad, ak chceme, aby sa zachoval uhol skosenia, pre SVG nastavíme výšku v hodnotách vw (view-width - hodnota šírky obrazovky):

Ak chceme, aby veľkosť zostala rovnaká (a teda uhol sa vždy zmení), jeho výšku nastavíme v px (pixeloch):

A nemusíte si len vyberať, môžete si zvoliť akýkoľvek štýl viacerých tvarov a potom pri responzivite zvoliť, ktorý sa zobrazí len pri počítačoch a ktorý len pri mobiloch, alebo menších zariadeniach. Prikladám ďalšiu CodePen ukážku. Pre otestovanie responzivity zmenšite veľkosť zobrazenia:

Dokonca je možné vytvoriť aj takýto “zadoček”:

V niektorých prípadoch budete chcieť použiť SVG ako pozadie. Jednoducho ako pri obrázkoch použitím štýlu “background: url(divider.svg);”.

Clip-path

SVG nemusí všetko vyriešiť. V uvedených príkladoch sme predpokladali, že použitý tvar bude mať solídnu farbu, napríklad bielu. Ale čo ak má tvar byť súčasťou komplikovaného pozadia, ako je napríklad gradient, alebo iný obrázok? Clip-path vytvorí pozadie podobné ako SVG a jeho skosenie (pozrite CSS v príklade) bude priehľadné. Takže element nasledujúci po ňom môžeme posunúť o rovnakú hodnotu vyššie a výsledok bude podľa očakávaní. Avšak veľkou nevýhodou clip-path je jeho podpora v prehliadačoch.

Border-radius

Pokiaľ vieme, že náš plánovaný tvar je zaoblený, najlepšia voľba bude border-radius. Avšak jeho nevýhoda je tá, že môžeme robiť len oblé tvary a tvary, ktoré som uviedol predtým, by bolo nemožné vytvoriť.

Transform: skew

Ak vieme, že náš tvar má byť lichobežníkový, najlepšie bude použiť štýl transform: skewY(). Pozadie však vytvoríme ako dodatočný element s absolútnou pozíciou, nastavíme veľkosti, pridáme farbu a skosenie spravíme jednoduchým štýlom, napríklad transform: skewY(-4deg).

Nie je možné vybrať len jeden najlepší spôsob, ale treba vybrať ten, ktorý sa najlepšie hodí k danej situácii. Na koniec prikladám tabuľku so zhodnotením:

Zdroj obsahu: https://css-tricks.com/creating-non-rectangular-headers/