CSS UI Enhancements – Text Selection Highlight Color, Remove Border Outline around links, Attribute-Specific Icons
Posted on April 1, 2011 | 1 Comment
Text Selection Highlight Color
To create a highlight color when text is selected, I use the following code:
/*Mozilla browser selection*/
::-moz-selection{
background: #69f;
color:#fff;
}
/*Other browsers selection except IE */
::selection {
background:#69F;
color:#fff;
}
Remove Border Outline around links
I went over some popular websites and was shocked when I saw they had the same problem – an outline appears around the link. A few of the popular websites are listed below with their screen shots.
a:link, a:hover, a:visited{
outline:none;
}
Attribute-Specific Icons
Do you want to have file icons next to your links? Add PDF icons next to your .PDF links, MS WORD icons next to your .doc links, so on and so forth. This is a great way to make links describe what they’re pointing to.
The code for specifying the attribute icons is:
a[href$='.pdf']{
padding:0 20px 0 0;
background-image:url(images/Print.ico);
background-position:right;
background-repeat:no-repeat;
}
a[href$='.doc']{
padding:0 20px 0 0;
background-image:url(images/docs.ico);
background-position:right;
background-repeat:no-repeat;
}
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
One Response to “CSS UI Enhancements – Text Selection Highlight Color, Remove Border Outline around links, Attribute-Specific Icons”
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.
September 5th, 2014 @ 4:50 pm
CSS UI Enhancements – Text Selection Highlight Color, Remove Border Outline around links, Attribute-Specific Icons | Relax Breath of Solution.