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:
- https://spritegen.website-performance.org/
- http://www.spritecow.com/
- https://www.npmjs.com/package/sprity
Até a próxima!
Curso
BDD - Testes Guiados por Comportamento com Behat PHP
Conhecer o curso
