CSS UI Enhancements – Text Selection Highlight Color, Remove Border Outline around links, Attribute-Specific Icons
Posted on April 1, 2011 by Sameera Thilakasiri
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.
How to Create a Block Hover Effect for a List of Links
Posted on April 1, 2011 by Sameera Thilakasiri
The HTML is quite straightforward. Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item. Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of and tags.
<div id="links">
<ul>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
</ul>
</div>
And now the CSS. In order for the block hover effect to work properly in IE, we need to make the width of the link the same as that of the list item.
Otherwise the hover effect will only display when you mouse over the text within the list item.
#links ul {
list-style-type: none;
width: 400px;
}
#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
It’s not necessarily the most semantic markup in the world, especially with those tags, but I’m not sure how else you’d do it.
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.
How To Make Clickable Areas Bigger
Posted on April 1, 2011 by Sameera Thilakasiri
One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links , the actual ‘clickable’ area should be as large as possible.
How Is It Done?
First let’s create our simple unstyled navigation, using an unordered list:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Now we add some CSS to turn it into a horizontal navigation bar:
ul {
list-style-type: none;
overflow: auto;
padding: 0;
margin: 0;
}
ul li {
float: left;
border: 1px solid #333;
border-bottom: none;
margin: 0 5px;
}
ul li a {
text-decoration: none;
}
ul li a:hover {
text-decoration: underline;
}
Without any margins or padding, the navigation items are squeezed into their containing boxes. We can use padding on the
Enter the magic ingredient:
ul li a {
display: block;
text-decoration: none;
}
By setting the display property of the tag to “block”, the link expands to fill the entire area of its container. Now we can use padding on the tag to set the size of the clickable area:
ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
}
Internet Explorer and the Holly Hack
What’s that you say? It’s not working? You must be part of the 85% or so of internet users that are using Internet Explorer; unfortunately, IE has a bit of a blind spot where floated elements are used – specifically, it requires a width to be provided for a floated element. But we don’t want to give our list items a width! Never fear, another IE bug means that we can specify a tiny width and the
* html ul li a {
width: 1%;
}
The ”* html” part is a CSS hack to only allow IE browsers to ‘see’ the rule (the opposite hack to exclude IE browsers would be “html > body”).
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.
SEO-Friendly FLEX Websites
Posted on February 16, 2011 by Sameera Thilakasiri
When building a FLEX( Flash ) application that must be available to the user via the Internet, this question always comes up: Will the website containing the application be SEO friendly?
And the answer is NO. Google and other search engines cannot see inside your FLEX ( Flash ) website/application and and index your pages. If SEO is important to you, and it should be important, you will try to search for other technical solutions.
Being in a situation similar to this one, an idea came to my mind. FLEX( Flash ) uses XML as a primary source of content, and XHTML is just a custom XML. The idea is to to use the HTML pages as XML content for the FLEX( Flash ) application. The XML can be read and indexed by the search engines, and it’s also the ideal content source for your FLEX( Flash ) application.
How this can be done from technical point of view? Well, it’s pretty simple:
- Your HTML pages will be just simple the XML files that will contain the content necessary for your FLEX( Flash ) application. The content of the page will be available to the search engines.
- Create a XSLT file that will transform, on the user machine, the XML content of the page into a normal html page and also add the Flash component necessary to run the FLEX( Flash ) application.
- Point the FLEX( Flash ) application to get its information from the current page itself. Remember that if the XSLT is not applied, the current page is nothing but an XML file
The user will see a rich internet application created in FLEX and the search engines will see a nice XML page that is easy to index, and both worlds will be very happy.
This is just an idea that should work. I will test this on my current project and will keep you posted regarding the success of this technique.
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.
Deep Linking in Flex and Flash SEO
Posted on February 16, 2011 by Sameera Thilakasiri
How many of you are building your applications using deep linking with mx.managers.BrowserManager, or one of the deep linking libraries (URLKit, SWFAddress, etc)? Are you building your applications with SEO in mind or is this something that you see on the horizon but haven’t committed to yet? I have been experimenting with mx.managers.BrowserManager and find it very intuitive and easy to integrate into my applications. For example, here is a simple tab navigation example:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768" applicationComplete="init()">
<fx:Script>
<![CDATA[
import mx.events.BrowserChangeEvent;
import mx.managers.IBrowserManager;
import mx.utils.URLUtil;
import mx.managers.BrowserManager;
public var browserManager:IBrowserManager;
private function init():void {
browserManager = BrowserManager.getInstance();
browserManager.init();
browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
callLater(parseURL);
}
private function parseURL(event:Event = null):void {
var o:Object = URLUtil.stringToObject(browserManager.fragment);
if (o.tabId == undefined)
o.tabId = 0;
tabs.selectedIndex = o.tabId;
setPageTitle();
}
private function updateURL():void {
callLater(doUpdateURL);
}
private function doUpdateURL():void {
var title:String = "";
var fragments:String = "";
var o:Object = {};
o.tabId = tabs.selectedIndex;
fragments = URLUtil.objectToString(o);
browserManager.setFragment(fragments);
setPageTitle();
}
private function setPageTitle():void{
var title:String = Canvas(tabs.getChildAt(tabs.selectedIndex)).label;
browserManager.setTitle(title);
}
]]>
</fx:Script>
<mx:TabNavigator id="tabs"
width="100%"
height="100%"
change="updateURL()">
<mx:Canvas label="Tab 1"
width="100%"
height="100%"
backgroundColor="0xFF0000">
<mx:Label text="Tab 1"
fontSize="48"
horizontalCenter="0"
verticalCenter="0"/>
</mx:Canvas>
<mx:Canvas label="Tab 2"
width="100%"
height="100%"
backgroundColor="0xCCCCCC">
<mx:Label text="Tab 2"
fontSize="48"
horizontalCenter="0"
verticalCenter="0"/>
</mx:Canvas>
<mx:Canvas label="Tab 3"
width="100%"
height="100%"
backgroundColor="0x000066">
<mx:Label text="Tab 3"
fontSize="48"
horizontalCenter="0"
verticalCenter="0"/>
</mx:Canvas>
</mx:TabNavigator>
</s:Application>
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.
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.