Image Replacement com CSS
December 13, 2009 by Marcio MisumiImage replacement é uma técnica CSS que pode ser traduzido para “Substituição por imagem”, isto signfica que no documento (X)HTML você irá encontrar o texto, porém visualmente esse texto será substituído por imagem. Essa técnica é muito importante por questão de acessibilidade, isso porque se o texto simplesmente for inserido ao documento utilizando o elemento IMG e alguém utilizar um leitor de tela não conseguirá ler o que está escrito.
Normalmente utilizamos essa técnica para escrever um texto, que utiliza uma fonte que não é de sistema, usando imagem. Vale utilizar o bom senso e não utilizar o image replacement para todos os textos do seu documento.
Essa técnica que vamos aprender consiste em deslocar o texto da área visual do usuário. Vamos utilizar o logo deste blog para exemplificar a técinica de image replacement:
Estrutura HTML:
<h1><a href="http://marciomisumi.com.br/blog" title="marcio misumi"> marcio misumi</a></h1>
Formatação CSS:
h1 {
display: block;
text-indent: -500000em;
background: url(logo.png) 0 0 no-repeat;
height: 139px;
width: 345px;
}
h1 a {
display: block;
height: 139px;
width: 345px;
overflow: hidden;
}
O que faz o texto se deslocar da área visual é a propriedade text-indent com valor negativo. Como background nós utilizamos a imagem que nós queremos que substitua o texto. É importante também definir as dimensões (width e height) da imagem utilzada.
Aqui podemos visualizar o exemplo mostrado anteriormente da técnica de image replacement. Desabilite o CSS ou veja o código fonte para ver o texto.
