BorderImageHelper allows you to create the css for border images within seconds.
- Visually define Border-Image areas
- Live preview of the resulting style
- Copy & Paste ready css code
- Image slicing and html/css generation for
browsers not supporting the border-image property
more infos soon!
Help
Selecting a Border Image
Click on the choose button below the left image area (the one with the red lines). If you are on an Mac you can also drop an image there (I hope drag&drop support for Windows and Linux will be available soon, too). You will now the the image on the left and four red lines which surround it.
Defining the Border Image Area
You can now use the mouse to position the red lines. You will see the visual result in the right image area. Alternatively you may set the pixel values manually in the Metrics section.
Setting the Stretch Options
With the radio Buttons you can set the behavior of the non-corner parts of the image:
- round: This should repeat the middle part and make sure it is always complete (so it might be stretched or compressed a bit)
- stretch: This will stretch the middle parts to make them fit. This will retain a gradient.
- repeat: This option behaves link the background-image repeat option
Please note: the behavior of the options is different on Mac and Windows and round seems to do the same as repeat. This is related to the Webkit version used in Titanium.
Copying the CSS
On the right side you will the the CSS generated to create the desired border image. Select it and copy it to the clipboard to past it into your favorite CSS editor. You might need to change the path to the image according to your file structure.
Alternative Image Slices
As a little extra you can also save the nine image parts you separated with the red lines. These can be used to simulate the border-image effect in other browsers. The parts will be saved into a subfolder of the folder where the source image lies. The folder will be named like the image without the suffix.
Right now this feature is of limited use as you would have to create the CSS and HTML needed to simulate the border image effect manually, but I will provide a solution for this soon. I am just not sure how to do this best: One option is to create static html/css which can be used and the other option is to create a script which can dynamically replace a real border image with a fake one.