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:
-
<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:
-
h1{
-
background: url(titulo.gif) no-repeat;
-
height: 40px;
-
}
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.
-
h1{
-
background: url(titulo.gif) no-repeat;
-
height: 40px;
-
text-indent: -1000px;
-
}
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:
-
h1{
-
background: url(titulo.gif) no-repeat;
-
height: 40px;
-
text-indent: -1000px;
-
overflow: hidden;
-
}
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.
Até a próxima... Dúvidas? Comentem!
