CSS Sprite

CSS - Style Sheet

Professor: Jolvani
Aula 33

CSS Sprite

CSS Sprite uma tcnica para aumentar a performance das imagens nas pginas html.

Deve-se evitar ao mximo a requisio no servidor (de imagens por exemplo)

Olhando para imagem acima, seria necessrio 9 requisies para carregar todas as
imagens no documento html.

CSS Sprite

A tcnica 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 pedaos que vc desejar. Ela
aumenta em mais de 60% a velocidade do carregamento
da pgina.

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

apresentao da imagem dentro de sua div, li, span, apresentando a imagem
como um background e mostrando as dimenses do deu background.

Vamos ver na prtica, precisamos de uma imagem parecida como a mostrada

acima.

CSS Sprite

Dentro do nosso html criamos o cdigo. Uma div com

a classe email para mostrar o envelope de email....

Arquivo css33csssprite.html

Construmos nosso css

sprite.css

Teste. Observe que ele comeou a apresentar a

primeira imagem.

Para apresentar a imagem correta devemos usar o

posicionamento, calculando-o usando o paint por
exemplo

CSS Sprite

Construmos nosso css

sprite.css

Para apresentar a imagem correta devemos usar o

posicionamento, calculando-o usando o paint por
exemplo.

CSS Sprite

Construmos nosso css

Colocando outras imagens: Ops observe as mesmas

posies...

CSS Sprite

Construmos nosso css

Verificamos as posies no paint

Prxima Aula: Bordas Arredondadas e

Sombremento