Como criar uma CSS Sprite – Tutorial

Por | Atualizado em 2015-11-01

Neste tutorial iremos explicar como criar uma CSS Sprite utilizando o programa gratuito Tonttu.

Uma CSS Sprite é basicamente a junção de várias imagens numa só. Ao utilizar esta funcionalidade, o leitor consegue reduzir as requisições de DNS do seu site (ou blog), melhorando significativamente a velocidade de carregamento das páginas.

Criar uma CSS Sprite

Em primeiro lugar, faça o download do programa Tonttu e proceda à sua instalação. Agora, arraste as imagens que irão compor a sua CSS Sprite para a janela do Tonttu.

Não se esqueça de arrastar os limites da janela da imagem (CSS Sprite), caso contrário, o Tonttu irá gerar uma imagem muito grande.

Como criar uma CSS Sprite - Tutorial


Quando finalizar a sua CSS Sprite, clique no botão “Export”. O Tonttu irá gerar a imagem e o código CSS necessário para a incorporação.

Agora, cole o código gerado pelo Tonttu (pode abrir o arquivo com o bloco de notas do Windows), na declaração de estilo do seu Site ou Blog.

Por exemplo, no Blogger, deverá colar o código antes da tag “]]></b:skin>”. se possui um site deverá colar o código no arquivo style.css.

A sua CSS Sprite está pronta a ser utilizada. Agora sempre que pretender chamar uma imagem, basta utilizar o seguinte código:

<div id="id0">Pode inserir código aqui</div>

Ou então,

<ul>
<li id="home"><a href="link"></a></li>
</ul>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *