CSS photoshop like selection effect on divs

Hi Guys,

I am not sure why you would do it other than to get user attention on specific part of your HTML page. I found those little animated borders annoying anyway but they do work to get attention of your website visitor.

This post talk about it. We will be looking at a selection animation using GIFs added as borders to your DIVs

First of all much thanks to Mathew James for being such an inspiration and providing free GIF files needed for this effect. Anyway lets get back to the point and start doing some real work

The Markup

No rocket science understanding the above HTML. its simple and straight forward.

The CSS

 


 

Result

 

Demo can also be reached from this URL

Demo on separate page

http://jaspreetchahal.org/examples/css-examples/anim-border/css-border-animated.html

Download

Background Image used is given below for you to download

selection

 

I hope this helps

Cheers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.