Estudo sobre Image Replacement – Parte 2

Estudo sobre Image Replacement – Parte 2

Nesta segunda parte iremos trocar o texto por imagem usando text-indent, usando o método desenvolvido por Phark (Phark Method).

Primeiro vamos declarar nosso h1 no html:

  1. <h1>Image Replacement – www.tuliofaria.net</h1>

Note que nesse método não temos tag’s adicionais.

A imagem que usaremos para substituir o texto será:

Agora no CSS, vamos colocar a imagem de fundo no h1:

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

Usamos o no-repeat para que o fundo não se repita durante a extensão do h1.

Bom agora precisamos ocultar o texto. Nesta técnica, iremos usar o text-indent para fazer isso. Colocando seu valor um número bastante negativo.

  1. h1{
  2. background: url(titulo.gif) no-repeat;
  3. height: 40px;
  4. text-indent: -1000px;
  5. }

Para evitar que algum usuário com resolução muito alta possa ver o texto do lado esquerdo da tela, pois afinal, o text-indent muda apenas onde será o inicio do texto, teremos que oculta-lo.

Então vamos definir que se ele estourar o bloco do h1, ou seja, ocorra um overflow, ele oculte:

  1. h1{
  2. background: url(titulo.gif) no-repeat;
  3. height: 40px;
  4. text-indent: -1000px;
  5. overflow: hidden;
  6. }

Pronto, nosso Imagem Replacement já está pronto!

Ponto positivo deste método: não usa tags auxiliares, como span, para fazer a substituição.
Ponto negativo deste método: não soluciona o problema da imagem não ser carregada.

Veja o Exemplo Funcionando!

Até a próxima… Dúvidas? Comentem!

Deixe uma resposta