Sprites de imagem CSS

❮ Anterior Próximo ❯

Sprites de imagem

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

Uma página da Web com muitas imagens pode levar muito tempo para carregar e gerar várias 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 única imagem ("img_navsprites.gif"):

imagens de navegação

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

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

Exemplo

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

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 (esquerda 0px, top 0px)

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

Sprites de imagem - Criar 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 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;
}

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;} - margin e padding são definidos como 0, list-style é 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 são 44px

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

#home {left:0px;width:46px;} - Posicionado totalmente à esquerda, e a largura da imagem é de 46px
#home {background:url(img_navsprites.gif) 0 0;} - Define a imagem de fundo e sua posição (esquerda 0px, top 0px)
#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 + 1px divisor de linha)
#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 width 46px + 1px line divisor + #prev width 43px + 1px line divisor )

Sprites de Imagem - Efeito Hover

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

Dica: O :hoverseletor 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:

imagens de navegação

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

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

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

Exemplo explicado:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Para todas as três imagens hover, especificamos a mesma posição de fundo, apenas 45px mais abaixo

❮ Anterior Próximo ❯

Tutorial de CSS

CSS Avançado

Responsivo a CSS

Grade CSS

CSS SASS

Exemplos de CSS

Referências CSS

Sprites de imagem CSS