Aula 33. css sprite

324 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
324
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 33. css sprite

  1. 1. CSS Sprite CSS - Style Sheet Professor: Jolvani Aula 33
  2. 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. 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. 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. 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. 6. CSS Sprite  Construímos nosso css  Colocando outras imagens: Ops observe as mesmas posições...
  7. 7. CSS Sprite  Construímos nosso css  Verificamos as posições no paint
  8. 8. Próxima Aula: Bordas Arredondadas e Sombremento

×