CSS Sprites de imagem
<html>
<head>
<style>
#home {
width:
46px;
height:
44px;
background:
url(img_navsprites.gif) 0 0;
}
width:
43px;
height:
44px;
background:
url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id="home"
src="img_trans.gif" width="1" height="1">
<img id="next"
src="img_trans.gif" width="1" height="1">
</body>
</html>
Ø <img
id="home" src="img_trans.gif">- Define apenas uma
pequena imagem transparente porque o atributo src não pode ficar vazio. A
imagem exibida será a imagem de fundo que especificamos em CSS
Ø width: 46px;
height: 44px;- Define a parte da imagem que queremos usar
Ø background:
url(img_navsprites.gif) 0 0;- Define a imagem de fundo e sua posição (0px
esquerdo, 0px superior)
Sprites de imagens - Crie uma lista
de navegação
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background:
url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background:
url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background:
url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li
id="home"><a
href="default.asp"></a></li>
<li
id="prev"><a
href="css_intro.asp"></a></li>
<li
id="next"><a
href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
Ø #navlist {position:relative;}-
a posição é definida como relativa para permitir o posicionamento absoluto
dentro dela
Ø #navlist li
{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margem e preenchimento são definidos como
0, o estilo de lista é removido e todos os itens da lista são posicionados de
forma absoluta
Ø #navlist li, #navlist a
{height:44px;display:block;}- a altura de todas
as imagens é 44px
Sprites de imagem - efeito de foco
Adicionar um efeito de foco à nossa lista de navegação.
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background:
url('img_navsprites_hover.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background:
url('img_navsprites_hover.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background:
url('img_navsprites_hover.gif') -91px 0;
}
#home a:hover {
background:
url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background:
url('img_navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background:
url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>
<ul id="navlist">
<li
id="home"><a
href="default.asp"></a></li>
<li
id="prev"><a
href="css_intro.asp"></a></li>
<li
id="next"><a
href="css_syntax.asp"></a></li>
</ul>
</body>
</html>