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ů.

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...

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

Profile picture for user Jan Polzer

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

Profile picture for user Jan Polzer

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

návštěvník

..tak to ses spatne dival

návštěvník

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ář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru