49 lines
1.7 KiB
Plaintext
49 lines
1.7 KiB
Plaintext
---
|
|
title: Explique os sprites CSS e como você os implementaria em uma página ou site.
|
|
---
|
|
|
|
Os sprites CSS combinam várias imagens em um único arquivo de imagem maior e usam uma combinação de CSS `background-image`, `background-position` e `background-size` para selecionar uma parte específica da imagem maior como a imagem desejada.
|
|
|
|
Essa técnica costumava ser comumente usada para ícones (por exemplo, o Gmail usa sprites para todas as suas imagens).
|
|
|
|
## Vantagens
|
|
|
|
- Reduz o número de solicitações HTTP para várias imagens (apenas um único pedido é necessário por spritesheet). Mas com HTTP2, carregar várias imagens já não é muito problema.
|
|
- Download avançado de ativos que não serão baixados até ser necessário, como imagens que aparecem apenas nos pseudo-estados `:hover`. O piscar não seria visto.
|
|
|
|
## Como implementar
|
|
|
|
1. Use um gerador de sprites que agrupa várias imagens em uma só e gere o CSS apropriado para isso.
|
|
2. Cada imagem teria uma classe CSS correspondente com as propriedades 'background-image' e 'background-position' definidas.
|
|
3. Para usar essa imagem, adicione a classe correspondente ao seu elemento.
|
|
|
|
A folha de estilos gerada pode parecer algo como:
|
|
|
|
```css
|
|
.icon {
|
|
background-image: url('https://example.com/images/spritesheet.png');
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.icon-cart {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.icon-arrow {
|
|
background-position: -24px 0;
|
|
}
|
|
```
|
|
|
|
E pode ser usado no HTML como tal:
|
|
|
|
```html
|
|
<span class="icon icon-cart"></span>
|
|
|
|
<span class="icon icon-arrow"></span>
|
|
```
|
|
|
|
## Referências
|
|
|
|
- [Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
|