Categorias

Blog

INÍCIO  /  PROGRAMAÇÃO   /  HTML & CSS   /  USANDO A TÉCNICA IMAGE REPLACEMENT

USANDO A TÉCNICA IMAGE REPLACEMENT

Uma técnica muito usada na construção de um site é o uso do image replacement no css, que resumidamente falando é troca de um texto por uma imagem. Para os que estão começando agora não devem estar entendendo o porque de precisar fazer esta técinca.

Por não examinarem o CSS, as ferramentas de busca não encontrarão e, portanto, não indexarão as imagens referenciadas no CSS. Isso pode ser ou não interessante. Se usamos corretamente a técnica image replacement, apenas imagens secundárias, supérfluas para o conteúdo, serão ignoradas; as imagens mais importantes ficam no HTML e, portanto, são indexadas.

Portanto, use e abuse desta técnica e ajude aos buscadores a lhe ajudarem também. Pois esta técnica faz com que eles (buscadores) entendam melhor a importância de cada imagem do seu site, rankeando melhor cada página pelo assunto que se refere. Dá uma olhada abaixo como é feito esta técnica:

 

EXEMPLO DE COMO USAR:

<ul class="icones-redes-sociais">
<li>
<a class="github" href="https://github.com/joaodasilva">Github</a>
</li>
</ul>

No arquivo site.css, colocamos as regras para fazer o image replacement e as imagens correspondentes a cada rede social em sua respectiva classe:

.icones-redes-sociais a {
width: 40px;
height: 40px;
display: inline-block;
text-indent: -99999px;
}

.github {
background-image: url(github.png);
}

 

css3

Escrito por: Fernando Portugal

 

Web Designer / Web Developer

Sem comentários
Deixe um comentário

OVER 1.000 LIKES!
Esta semana atingi a marca de mil likes
na fan page.Muito obrigado a todos que
colaboraram. A meta agora é 2.000 likes
até junho. Que tal então dar essa ajuda ?
Clica ai no botão abaixo e da um like.
JÁ VAI EMBORA? ESPERA AÍ!
Assine minha newsletter e receba notícias sobre
programação web, tecnologia e Portugal.
Suas informações são confidenciais, elas jamais serão compartilhadas.