luzer.sk

Dnes sa pozrieme na eye-candy stránku pripravovaného CSS3, čo ulahodí najmä web dizajnérom, ktorí majú z CSS 2.1 nočné mory..

V minulej časti sme sa pozreli na pseudotriedu nth-child, ktorá má skôr praktickejší význam, avšak dnes to bude najmä o kráse. O kráse kaskádových štýlov.. ;) Veď nejeden začínajúci web dizajnér by chcel mať ľahko a rýchlo vytvorené guľaté rohy, či priehľadnosť jednotlivých prvkov. Doteraz existovali len (častokrát) zložité postupy, ktorým nie všetci chápali, či rôzne JavaScriptové náhrady, čo nebolo najideálnejšie riešenie. No tie časy sa blížia ku koncu a my tak budeme mocť vytvárať nádherné dizajnérske lahôdky len na pár riadkoch css kódu. Avšak poďme sa na to pozrieť...

Zaoblené rohy sú dnes veľmi obľúbené nie len u surferov, no aj u samotných tvorcov webu. Tí vymýšľajú stále nové a nové techniky aby dosiahli, čo najkrajšie rohy, no niekedy je to naozaj bolestivé. Ukážme si príklad:

A CSS kód k tomu:

Dostaneme tak jemne zaoblené okraje bez použitia akýchkoľvek obrázkov, no opäť musíme za toto pykať v podobe škaredého HTML kódu, či nezmyselného CSS zápisu. No našťastie nás ľudia vo W3C vypočuli a tak na celé toto snaženie sa, môžeme jednoducho zabudnúť. Riešením je nová vlastnosť všetkých elementov s názvom "border-radius", ktorá vykreslí rám (border) už zaoblený bez akýchkoľvek ďalších zbytočností. Takže horeuvedený príklad bude vyzerať približne takto:

A CSS3 zápis:

Jednoduché, rýchle, smrtiace.. ;) Polomer zaoblenia môžeme meniť podľa nálady, no neodporúčajú sa záporné hodnoty. Tie by totiž boli odignorované CSS parserom použitého prehliadača. Ako jednotku môžeme použiť ktorúkoľvek z možných dĺžkových jednotiek, čo zahŕňa em, ex, px, in, cm, pt, či ostatné. Výhodou tejto vlastnosti je aj fakt, že môžeme jednotlivé rohy zaobľovať samostatne. Čiže ak by sme chceli mať zaoblené len dva rohy - prahý horný a ľavý dolný, tak css bude vyzerať takto:

A navyše budú mať aj rôzne polomery zaoblenia, čo sa použitím štandardných techník, ktoré sa využívajú, dosiahnuť ani nedá.. Toľko by k vlastnosti border-radius aj stačilo, veď to nie je nič zložité, no nie? ;) Nabudúce by sme sa opäť mohli pozrieť na niečo užitočnejšie ako napr. pokročilé selektory, ktoré sú naozaj silnou zbraňou v správnych rukách.. ;)