Friday 28 June 2013

Reduce a tag hover delay using new css3

webkit-transition ,moz-transition are used to handle hover delay and make <a> is more stylish , The meager use of these attributes is to design navigation items for example visit  teamexcellence.com   the main navigation items  at .2s provides a nice visual effects with high speed loading .
The main content is
-webkit-transition-property: color;
-webkit-transition-duration: .2s;
-webkit-transition-timing: ease-out;
The webkit-transition-duration is the amount of time required to produce delay (in second)
Consider the example given below :
HTML SECTION
<div >
<h1><a href="http://www.dreamtheWeb.com" >DreamtheWeb.com</a> | <a href="http://www.123Arena.com">123Arena.com</a></h1>
</div>
CSS SECTION
a{
color: #F36;
text-decoration: none;
-webkit-transition: color 0.9s ease-out;
-moz-transition: color 0.9s ease-out;font-weight: bold;
}
a:focus,
a:hover{
color:#3C6;
}
SEE THE DEMO

0 comments:

Post a Comment