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í
- Ke stránce připojíme soubor s JavaScripty rounded-corners.js.
- 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í. - 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.
Co vy na to?
- [1] , Filosof, 3. dubna 2005, 18:46
- [2] dobre, MARINAKX, 3. dubna 2005, 19:10
- [3] Luxus, Fred, 18. dubna 2005, 14:21
- [4] což takhle nastavená výška, Štěpán Svoboda, 19. dubna 2005, 11:13
- [5] Proble s vyskou rodicovskeho prvku, Fedor Tirsel, 19. dubna 2005, 16:43
- [6] Problémy s výškou, Pachollini, 20. dubna 2005, 15:50
- [7] Díky, Pachollini, 20. dubna 2005, 15:53
- [8] Chyba Paddingu, Olda, 4. srpna 2005, 22:39
- [9] kulaté rohy s css?, OZZY, 11. ledna 2008, 12:26
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.