Sprites de imagem CSS

Índice

    Mostrar índice

Sprites de imagem

Um sprite de imagem é uma coleção de imagens colocadas em uma única imagem.

Uma página web com muitas imagens pode demorar muito para carregar e gerar múltiplas solicitações de servidor.

O uso de sprites de imagem reduzirá o número de solicitações do servidor e economizará largura de banda.

Sprites de imagem - exemplo simples

Em vez de usar três imagens separadas, usamos esta imagem única ("img_navsprites.gif"):

Com CSS, podemos mostrar apenas a parte da imagem que precisamos.

No exemplo a seguir, o CSS especifica qual parte do "img_navsprites.gif" imagem para mostrar:

Exemplo

#home
{
   
width: 46px;
  height: 44px;
   
background: url(img_navsprites.gif) 0 0;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  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>

Exemplo explicado:

<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)

Esta é a maneira mais fácil de usar sprites de imagem, agora queremos expandi-la usando links e efeitos de foco.

Sprites de imagens - Crie uma lista de navegação

Queremos usar a imagem sprite ("img_navsprites.gif") para criar uma lista de navegação.

Usaremos uma lista HTML, pois ela pode ser um link e também suporta uma imagem de fundo:

Exemplo

#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;
}

Experimente você mesmo →

<!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>

Exemplo explicado:

#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

Agora comece a posicionar e estilizar cada parte específica:

#home {left:0px;width:46px;}

- Posicionado totalmente à esquerda e a largura da imagem é 46px

#home {background:url(img_navsprites.gif) 0 0;}

- Define a imagem de fundo e sua posição (0px esquerdo, 0px superior)

#prev {left:63px;width:43px;}

- Posicionado 63px à direita (#home largura 46px + algum espaço extra entre os itens), e a largura é 43px

#prev {background:url('img_navsprites.gif') -47px 0;}

- Define a imagem de fundo 47px à direita (#home largura 46px + linha 1px divisor)

#next {left:129px;width:43px;}

- Posicionado 129px à direita (o início de #prev é 63px + #prev largura 43px + espaço extra) e a largura é 43px

#next {background:url('img_navsprites.gif') -91px 0;}

- Define a imagem de fundo 91px à direita (#home largura 46px + 1px divisor de linha + #prev largura 43px + divisor de linha 1px)

Sprites de imagem - efeito de foco

Agora queremos adicionar um efeito de foco à nossa lista de navegação.

Dica: O seletor :hover pode ser usado em todos os elementos, não apenas em links.

Nossa nova imagem ("img_navsprites_hover.gif") contém três imagens de navegação e três imagens para usar para efeitos de foco:

Como esta é uma única imagem e não seis arquivos separados, não haverá atraso no carregamento quando um usuário passa o mouse sobre a imagem.

Adicionamos apenas três linhas de código para adicionar o efeito de foco:

Exemplo

#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;
}

Experimente você mesmo →

<!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>

Exemplo explicado:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}

- Para todas as três imagens instantâneas, especificamos a mesma posição de fundo, apenas 45px mais abaixo