Técnicas de Substituição de Imagens e Padrões de Repetição para Imagens
Técnicas de substituição de imagens vem do termo inglês “Image Replacement”, a técnica é usada para substituir(ocultar) um texto por uma imagem com o mesmo texto, através da propriedade background do css.
Image replacement e SEO:
O código FIR:
O código de Radu Darvas:
Image replacement e SEO:
SEO(Search Engine Optimization) é um conjunto de técnicas de desenvolvimento de um site, focando a melhor visibilidade nos resultados dos grandes motores de busca para este. A indexação feita pelos se baseia em textos, uma tag de grande utilização para rankeamento dos motores busca como o famos Google é a tag <h1>, partindo dessa ideia chegamos a um bom motivo para utilizar o image replacement: boa visibilidade nos motores de busca, sem deixar aparência do site de lado, conforme mostramos abaixo a codificação do exemplo anterior:
HTML:
<h1>Exemplo</h1>
<h1>Exemplo</h1>
CSS:
h1 { width: 200px; height: 50px; background: url('') no-repeat; text-indent: -909em; overflow: hidden;
h1 { width: 200px; height: 50px; background: url('') no-repeat; text-indent: -909em; overflow: hidden;
Técnica de Gilder/Levin
Criada por Tom Gilder e Levin Alexander, esta técnica usa um SPAN vazio para conter a imagem e, usando posicionamento absoluto, sobrepõe o texto com a imagem.
Desvantagens:
Usa um SPAN vazio. Um elemento vazio é, de certa forma, algo que não deveria ser usado nunca, por que a imagem deve representar um texto realmente presente no conteúdo, conforme já mencionado, por questões de acessibilidade, levando em conta a interpretação de um leitor de tela.
Impossibilita o uso de imagens transparentes.
Vantagens:
Funciona perfeitamente para usuários com CSS habilitado e imagens desabilitadas.
Exemplo:
HTML:
<h1 id="titulo"><span></span>Ao vencedor, as batatas</h1>
CSS:
#titulo{
width:438px;
height:36px;
position:relative;
overflow:hidden;
}
#titulo span{
position:absolute;
width:100%;
height:100%;
background:#fff url() no-repeat;
}
O que a técnica faz é estabelecer as dimensões do “container”, no caso o H1, exatamente iguais às da imagem, posicioná-la com posicionamento relativo e definir overflow hidden, para que o texto não extrapole os limites, caso o usuário o redimensione pelo browser. Depois coloca o SPAN com posicionamento absoluto e com as mesmas dimensões do “container”, com a imagem de fundo. Note que o SPAN fica acima do H1, por causa do posicionamento absoluto. Não é necessário usar z-index.
Fahrner Image Replacement (FIR)
Todd Fahrner membro do W3C, colaborador da WaSP, desenvolvedor e autor consagrado no universo Web Standards é inventor da técnica de substituir texto por imagem. A técnica inventada por Fahrner recebeu seu nome e é conhecida pelo acrônimo FIR iniciais para Fahrner Image Replacement.
HTML:
<h1 id="topo">
<span>CSS para Web Design</span>
</h1>
CSS:
h1#topo {
width: 270px;
height: 40px;
background-image: url(cwd.gif);
}
h1#topo span {
display: none;
}
Radu Darvas <img> Replacement
A técnica de Radu Darvas propõe o uso do elemento IMG na marcação estrutural, para abrigar uma imagem GIF transparente de um pixel com o atributo "alt" definido com o texto da informação passada pela imagem.
O código de Radu Darvas:
HTML:
<h1 id="topo">
<img src="spacer.gif" alt="CSS para Web Design!" />
<span>CSS para Web Design</span>
</h1>
CSS:
h1#topo {
width: 270px;
height: 40px;
background-image: url(cwd.gif);
}
h1#topo span { display: none;}
h1#topo img {
width: 0px;
height: 0px;
}
Stuart Langridge Image Replacement
A técnica de Stuart não usa o elemento extra SPAN e esconde o texto declarando padding igual à altura da imagem e height igual à zero. Devido ao box model quebrado do IE são acrescidas algumas regras CSS extras para aquele navegador.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
padding: 40px 0 0 0; /* padding-top=altura imagem */
overflow: hidden;
background: url(cwd.gif) no-repeat;
height: 0 !important;
height /**/:40px; /* height=altura imagem - hack IE5's */
}
Malarkey Image Replacement (MIR)
Na técnica de Malarkey também não aparece elemento extra SPAN e o texto é escondido com uso de letter-spacing muito grande e negativo.
É necessário um 'hack' para o Ópera que interpreta erroneamente a declaração letter-spacing.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
letter-spacing : -1000em;
width:270px;
height: 40px;
background-image: url(cwd.gif);
}
/* Hack para Opera, esconde do MacIE */
/*\*/html>body #topo {
letter-spacing : normal;
text-indent : -999em;
overflow : hidden;
}/* Fim do hack */
Lindsay Image Replacement
Nesta técnica o texto é escondido declarando-se um tamanho de fonte muito pequeno, igual a 1px e fazendo a cor do texto igual a cor do fundo.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
background: url(cwd.gif) no-repeat;
width: 270px;
height: 40px;
font-size: 1px;
color: #xxx; /* cor do fundo */
Dave Shea Image Replacement
Dave Shea usando a técnica original com um elemento SPAN extra, proposta por Fahrner desenvolveu uma versão usando o atributo title para fornecer um toltip quando o ponteiro do mouse passa sobre a imagem e deixando o elemento SPAN vazio.
HTML:
<h1 id="topo" title="CSS para Web Design">
<span></span>
CSS para Web Design
</h1>
CSS:
h1#topo {
position: relative;
width: 270px;
height: 40px;
}
h1#topo span {
background: url(cwd.gif) no-repeat;
position:absolute;
width: 100%;
height: 100%;
}
Nenhum comentário:
Postar um comentário