CSS&HTML rounded corner box generator
CSS&HTML generátor boxů s oblými rohy

by Jan Horak, 2009, www.wild-web.eu

Help / Nápověda

Complete solutions gallery / Galerie hotových řešení

Make your own box in only 4 steps / Vytvoř si vlastní box v pouhých 4 krocích

This tool is used to generate HTML and CSS definitions for rounded corner box.

Input: Image (PNG GIF and JPG format should work correctly), which is box's background, dimensions to slice the image, box CSS dimensions variant (you can choose fixed width, height, both or nothing).

Output: HTML and CSS definition.

Vstup: Obrázek (PNG GIF a JPG formáty by měly fungovat), ze kterého chceme vygenerovat box a bude jeho pozadím, rozměry pro rozřezání obrázku, varianta CSS (máte na výběr fixní šířku, výšku, obojí nebo naopak bez fixních rozměrů.

Výstup: HTML a CSS definice.

Step 1. Add your own rounded corner box (not necessary) / Přidej vlastní návrh (není nutné) Choose an image to upload / Vyber obrázek pro upload:
Step 2. Choose the design / Vyber design
Step 3. Specify the content box proportions and choose the slice variation / Zadej rozměry obsahové části a vyber variantu

If you do not set the proportions, they will be computed automaticly.

If you choose fix width or height or both, image's dimensions has to correspond with the dimension, which is required.

Pokud nezadáte rozměry, budou počítány automaticky.

Pokud použijete fixní šířkku, výšku nebo obojí,rozměry obrázku musí odpovídat rozměrům požadovaného boxu.






Slice variation / varianta rozřezání:





Please note, that variable height and width together is not printed correctly in IE6. Simple box with one color is printed instead. Fixed width or height or both is printed correct.

Prosím berte na vědomí, že variabilní výška i šířka zároveň se nezobrazuje korektně v IE6. Místo toho se zobrazuje box vyplněný konstantní barvou.

Step 4. Test your slicing dimensions and generate HTML with CSS / Otestuj rozměry rozřezání a generuj definici HTML a CSS

First press the button "Compute content box", then adjus dimensions as you wish and finaly generate HTML and CSS pressing the button "Process CSS and HTML". To clear the dimensions press the button "Reset values".

Nejdříve stiskněte tlačítko "Compute content box", potom upravte rozměry, jak si přejete a nakonec generujte HTML a CSS stisknutím tlačítka "Process CSS and HTML". Pro vymazání rozměrů stiskněte tlačítko"Reset values".


© Copyright declaration:
Using this utility or generated HTML and CSS definitions from gallery is FREE, but user should keep contact to the author in comments. Please note, that by using this utility user gives rights to use his work for FREE to all other people. Every work will be stored and published with no copyright requirement.

© Prohlášení o autorských právech:
Použití tohoto nástroje nebo vygenerovaných HTML a CSS definicí z galerie je ZDARMA, ale uživatel by měl v komentáři ponechat kontakt na autora. Prosím berte na vědomí, že užitím tohoto nástroje dává uživatel práva k užití jeho práce ZDARMA komukoliv dalšímu. Každá práce bude uložena a zveřejněna bez nárokku na autorská práva.

TOP.ER.CZ - český toplist přístupů