Inset Border Effect jQuery Plugin

Avatar of Robin Thrift
Robin Thrift on (Updated on )

This is a guest post by Robin Thrift who wrote to me with some demo code for creating this effect. Together we turned it into a jQuery plugin. Enjoy!

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.

View Demo   Download Files

How it works!

 

A huge thanks to Chris for editing and optimizing the plug-in and especially for posting this article!