Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

29 2009 janeiro

Image replacement

Autor: Carlitos em CSS

Última modificação: 31 maio 2011

Quando o layout necessita utilizar alguma fonte customizada para títulos ou textos específicos, temos que utilizar imagens ao invés do texto puro.

A técnica image replacement serve justamente para exibir uma imagem (com a fonte customizada), ao mesmo tempo que no HTML há um texto limpo, para que este seja acessível aos sistemas de busca e leitores de tela, por exemplo.

Supondo que nosso HTML seja o seguinte:

<h1>Título do site</h1>

Faremos nosso CSS para que substitua este texto por uma imagem (de 200px por 50px por exemplo):

h1 { width: 200px; height: 50px; background: url(../imagens/titulo.png) no-repeat; text-indent: -999em; overflow: hidden; }

Obviamente que a largura, altura e caminho da imagem deverão ser ajustados, de acordo com a necessidade.

3 comentários

Responder
  1. 3 de fevereiro de 2009

    linke disse:

    Se o texto que está escondido (pelo text-intent) estiver aparecendo por cima da imagem, pode ser que esteja faltando a propriedade DISPLAY: BLOCK no CSS.

    Como H1 (títulos) já tem isso por default, sem problemas, mas itens como links, spans, etc, irão precisar do BLOCK para funcionar 😉

  2. 10 de junho de 2009

    Morais Júnior disse:

    Isso sim é que é semântica, todos sabermos que a tag “” é uma tag indicativa de titulo principalmente a H1 e H2 vejo muitos erros graves até em sites de grande porte, quando se quer utilizar uma imagem como titulo a mesma tem que ser definida dentro da tag H1 ou semelhantes de acordo com o caso, mas nosso amigo carlitos esta equivocado em um afator, pela minha experiência no assunto o correto é indicar a imagem na tag IMG e em ALT definir a alternativa contextual para a mesma.

    CERTO:

    ERRADO:
    Título do site
    h1 { width: 200px; height: 50px; background: url(../imagens/titulo.jpg) no-repeat; text-indent: -9999em; overflow: hidden; }

    Vamos analisar do começo, da primeira forma o texto será exibido logo que a pagina é carregada sem a necessidade de esperar carregar a imagem, e o próprio navegador se depõe de trocar o texto pela imagem assim que ele for carregada, no segundo caso o texto não aparece quando abrimos a pagina e sim quando a imagem é carregada.

    se eu estiver errado me corrija…

  3. 12 de junho de 2009

    Carlitos disse:

    Opa, boa abordagem Morais!

    Então, na realidade não estou equivocado, pois agora entramos no campo das metodologias do image replacement. Uma delas é a que você citou, colocando uma imagem que mostra o texto antes de ser carregada, mas isso só acontece nos browsers decentes. IE não reage dessa maneira.

    Para mim o mais correto e semântico é usar o texto puro no HTML que, através do CSS é retirado e inserido uma imagem de fundo pois, para mim, imagem deve servir para ilustrar um conteúdo, etc., mas não ser usada como texto, por isso o seu método para mim não é o mais correto, apesar de não ser errado também.

    Só considero esta maneira que comentei a mais coerente.

    Obrigado pela visita ao blog!

Escreva seu comentário