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

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.

příbuzné příspěvky

Právě jsem přežil další pátek 13. (14.11.2009)Jak přechytračit Captcha Resolver (20.01.2010)Windows 7 - testování a první dojmy: nevypadá to zle ( 6.07.2009)Správné přesměrovat pomocí 301 nebo 302? Plus příklad v PHP ( 4.06.2009)Vyzkoušel jsem si Chrome OS (23.11.2009)