Friday, January 27, 2012

Identifying Link Targets with CSS

Sources: Noupe "Useful CSS Snippets", 1stWebDesigner "25 Incredibly Useful Snippets for Developers"
See also Data uri's  http://davidwalsh.name/data-uri-php

/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

/* identify links that open in new window */

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}


 

1 comment:

Bill Creswell said...

Add in Base64 Silk Icons
http://www.erichynds.com/coldfusion/famfamfam-silk-icon-set-in-base64-encoding/