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.
