NumClique – Estilo de vida digital

Um dos grandes questionamentos quanto aos recursos web, é quando queremos utilizar uma fonte “diferente” em determinado ponto do site e “não temos como”, pois para que desse certo o usuário final visualizar normalmente a fonte escolhida, ele teria que ter a fonte no computador senão você meio que obrigaria a pessoa a baixar, instalar e daí sim entrar no seu site para poder visualizá-lo do jeitinho que você planejou, mas quando os assuntos acessibilidade e usabilidade entram em ação tais maneiras tornam-se inviáveis.

A solução para que você possa colocar em seu site aquele título com uma fonte toda toda e o usuário olhe e pense: “mermão… que fonte doidera! Que título massa!” – você terá que usar a técnica conhecida como Image Replacement.

Esta técnica consiste em você substituir o texto que é exibido no navegador por uma imagem. Mas daí vem a pergunta:

Joares, eu não poderia utilizar uma imagem simplesmente?

Não, pois se a pessoa quiser ver todo o seu site em modo texto, ou até mesmo imprimir somente o texto do seu site? Ela teria que gastar bons reais, dólares ou euros – depende de onde você esteja – para poder obter tal impressão.

Com este recurso, você faz seu site todo em texto, bem bonitinho, utilizando as tags certas, nos lugares e finalidades certas, e acaba por “ganhar” em termos de acessibilidade, indexação em sites de busca e usabilidade.

Mas, como eu posso utilizar este recurso tão massa?

É muito simples e fácil, vamos supor que você tem a seguinte estrutura no seu site:

<div id=”topo”>

<h1><a href=”endereço do site”>Topo do site</a></h1>

</div>

E você quer que ao invés de aparecer o cabeçalho de nível 1 (<h1>) com o texto “Topo do site” apareça sua logo, você deverá utilizar o CSS para fazer isso… na prática seria da seguinte forma:

#topo h1 {

text-indent:-9000px;

}

Antes vou explicar o que o text-indent faz… é só pensar na sua infância. Lembra aquela sua professora falava pra você colocar dois dedos pra poder fazer a margem antes de sua redação depois das férias? Pois é, o text-indent é responsável por você fazer esse mesmo esqueminha da margem nos seus textos da web. Se você colocar um valor positivo, ele dará o espaço da margem de sua infância, mas nesse caso estamos colocando -9000px para a esquerda, ou seja, já sumimos com o texto…

Uma medida preventiva que devemos sempre tomar é para o caso de alguém ter um monitor super-mega-ultra-master-blaster irá ver seu texto “sumido” e para evitar isso, você incluirá uma propriedade ao CSS da seguinte maneira:

#topo h1 {

text-indent:-9000px;

overflow:hidden;

}

Esta propriedade está dizendo que tudo que está além do campo determinado, nesse caso a DIV, deverá ficar invisível…

Para inserir a imagem, você determinará a largura, altura e a localização da imagem… o resultado final ficará assim:

#topo h1 {

text-indent:-9000px;

overflow:hidden;

width:largura da imagem;

height:altura da imagem;

background:url(endereço da imagem);

}

Pronto… agora você já sabe utilizar a técnica de Imagem Replacement. No próximo tutorial, irei ensinar a fazer este cabeçalho ser um link, então não perca!

Forte abraço e até a próxima!