Monday, April 5th, 2010

Border Image Generator Tool

Category: CSS, Utility

<p>Working on mobile Web apps such as the Facebook app on webOS offers one huge advantage over standard desktop development. You can code to a single runtime (in our case, WebKit). This means that crazy hacks can go away as you use functionality such as border-image.

Kevin Decker is an engineer on my team, and has worked with border image in this context, as well as on Firebug (another place that you get this luxury…. extensions). Border image is fantastic compared with the slew of images hacks that we have had to do in the past, but it can be hard to visualize what you are doing.

This is what Kevin felt too, and to solve it he hacked up a border-image generator tool that gives you a WYSIWYG editing experience that generates the cross browser CSS for you. Take an example and start to tweak the offsets and see the live image change on the fly.
border-image-preview

You can also check out the project on GitHub.

Related Content:

3 Comments »

Comments feed TrackBack URI

Great little tool, it would definitely come in handy.

Comment by iliad — April 5, 2010

This might be a nice post for the blind designers who wants to scare off visitors from their website, but who cares about this ugliness?

Comment by vsync — April 6, 2010

@vsync – I’m not sure you understand what this tool is for

Comment by travisalmand — April 6, 2010

Leave a comment

You must be logged in to post a comment.