| Maior acervo de vídeo aulas da web

Marcio Vinicius
1.050 visitas
26 jul 2010
13 Comentários

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

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!