Blog archive 2009/10

CSS a HTML generátor boxů s oblými rohy (rounded corner box)

Oct|21 2009

Dnes bych rád v rychlosti prezentoval jeden můj nástroj na podporu tvorby webu. Jedná se o generátor HTML a CSS pro boxy s oblými rohy.

Kdo dělá trochu do webdesignu ví, že vyrobit box s oblými rohy není jednoduché, má-li být jeho šířka přizpůsobena obsahu. Když se k tomu přidá stále používaný IE6, který má velké problémy s CSS atributem height: 100%, je vývoj takového boxu téměř nadlidský úkol. A co když má box mít navíc průhledné okolí rohů, aby byl box regulerně zobrazen na jakémkoliv pozadí? Tím se to ještě zesložití.

Já jsem si dal tento týden jasný úkol: Implementovat HTML a CSS tak, aby byly výše zmíněné body dodrženy. Zde jsou:

  • box z libovolné bitmapy (používám PNG, které může být i průhledné)
  • jeho velikost se přizpůsobuje obsahu na výšku i šířku
  • korektně zobrazen ve všech prohlížečích (toto se mi nepovedlo v IE6, místo toho je v případě velikosti závislé na obsahu zobrazen klasický box s jednou barvou; pokud se zvolí fixní šířka nebo výška, je to v pořádku)
  • co nejjednodušší HTML a CSS

Zjeména jsem se zaměřil na obecnost, což mělo za následek trochu dívočeší HTML definici, ale komu vadí deset tagů <b> za sebou? Mě ne.

Pro zjednodušení jsem zvolil na výběr čtyři varianty: fixní šířka, výška, obojí nebo nic (box bude v obou směrech přizpůsoben obsahu).

Když už jsem měl po několika hodinách kódování správně navrhnuté HTML a CSS, napadlo mě vytvořit jednoduchý generátor, který by rozřezal zadaný obrázek a vytvořil odpovídající definici HTML a CSS.

Generátor jsem původně chtěl užívat sám, ale nakonec jsem z něho měl takovou radost, že jsem ho dal k dispozici i dalším.

Co tedy generátor umí?

  • rozřeže zadaný obrázek, který si nakreslíte v nějakém grafickém programu nebo vyberete z nabídky
  • zadáte velikost okrajů na každé straně zvlášť
  • zvolíte variantu rozměr: fixní šířka, výška, obojí nebo nic (box bude v obou směrech přizpůsoben obsahu)
  • vygenerujete HTML a CSS

Jak vypadají výsledky se podívejte sami.

Tags: Osobní | Grafika | Internet | PHP | Programování | Prohlížeče | Počítače