Monday, November 24, 2008

CSS Image Preloader

from http://www.divitodesign.com/2007/11/create-an-image-pre-loader-with-css-only/

In CSS,
div.loader{
background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
background:url(images/hover4.gif) no-repeat;
margin-left:-1000px;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
font: 13px 'Lucida Grande', Arial, sans-serif;
}
ul li{
display: inline;
}
ul li a{
display:block;
width:120px;
text-decoration: none;
padding: 0.3em 1em;
color: #000;
background:url(images/link.gif);
}
ul li a:hover{
width:120px;
background:url(images/hover.gif);
}


In HTML,

<ul>
<li><a href="http://www.divitodesign.com">Homepage</a></li>
<li><a href="http://www.divitodesign.com">Articles</a></li>
<li><a href="http://www.divitodesign.com">Weblog</a></li>
<li><a href="http://www.divitodesign.com">Contact</a></li>
</ul>

0 comments: