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

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

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

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

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

reklama
Novinka listopad 2020

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
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