Article
Comments
Evan Byrne
Jul 07 2010
Hey Paito, always nice to hear from you!
Actually, what you are experiencing is probably when you right-click the image with the borders, you are actually clicking the pseudo-element sitting on top on the image. The pseudo-element basically acts as a mask over the image.
So, in Firefox, if you click "view background image", you will actually be shown the background for this webpage, not the image with the borders.
That is a good thing to keep in mind though, because if allowing users to right-click and save images off your website is important, this will mess that up.
One possible way around this issue could be to use the brand-new CSS pointer-events property:
.fancy{
pointer-events:none;
}
Jul 13 2010
Another great way to achive this is using the outline and border attributes.
Simply use outline to make the outer border, and then use border to create the inner border.
For me this works great, as far as I know, the only downsides are that outline affects all sides of the shape, you cannot choose for it too appear only on the left or the right etc, and that it outline does not work on IE6-7.
Evan Byrne
Jul 13 2010
Hey Keiron,
That method would work for regular borders, but these borders appear directly over the image, not around the outside of it.
Paito Anderson
Jul 07 2010
I noticed most browsers treat those image differently, The first one is treated just as a normal image and you can right click and save it etc... and the second image is treated more as background image.
This doesn't really effect the usability at all but just something to note, nice work as always Evan!