Aprendendo CSS SPRITE

Aprendendo CSS SPRITE

21/12/2010 | POR Alexandre H Jodai | 16 Comentários | 7.587 VISITAS

Olá, Galera. Nesta VA você vai aprender a trabalhar com CSS SPRITE. Um método rápido e eficaz de diminuir o tempo de carregamento das imagens em seus sites, além de manter uma organização.

Ao invés de ter várias imagens, basta um único arquivo. Aproveitem e boa vídeo aula.

Visite o site deste autor: saomiguelpaulista.net

16 respostas para “Aprendendo CSS SPRITE” deixe a sua!
  • Matheus Em: 21 de dezembro de 2010 as 14:38

    Cara muito bom, adorei essa video aula… Legal saber mais de sprite e css…
    Mas agora eu tenho um pedido a fazer, tem como nos ensinar a fazer um menu drop down como o menu do site G1.com da globo.

    Achei loco aquele menu e nós temos muitas dificuldades com menu drop down.

    Vlw.

  • Cristian Etchebest Em: 21 de dezembro de 2010 as 19:26

    Muito boa a VA, bem explicada e direto ao ponto. O único pedido é referente ao logo “OMSMP”, acho que ficará melhor para visualizar os códigos escritos na explicação se este logo estiver na direita e em menor tamanho. É uma crítica construtiva ;) , no mais esta tudo blz.
    Parabéns.

  • Joao carlos Em: 22 de dezembro de 2010 as 2:41

    showwww

  • Alexandre H Jodai Em: 22 de dezembro de 2010 as 10:58

    @Matheus – Tenho duas VA prontas que estão sendo analisadas pelo Robson para publicar no site. Depois me comprometo a fazer uma VA com menu dropdow com jquery, beleza.

    @Cristian – Só visualizei o logo depois que o vídeo estava renderizado. Nas próximas VA que entrarão no site o logo já estará na direita, Mas não diminui o tamanho, afinal é o minímo para manter a autoria, rsrs

    @Joao – Obrigado, cara

  • Gabriel Vinicios Silva Maganha Em: 22 de dezembro de 2010 as 12:02

    Ótima dica! Agora que estou aprendendo CSS e Tableless e estou adorando. Parabéns pela video-aula e continue nos mandando dicas!

  • Adilio Gobira Em: 25 de dezembro de 2010 as 11:55

    Essa ai ajudou muito hehe.parabéns cara.

  • José Carlos Em: 27 de dezembro de 2010 as 23:52

    Perfeita vídeo aula!!
    Aguardando mais.
    :D

  • Alexandre H Jodai Em: 13 de janeiro de 2011 as 17:09

    Pessoal,

    Todos os scripts das minhas vídeo aulas, disponibilizei no fórum da Upinside.

    Atendendo solicitações, posteriores vídeo aulas, serão postado os códigos no fórum.

    É só se cadastrar e copiar.

    abraços

  • Lucas Suppes Em: 23 de janeiro de 2011 as 17:37

    Alexandre , concordo com o Matheus , se nos ensinar a fazer um menu como o da globo que é em JQuery, você conseguirá acertar variados assuntos , como JQuery ,show, hide , fade,ETC.
    Alem do sprite e css.

    Seria uma super video aula que eu assistiria e faria um twiter só pra twittar!

  • Hlder Nunes Em: 9 de abril de 2011 as 21:58

    Como sempre, as ótimas videos-aula, cara! foi de ótimo entendimento.
    Só o áudio que estava um pouco baixo… mas isso é besteira diante de tanto entendimento.
    falow abraço

  • sergio Em: 16 de maio de 2011 as 20:21

    melhor tutorial sobre sprite parabens!

  • Ademir Em: 24 de maio de 2011 as 18:35

    Alexandre agora tirei todas as dúvidas sobre sprite.

    valeu…

    Grande Abraço

  • Raimundo Em: 24 de maio de 2011 as 21:33

    Parabens foi uma excelente video aula esclareceu bastante obrigao pelas dicas

  • Alexsandro Em: 25 de maio de 2011 as 20:00

    Show a VA…
    Você é um excelente professor.
    Bem explicativo e de fácil compreenção.
    VLW

  • Silva Em: 12 de março de 2012 as 17:43

    Olá, parabéns pela vídeo aula! Estou com um problema, estou montando um site teste para estudar esta técnica que você passou, mais ocorreu um problema ao qual não consegui resolver, é o seguinte: tem como fazer uma imagem ser repetida, imagens de fundo de menus, de topos que se repetem horizontalmente 100% dentro do elemento onde estão, no caso do topo na tela toda, tem como? Ou para fazer isso tenho que usar imagem separada deste PNG?

    E novamente realmente os parabéns pela aula, o site ganha bastante com esta técnica! Aguardo uma resposta sobre minha dúvida!

  • Alexandre H Jodai Em: 27 de março de 2012 as 23:16

    @Silva, como vai?
    Para repetição é possível realizar com sprite, mas não é muito prático.
    O mais aconselhavel é utilizar uma imagem separada, até mesmo porque, imagens para aplicação em background com repetição, não pesam muito.

    O sprite é mais indicado para icones, figuras, botões e algumas imagens que serão repetidas ao longo do site, ganhando-se assim no tempo de carregamento, devido as requisições menores.

    Abraço

Deixe seu comentário!