Something I’ve thought could be interesting for a while now is a way of using CSS to create a link style that mimics a Photoshop selection (commonly referred to as marching ants).
I finally created the graphics and figured out the code. It adds just under 13k to the size of your pages (on the first load). After that it is cached and should not add any additional load on your pages.
Here is a sample link: selection_back-link.gif
Before you click on the link, the text should have a moving border similar to a Photoshop selection and a yellow background. After you click the link, the text should lose the yellow background and you should see the dashed border stopped and greyed out. The hover state should be a slightly darker orange color.
Want to use this effect on your site?
1. Add the following style information to your style sheet:
/* Style adding "marching ants" selection effect to links */
/* CSS and graphics by Serafini Studios - https://www.serafinistudios.com/ */
a.ants {background:#ffffcc url(/images/selection_back-link.gif) top left no-repeat;text-decoration:none;color:#000000;
padding-top:2px;padding-left:4px;padding-right:0px;padding-bottom:0px;}
a.ants span {background:#ffffcc url(/images/selection_back-link.gif) bottom right no-repeat;
padding-top:0px;padding-left:0px;padding-right:4px;padding-bottom:2px;}
a.ants:visited {background:#ffffff url(/images/selection_back-visited.gif) top left no-repeat;text-decoration:none;color:#000000;}
a.ants:visited span {background:#ffffff url(/images/selection_back-visited.gif) bottom right no-repeat;}
a.ants:hover {background:#ffcc66 url(/images/selection_back-link.gif) top left no-repeat;text-decoration:none;color:#000000;}
a.ants:hover span {background:#ffcc66 url(/images/selection_back-link.gif) bottom right
no-repeat;}
a.ants:active {background:#ffcccc url(/images/selection_back-link.gif) top left no-repeat;text-decoration:none;color:#000000;}
a.ants:active span {background:#ffcccc url(/images/selection_back-link.gif) bottom right
no-repeat;}
2. Upload these 2 graphics to your /images/ directory:
- selection_back-link.gif (11.3k)
- selection_back-visited.gif (1.4k)
3. To make the ants march around your link, use the following code:
<a href="http://yourlinkhere/" class="ants" title="Link title here"><span>Linked text</span></a>
Explanation:
There are two inline elements at play here – the <a> and the <span> tags. By applying a background:url(...) style to each and using the positioning elements (top left and bottom right) we are able to position the top left of the animated marching ants graphic behind the <a> tag and the bottom right of the graphic in the background of the <span> tag.
Known Limitations:
If you are linking more than one line of text, the effect gets screwed up. Also, different browsers will render this in slightly different ways.
Credits:
If you use this code, I ask that you add a comment below and indicate the URL where you are using the code. Also, if you have any suggestions for improving this, let me know, or if you find it breaks horribly in any given browser add a comment. Thanks.