Inset Border Effect jQuery Plugin
Published by Guest Author
I was browsing through a few Flash templates on ActiveDen when I came across an effect I see very often on Flash website galleries. It's a very simple but neat effect. The images have a border, but unlike CSS borders, it covers up part of the image. I wanted to use this effect in one of my galleries so I went ahead and experimented a bit and came up with the following jQuery plugin. It basically wraps the images in a <div> with the same dimension as the image and sets the overflow to hidden. Then it appends another <div> after the image, which the actual border gets assigned to. All the border properties can be altered by the user. It will work with almost any lightbox (tested with colorbox).
By combining the effects, new effects can be achieved and I noticed, that when used with a higher “inset” value, it gives you a really nice effect on the iPhone's web browser. Feel free to do whatever you like with this plugin.
How it works!
A huge thanks to Chris for editing and optimizing the plug-in and especially for posting this article!