Double Independent Border In CSS
A friend of mine was browsing the web and he stumbled upon a e-commerce site where they where using a double border for product images.
He`s not a web guru (my friend) so he asked me (i`m not a web guru either) how they made a double border.. but he failed to explain me what kind of border it was. Just it was a double one.
Of course, at first i thought it was a plain double border. But hey… that was too obvious so i began twisting around seeking for the right way to make that border(s).
Well, after few attempts i`ve managed to create a page with 2 borders wrapped around it. They`re both editable, and more important they`ve both :hover state.
Here`s the base image i`ll use in this tutorial, it`s a picture of me with my best frieds, i`m the one in the left corner, the one with big- beautiful-bright eyes
(Now you can laugh).
So… the idea is pretty simple, i`ve created a centered <div> and i`ve added a class to it. Let`s say “border” (you can use a <table>, but tables are so web 1.0 which means they`re not web 2.0, which means is not cool, so I suggest stick with <div>s… divs are cool :D). Next insert into the first div another one. Then, add a nice picture that you wanna have 2 independent borders. After that give the second div a width value, based on the image width. In this example i`ve used a 512px width image, and i set the second div to 520px width (you`ll see why soon).
What you`ve got now is a plain centered image… not exactly what i`ve promised ya heh?! Wait and see.. wait and see…
Let`s move on! Go back to the <head> section and let`s give this page some style :D! I`ve created a pseudo-class “border img”, and it looks like this:
.border img{
border: 4px solid #999999;
padding:0px
}
Our image still has no border yet… but you have to be patient. So, let`s add a new style: create another pseudo-class, this time with :hover
.border img:hover {
border: 4px solid #333333;
padding:0px
}
Now you have it! There`s your pretty little border wrapping around your pretty little image. Yeah i know this can be done much more easier, but hold on a minute a keep reading. As you can se there`s a border around the image and when you place your mouse above the image the border change its color to a brighter color.
Note that i`ve left the padding there, though it has its value set to 0… I left those there so you can play with them… i`m pretty sure you`ll get some interesting results.
Okay… back to borders! To be more precisely, back to styles… you`ve heard me.. back to <head> zone and add two more styles:
.border div{
border: 0px solid #999999;
padding:1px
}
.border div:hover {
border: 1px solid #333333;
padding:0px
}
What`s the purpose of those? Every <div> that`s enclosed in something that has the “border” class will have a border with 0 pixels width but with a padding of 1 pixel (in my example - but as I said before, you can change the values according to your tastes and your imagination). Also, the same <div> now has a hover state, in which it shows a solid border, 1 pixel width, but with no padding.
The result can be seen in my third and final example. Check the source code if you want, you`ll see everything more simple.
I hope you`ll find this trick useful. Write me back if you can further develop this or if you use this trick in some real life web page.
IMPORTANT NOTE: unfortunately IE6 doesn`t supports attribute selectors so the “border div:hover” trick won`t work, although it degrades nicely. Instead MS redeemed itself with IE7 which now fully supports most of the modern web standards.
It would be interesting if this would work in IE too.