| Maior acervo de vídeo aulas da web

Não consegue visualizar a vídeo aula?

Utilizando a técnica de Image Replacement e CSS Sprite

Olá, me chamo Marcio Vinicius, e nessa minha primeira video aula irei ensinar a com apenas uma imagem podemos utiliza-la diversas vezes na mesma página, alterando apenas o código CSS e HTML. Espero que gostem e comentem.

Você gostou dessa Vídeo Aula, então compartilhe com seus amigos

Artigos Relacionados

Comentários

  • Rubia Dias

    Olá Marcio Vinicius.
    Parabéns! Gostei bastante.
    Abraço.

  • Marcio Vinicius

    @Rubia Dias, obrigado! Na verdade eu não ia publicar essa Video Aula, porque você já tem uma parecida, mas como a sua é sobre menu e a minha é sobre titulos, então não vi problema. Beijos!

  • Rubia Dias

    @Marcio Vinius Você está certo. A técnica é a mesma mas, pode ser utilizada de várias formas. Eu mostrei de uma e você de outra.
    O importante é mostrar o que pode ser feito e ajudar cada vez mais.
    Parabéns!
    Abraço.

  • CARIOCAF1

    Marcio excelente aula, me ajudou muito estou aprendendo HTML e CSS. Valeu
    parabésn!

  • Denildo (Dido)

    @Marcio Vinicius
    Cara que maneiro da pra diminuir a CSS
    gostei muito parabéns!

  • Marcio Vinicius

    @CARIOCAF1, obrigado mesmo!

    @Denildo (Dido), sim, ficou um pouco mais limpo o código e mais leve na execução da página, mas vale lembrar que essa técnica deve ser usada com moderação.

    Abrçs

  • http://tutorial-city.net Tutorial City

    a tag span nesse caso não é necessária. Ao invés de usar IDs eu usaria classes com nome de erro ou aviso ou sem-acesso, assim não seria necessário um seletor pra cada ID(imagine um blog com 100 ou 200 posts!). No caso do font-size não é preciso colocar pequeno pra que não possa ser visto, basta colocar text-indent:-9999px;. Pra finalizar, não acho uma boa ideia colocar títulos desse tipo, pois não dão uma descrição interessante do conteúdo, os títulos devem dar uma descrição brevíssima do conteúdo(como as manchetes dos jornais e revistas por exemplo).

    Abraços

  • Marcio Vinicius

    @Tutorial City, a minha ideia principal foi mostrar a funcionalidade do CSS Sprite, claro que deve ser aperfeiçoado como você disse e deixou claro como fazer isso, então agradeço!!! E eu não havia imaginado o text-indent:-9999px; gostei, rsrs’

    Abraços!!

  • Denildo (Dido)

    @Marcio Vinicius
    kkk sempre com moderação…

    @Tutorial City suas criticas tambem ajudam sempre leio seus comentarios são bem interesantes mais faz uma V.A
    pra nos…

  • Marcio Vinicius

    @Denildo, realmente, os comentários de Tutorial City assim como os do David, fazem com que nós possamos enxergar de outra maneira, que não foi pensada no inicio.

    Abraços!

  • http://tutorial-city.net Tutorial City

    @Denildo
    Farei em breve! abraços

  • Marcus

    Muito bom, eu uso CSS Sprite para menu, mais ainda não havia pensado nessa possibilidade!
    Parabéns!

  • http://www.wrccdesign.com.br Wagner Rosati / Wrcc Design

    Oi Marcio, bem legal esse esquema de image replacement e css sprite..ta bem explicativo o video…
    gostaria de ir além, como que ficaria caso eu quiser fazer um efeito a:hover ao passar o mouse em cima…como se fosse um botão?

    grande abraço!


Hospedado por Hostnet - Hospedagem de sites

VAB - Todos os direitos reservados - 2008 / 2012

Developed by: MX Web Studio

Mais em Tableless (27 of 57 articles)