Lightly Toasted

For some of us this really is not anything new really, but nonetheless I decided to add this feature on my blog. Pretty basic CSS3. It doesn’t work in IE and other buggy browsers, nor should you expect!

If you wish a little icon next to the external links on your site/blog/ below is the code you need. This works as a visual indication to the reader that the link(s) they are going to encounter is going to take them off the current site. The same applied to the < mailto:you@yourwebsite.com > tag. Get yourself some free icons from Qbullets or make your own.

a[href^="mailto:"] {
background: transparent url(’path/to/aemail.gif’) 100% 50% no-repeat;
padding-right: 10px;
}

div.content a[href^="http:"] {
background: transparent url(’path/to/aoutside.gif’) 100% 50% no-repeat;
padding-right: 10px;
}

div.content a[href^="http://yourwebsite.com"],
div.content a[href^="http://www.yourwebsite.com"] {
background: inherit;
padding-right: 0px;
}

You can possibly extend the thought to other applications as well like pfd,word,flash etc

I guess for PDF’s it would go as below. Please note I havent tried this part of the code.

div.content a[type=application/pdf] {
background: transparent url(’path/to/apdf.gif’) 100% 50% no-repeat;
padding-right: 10px;
}

Thanks William