Estudo sobre Image Replacement - Parte 1

07/09/2006

Vamos iniciar uma série de tutoriais sobre Image Replacement, que é uma técnica usada para substituir um texto por uma imagem, usando CSS. (e JavaScript, dependendo da maneira que for aplicado). Esta técnica é bastante utilizada para títulos, pois podemos deixa-lo com uma aparência melhorada, além de podermos usar outras fontes que não as convencionais.
Na primeira parte, irei mostrar como fazer um image replacement usando a tag span. Sendo o mais fácil de se entender e aplicar.

Primeiramente, vamos definir nosso titulo:

TEXTO PURO
HTML:
  1. <h1><span>Image Replacement - www.tuliofaria.net</span></h1>

A imagem que usaremos para substituir o texto será:
Imagem

No HTML iremos fazer apenas isso. Agora no CSS que começa a diversão.
Primeiro vamos colocar a imagem do titulo de fundo no h1.

TEXTO PURO
CSS:
  1. h1{
  2. background: url(titulo.gif) no-repeat;
  3. height: 40px;
  4. }

Se testarmos neste ponto, iremos perceber que o texto permanece sobre a imagem de fundo do h1. Para retirarmos o texto, iremos trocar o display do span para none.

TEXTO PURO
CSS:
  1. h1 span{
  2. display: none;
  3. }

Após isso, já teremos nosso IR funcionando. Este método tem alguns problemas como, se a imagem não for carregada o texto também não será mostrado, e temos uma tag a mais, no caso o span.

Confira o exemplo.
Até a próxima. Dúvidas? Comentem!

1 Comentário »

  1. Lucivan said,

    Junho 23, 2008 @ 09:18

    Olá, amigo muito bom o tutorial parabéns, posso da um idéia para o próximo tutorial ?

    Sobre esse LightBox que deixa o fundo preto e nos mostra a imagem em tamanho real.
    Abraço.

RSS feed for comments on this post · URI do TrackBack

Deixe seu comentário