As I promised, I’ve written an extensive documentation for people wanting to use the border-image property.

It is available on this very website but I need feedback from english speaking people before trying to publish it on ajaxian.

During the design phase of this blog, I have not only written a cross-browser implementation of border-image, but I’ve also added support of hsl colors to jQuery’s animate function.

citizenColor is not a traditionnal jQuery plugin, it’s more some kind of hack, but it does what it is intended for. It overwrites native jQuery’s animate function and allows you to use hsl colors such as hsl(272, 40%, 70%). But it also allows relative animations, like the ones you can use with dimensions in jQuery: hsl(+=54, +=20%, -=10%)

The only limitation is that you can’t use it on elements with different colors.

You can find more information about HSL colors on wikipedia, on w3c’s CSS3 draft. Check the plugin page in jQuery’s plugin repository and the code in github.

Today I have commited the version 1.0a1 of jquery.borderImage to it’s github repository.

jquery.borderImage is a partial, cross-browser implementation of CSS3’s borderImage property, as described in the CSS3 draft proposal. It only allows to stretch slices of your image but neither to repeat it nor to round it. Anyway this is already great as it works in firefox2+, opera9+, safari3+ and IE6+!

It uses either the vendor specific implementation of the property (firefox3.1, recent webkit), canvas (firefox2/3, opera) or vml (IE).

There is few bugs in IE6, especially when using images with transparency, and IE8b2 has a major regression preventing to dynamically create vml elements (see related bug on microsoft connect). The only workaround is to use the IE7 meta-tag.

I am working on detailed explanations and “how to“s for the plugin but during this post I will assume you already know how fantastic it is, what is the syntax of the property and that you are familiar with jQuery.

1. Make sure your element actually has border:
   #element { border: 10px solid transparent; }
2. Draw your image
   
3. Describe how you would have sliced it, with the following syntax:
   $(’#element’).borderImage(’url(”border.png”) 20′);

This is exactly the kind of code used to produce the border of this page. It’s not only perfect to create any kind of borders around elements, but it can also emulate rounded-corners, stretching background images as well as tabs and buttons adjusted to their contents.

Their is already built-in features to make use of images with gradient and creation of multi-state tabs/buttons a lot easier. More about that later, I need some rest.

Get the code, test it, report bugs/enhancements, port it to other popular libraries, enjoy!

One of my favourite band, one of my favourite programming language.

Inspiring…

Music Is Math from Glenn Marshall on Vimeo.