Seky

Kulaté rohy bez obrázků aneb Nifty corners reloaded

English version: Rounded corners without images: A Nifty Corners Inspiration

Když jsem na Filově blogu Jana Řezáče poprvé narazil na zmínku o technice Nifty corners, zběžně jsem kouknul na originální popis Nifty corners od Alessandra Fulcinitiho, ale přišlo mi to nějak moc složité, takže jsem zase odešel. Škoda, ale naštěstí mě zachránila Krutá realita, která Nifty corners zmiňuje o něco později. Podíval jsem se tedy pořádně, o co jde, a zjistil jsem, že Nifty corners jsou ve skutečnosti geniální nápad.

O co tedy jde? O techniku, která umožňuje zakulatit rohy bez použití obrázků, jen s pomocí JavaScriptu a trošky CSS. Oblé rohy mám rád, ale nutnost tvořit (a stahovat) pro každé dvě kombinace barev popředí a pozadí a každý rozměr rohů čtyři obrázky mne spolu s potřebou vkládat do kódu další prvky většinou odradí. Nifty corners to řeší jinak: místo obrázků kulatých rohů vloží do zaoblovaného prvku několik pixelů vysoký blok (kontejner), který má stejnou barvu pozadí, jako vnější (nadřazený) prvek. Do něj pak vloží několik 1–2 pixely vysokých prvků (proužků) s barvou pozadí „zaoblovaného“ prvku, kterým se postupně mění velikost okraje (margin), takže vytvoří efekt zakulaceného rohu. Celé to vypadá asi takhle:

Pointa spočívá v tom, že se prvky, které způsobují optické zaoblení, do stránky přidají pomocí JavaScriptu. Řešení Allesandra Fulcinitiho zavolá pro každý prvek, kterému se mají zakulatit rohy, JavaScriptovou funkci, jíž jako parametry předává barvu pozadí a popředí a identifikátor prvku.

Což je také (alespoň pro mne) největší nevýhoda této metody: jsem člověk velmi líný a nutnost volat tuto funkci pro každý prvek by mne v praxi asi od užívání zaoblených rohů odradila. Ideální by bylo, nastavit prvku, který se má zakulatit nějakou třídu a zbytek přenechat JavaScriptu. Kromě toho by se hodilo mít možnost jednoduše nastavit poloměr zaoblení. Také by bylo pěkné, kdyby nebylo třeba u každého prvku nastavovat barvu popředí a pozadí.

Pustil jsem se tedy do práce a po pár hodinách boje (při němž kupodivu nebyl nejtěžším soupeřem JESPRP, ale goniometrické funkce) vytvořil skriptík, který všechny tyhle požadavky splňuje.

Návod k použití

1. Ke stránce připojíme soubor s JavaScripty rounded-corners.js.
2. Všem prvkům, které mají mít zaoblené rohy přiřadíme třídu rounded, případně další třídy, jimiž se nastavují parametry zaoblení.
3. Na konci stránky zavoláme JavaScriptovou funkci make_corners().

Viz jednoduchá ukázka použití zaoblených rohů.

Nastavení parametrů zaoblení

U každého prvku, který má přiřazenu třídu rounded lze pomocí dalších tříd nastavit parametry zaoblení. Vzhled lze rovněž určit pomocí CSS přes třídy rounded (prvek, kterému zaoblujeme rohy), rc-container-top a rc-container-bottom (kontejnery pro zakulacovací proužky), rc-inner a rc-level-NN (zakulacovací proužky, NN je číslo v rozsahu 0 až poloměr rohu).

Třídy, které se používají k nastavení vlastností prvku mají tvar rc-[název_vlastnosti]-[hodnota_vlastnosti]. Pokud je hodnota typu boolean (tedy ano / ne), používá se 1 / 0, přičemž hodnota 1 se může vynechat ;-). Všem parametrům odpovídá JavaScriptová proměnná $rc_[název_vlastnosti], která se používá ve funkci rounded_corners(). Přehled všech parametrů je uveden v následující tabulce.

