O documento explica a técnica CSS Sprite, que permite combinar várias pequenas imagens em uma única imagem para aumentar a velocidade de carregamento das páginas. Isso evita várias requisições de servidor para imagens individuais, mostrando apenas partes da imagem grande conforme necessário posicionando-a com CSS. A técnica calcula as posições das imagens na sprite para exibí-las corretamente.

1. CSS Sprite
CSS - Style Sheet
Professor: Jolvani
Aula 33

2. CSS Sprite
 CSS Sprite é uma técnica para aumentar a performance das imagens nas páginas html.
 Deve-se evitar ao máximo a requisição no servidor (de imagens por exemplo)
 Olhando para imagem acima, seria necessário 9 requisições para carregar todas as imagens
no documento html.

3. CSS Sprite
 A técnica do CSS Sprite permite que vc utilize uma
única imagem que contenha todas as pequenas
imagens dentro dela e posicione essa imagem dentro
do seu documento html apresentando apenas os
pedaços que vc desejar. Ela aumenta em mais de 60%
a velocidade do carregamento da página.
 Consiste em colocar em uma única imagem todas as
pequenas imagens que vc irá utilizar.
 Na medida que vc irá necessitar de uma imagem vc posiciona o inicio da
apresentação da imagem dentro de sua div, li, span, apresentando a imagem
como um background e mostrando as dimensões do deu background.
 Vamos ver na prática, precisamos de uma imagem parecida como a mostrada
acima.

4. CSS Sprite
 Dentro do nosso html criamos o código. Uma div com
a classe email para mostrar o envelope de email....
 Arquivo css33csssprite.html
 Construímos nosso css
 sprite.css
 Teste. Observe que ele começou a apresentar a
primeira imagem.
 Para apresentar a imagem correta devemos usar o
posicionamento, calculando-o usando o paint por
exemplo

5. CSS Sprite
 Construímos nosso css
 sprite.css
 Para apresentar a imagem correta devemos usar o
posicionamento, calculando-o usando o paint por
exemplo.

6. CSS Sprite
 Construímos nosso css
 Colocando outras imagens: Ops observe as mesmas
posições...

7. CSS Sprite
 Construímos nosso css
 Verificamos as posições no paint

8. Próxima Aula: Bordas Arredondadas e
Sombremento