Trabalhando com Sprites no CSS

Veja como trabalhar com sprites no CSS.

há 5 anos 10 meses

Olá , Web Developers!

Hoje veremos como trabalhar com sprites no CSS. Se você não sabe o que é, no vídeo abaixo eu explico o que são Sprites e quais suas vantagens:

O Sprite

Nós vamos utilizar a seguinte imagem como nosso Sprite, que possui vários logos de programas feitos com Electron.

Preparando a base

Primeiro precisamos criar uma classe que será a base do nosso sprite. Essa classe será repetida em todo lugar que quisermos usar o sprite. Vamos dar o nome de tw-sprite.

Para que ela possa ficar na mesma linha que outros elementos e também podermos alterar suas dimensões, vamos deixar com display: inline-block. Vamos indicar a nossa imagem como background-image e também indicar que não queremos que ela se repita.

.tw-sprite{
  display: inline-block;
  background-image: url("url da imagem");
  background-repeat: no-repeat;
}

Podemos chamar essa classe em qualquer lugar que quisermos chamar nossa imagem, como na seguinte div por exemplo:

<div class="tw-sprite"></div>

Indicando a imagem - Dimensões

Agora já temos uma base para começar a usar a nossa imagem. Mas agora precisamos indicar qual das imagens queremos usar. Para isso nós precisamos criar uma segunda classe que, em conjunto com a primeira classe que criamos, irá indicar exatamente imagem que queremos exibir.

Vamos supor que queremos o logo do GitHub. Vamos criar uma classe que vai se chamar tw-sprite-github. Então nossa div vai ficar assim:

<div class="tw-sprite tw-sprite-github"></div>

Na segunda classe nós iremos primeiro indicar a largura e altura da imagem com as propriedades width e height. Você pode ver o resultado brincando com o exemplo interativo a seguir:

Indicando a imagem - Posição

Além do tamanho, também precisamos mover a posição da imagem para podermos indicar a imagem que queremos.

Para isso utilizamos a propriedade background-position, que nos permite mover a imagem que estamos usando no background-image. Você pode ver o resultado brincando com o exemplo interativo a seguir:

Como queremos a imagem do GitHub, nossa classe ficará com os seguintes valores:

.tw-sprite-github{
	width: 70px;
	height: 70px;
	background-position: -340px -150px;
}

Conclusão

Claro que este é apenas um exemplo para mostrar como funciona a criação de Sprites com CSS.

Por ser muito trabalhoso e manual (principalmente se precisar ficar adicionando novas imagens), há várias ferramentas em que inserimos as imagens que queremos. A ferramenta já junta todas as imagens em um único arquivo e gera as classes CSS de acordo com nossas instruções.

Há ferramentas online e outras que você pode instalar diretamente do npm.

Abaixo uma lista de ferramentas para criação de Sprites CSS:

Até a próxima!