Kulaté rohy v CSS a JavaScriptu

Na webu najdete mnoho různých “fíglů” na tvorbu kulatých rohů u rámečků, tabulek a dalších prvků webových stránek. Pro Maxiorel.cz jsem nechtěl používat trik se čtyřmi obrázky kulatých rohů, které se pomocí CSS umístí na ta správná místa. Takových návodů najdete na webu několik, sám občas používám postup Adama Kalseyho. Ale narazit můžete i na techniky, které využívají JavaScript a CSS bez doplňkových obrázků.

Reklama

Objevil jsem zajímavý návod, který umožňuje vytvářet zaoblené hrany vpodstatě okolo jakéhokoli prvku. Stačí připojit JavaScriptový soubor, zavolat jednoduchou funkci a je hotovo. Co je skvělé, funguje to naprosto dokonale v IE, Opeře i Firefoxu. Můžete si zvolit, zda chcete zaoblit všechny čtyři rohy nebo jenom některé, zda použít vyhlazování hran, průhlednost, rámeček, můžete si nastavit barvu atd.

Jediný problém, na který jsem narazil, bylo špatné vykreslování v IE, pokud nebyla zadána pevná šířka objektu. Například prostřední část každé stránky na tomto webu tvoří bílé rámečky s textem. Jejich šířka se mění podle toho, jak je velké okno prohlížeče. A právě zde byl problém. Vykreslilo se horní a spodní zaoblení, avšak obsah rámečku jakoby po stranách přetíkal o několik bodů. Vzhledem k tomu, jak jsem potřeboval, aby se rámečky natahovaly, nemohl jsem pomocí CSS zadat pevnou šířku v pixelech. Vlastnosti margin-right a margin-left nepomáhaly. Po bezesné noci a půl dni bádání nakonec stačilo upravit umísťování jednotlivých částí stránky a rámečkům nastavit width:100%. Ještě jednou podotýkám, že Opery ani Firefoxu se tento problém netýkal.

Budu rád, pokud se mi ozvete v případě, že tato informace byla k něčemu užitečná…

29. března 2007: Na Maxiorlovi už kulaté rohy nenajdete, nicméně doufám, že těchto pár řádků někomu pomůže…

Reklama

Komentáře

Je to zajímavé řešení ale kulaté rohy mi připadají jako zbytečnost.

No, já jsem po změně layoutu tohoto webu kulaté rohy taky odstranil. Nicméně občas se naskytne možnost to využít ;-)

Maxiorel

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Nikde na internetu jsem to moc neviděl.

no, já zase ano. Internet má miliony a miliony stránek. Takže, co viděl jeden člověk, druhý nemusel nkdy spatřit :-)

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

..tak to ses spatne dival

Na stránce jsem vytvořil generátor pro HTML a CSS boxů s nejen kulatými rohy http://www.wild-web.eu/css-box-generator/

Využívejte, jak je libo, hlavně mě netlučte.

Přidat komentář