CSS třída	JS proměnná	popis
rc-radius-[integer]	$rc_radius	Nastaví poloměr zaoblení rohů v pixelech.
rc-top-[0|1]	$rc_top	Zapíná zakulacování horních rohů.
rc-bottom-[0|1]	$rc_bottom	Zapíná zakulacování spodních rohů.
rc-right-[0|1]	$rc_right	Zapíná zakulacování pravých rohů.
rc-left-[0|1]	$rc_left	Zapíná zakulacování levých rohů.
rc-selfcolor-[RRGGBB]	$rc_self_color	Nastaví barvu zakulacovaného prvku.
rc-parentcolor-[RRGGBB]	$rc_parent_color	Nastaví barvu pozadí (rodičovského prvku).
rc-inheritstylecolors-[0|1]		Při zapnutí nenastavuje skript žádné barvy, použije se tedy CSS definice.
rc-antialiased-[0|1]	$rc_antialiased	Proužkům se přidá ještě border, což trošičku vyhladí rohy, ale žádný opravdový antialiasing to není. Funguje jen s rc-method-margin. Pozor: nefunguje v MSIE pokud je barva ve stylopisu nastavena jako white nebo #FFF a ne #FFFFFF nebo rgb(255,255,255).
rc-antialiasedcf-[0-1]	$rc_antialiased_cf	Koeficient přechodu v intervalu 0–1; při vyšších hodnotách se barva přechodu blíží barvě pozadí rodičovského prvku.
rc-compact-[0|1]	$rc_compact	Nastaví kontejnerům záporné horní či dolní okraje, takže se zakulacovaný prvek nezvětší. Někdy zlobí v MSIE.
rc-automargin-[0|1]	$rc_auto_margin	Pokud má zakulacovaný prvek nějaký padding, nastaví kontejneru negativní margin, který jej kompenzuje. Nefunguje v MSIE.
rc-method-[margin|border]	$rc_method	Nastaví metodu vykreslování kulatých rohů.
rc-border	$rc_border	Prvek se vykreslí se zakulaceným borderem. Viz ukázka.

Důležitá je vlastnost rc-method, která nastavuje metodu vykreslování kulatých rohů:

margin

Vykreslí kontejner s barvou pozadí shodnou s barvou pozadí rodičovského prvku a proužky s barvou pozadí zakulacovaného prvku a různě velkým margin, v tomto případě lze border použít pro „antialiasing“.

border

Pozadí kontejneru i proužků zůstane průhledné, proužky dostanou místo marginu border příslušné šířky v barvě pozadí rodičovského prvku. Tento postup je vhodný pokud má zakulacovaný prvek na pozadí obrázek.

Viz ukázka použití zaoblených rohů s nastavením parametrů.

Jak to funguje

Nejprve se pomocí funkce find_class(), kterou jsem si napsal při svém šíleném JavaScriptovém experimentu najdou všechny prvky v dokumentu, které mají přiřazenou třídu rounded. U nich se zjistí, zda mají pomocí tříd nastaveny nějaké další parametry zaoblení. Pokud ne, použijí se výchozí. Poté se do nich vloží zaoblovací prvky, jejichž barvy se ve výchozím nastavení určí z barvy pozadí zaoblovaného a rodičovského prvku pomocí funkce get_current_style(). Nevýhodou je, že určení nefunguje v Safari, Konqueroru a starších verzích Opery (v 7.5 nicméně funguje), nicméně pro ten případ se dá použít manuální nastavení. Detailnější vysvětlení je v této chvíli nad mé síly, masochistické zájemce mahu jedině odkázat na (nekomentovaný) zdrojový kód skriptu, eventuálně na mail. Případné připomínky jsou velmi vítány.

Skript jsem testoval v Geckových prohlížečích (K-Meleon, Mozilla Firefox), Opeře 7.5 a MSIE 5.01 a 6.0 pod Windows, v nichž s uvedenými výhradami fungoval. V MSIE 5.5 nefunguje.

Aktuální Seky

• Truhlářství Švagr – kvalitní dřevěná okna a dveře – Hledáte-li kvalitní dřevěná eurookna nebo vchodové či interiérové dveře, Truhlářství Švagr je správnou volbou.

.

 

Zpět na hlavní stránku K potěšení čtenářům i sobě tvoří Pachollini.
V titulku je použita grafika Josefa Váchala, dřevorytce.