RSS

CSS Sprites – Faça seu site carregar mais rápido

Pietro Gaião | maio 25th, 2010 | CSS | No Comments »

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

Uma página web com muitas imagens pode demorar muito tempo para carregar e gera várias solicitações de servidores.

Usando sprites irá reduzir o número de pedidos de servidor.
Em vez de usar três imagens separadas, nós usamos esta imagem única “img_navsprites.gif”:

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

No exemplo a seguir a CSS especifica qual parte do “img_navsprites.gif” devemos demonstrar:

Exemplo CSS:

<style type="text/css">
    img.home{
      width:46px;
      height:44px;
      background:url(img_navsprites.gif) 0 0;
    }
</style>

Explicação:

• Definimos a largura e a altura
• Definimos a posição da imagem de fundo para 0px esquerda e 0px topo

Como criar uma lista de navegação?

Nós vamos utilizar uma lista de HTML:

Exemplo CSS:

<style type="text/css">

	#navlist{
        position:relative;
	}

	#navlist li{
        margin:0;
        padding:0;
        list-style:none;
        position:absolute;
        top:0;
        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>

Exemplo HTML:

<ul id="navlist">
	<li id="home"></li>
	<li id="prev"></li>
	<li id="next"></li>
</ul>

Explicação:

• #navlist {position:relative;}
Primeiro definimos a ul como o posicionamento relativo para permitir posicionamento absoluto dentro dele

• #navlist li {margin:0; padding:0; list-style:none; position:absolute; top:0;}
O estilo de lista com aquelas bolinhas são removidas, e todos os itens da lista são posicionamento absoluto.

• #navlist li {height:44px; display:block;}
A altura de todos as imagens são 44px

Agora começa a posição e estilo de cada parte específica:

• #home {left:0px; width:46px;background:url(img_navsprites.gif) 0 0;}
Primeiro definimos o menu #home com 0px da esquerda, a largura é 46px, o fundo da imagem e sua posição 0px esquerda, 0px topo

• #prev {left:63px; width:43px;background:url(img_navsprites.gif) -47px 0;}
Depois movemos o menu #prev 63px de distância da esquerda, a largura do menu é de 43px e movemos a imagem de fundo para -47px 0 para pegar a próxima imagem da direita.

• #next{left:129px; width:43px;background:url(img_navsprites.gif) no-repeat -91px 0;}
Depois movemos o menu #next 129px de distância da esquerda, a largura do menu é de 43px e movemos a imagem de fundo para -91px 0 para pegar a próxima imagem da direita.

Veja o código completo

Copie o código abaixo e salve como teste.html


<html>
  <head>
  <title>CSS Sprites</title>
  </head>
<body>

<style type="text/css">

	#navlist{
        position:relative;
	}

	#navlist li{
        margin:0;
        padding:0;
        list-style:none;
        position:absolute;
        top:0;
        height:44px;
        display:block;
	}

	#home{
        left:0px;
        width:46px;
        background:url('http://www.pietrogaiao.com.br/blog/wp-content/uploads/2010/05/img_navsprites.gif') 0 0;
	}

	#prev{
        left:63px;
        width:43px;
        background:url('http://www.pietrogaiao.com.br/blog/wp-content/uploads/2010/05/img_navsprites.gif') -47px 0;
	}

	#next{
        left:129px;
        width:43px;
        background:url('http://www.pietrogaiao.com.br/blog/wp-content/uploads/2010/05/img_navsprites.gif') -91px 0;
	} 

</style>

<ul id="navlist">
	<li id="home"></li>
	<li id="prev"></li>
	<li id="next"></li>
</ul>

</body>
</html>

Popularity: 21% [?]

Tags:,

Leave a Reply