Image Replacement, Transformando um elemento de texto em imagem

Introdução

Image Replacement é uma técnica em que substituímos um elemento de texto por uma imagem. Normalmente usada no cabeçalho, substituindo o título pelo logotipo de uma página. Usando o h1 criamos acessibilidade e ainda nos beneficiamos de SEO.

A técnica apresentada é de Mike Rundle e nos referimos a ela como método Phark. Dentre várias formas de montar um image replacement, esta é uma das mais eficazes, pois ela necessita de poucos elementos html, o texto continua ecessível e o CSS é muito objetivo.

Neste exemplo demonstraremos como se estivéssemos montando o site do Laboratório Codex, e queremos trocar o título da página por uma imagem.

O primeiro passo é incluirmos nossa logotipo no banco de imagens de seu site. Cadastre-a pois usaremos sua URL mais tarde!

HTML

  
  <h1 class="Cuprum show fsN tsN fwR">
    Laboratório Codex
  </h1>
  

Depois da imagem cadastrada, deve-se identificar o código HTML do título da página, no SitePX este é o padrão de código encontrado no cabeçlalho da página (exceto pelo conteúdo dentro da tag h1, Laboratório Codex)

Nosso título ainda se encontra como na imagem abaixo: sem estilização e sem a imagem. Agora é hora de transofrmarmos isso em um logotipo de verdade!

CSS

		

  #ws .site-header h1 { 
    display: block; width: 200px; height: 178px; background: url(/img/279560/tubo-lab-codex-logo.png) no-repeat; text-indent: -9999px; 
  }

Declaramos o seletor #ws .site-header h1 que é suficientemente específico para trabalharmos em cima do título, no método Phark basta declarar estas propriedades para que ela funcione: display, width, height e background. Depois disso basta declarar os valores (o display deve sempre ser block).

Agora que temos a base de estilização pronta, podemos personalizar sua posição dentro do cabeçalho da página, incrementando nosso código ele ficaria da seguinte forma:

		

  #ws .site-header h1 { 
    position: absolute; top: -60px; left: 0; display: block; width: 200px; height: 178px; background: url(/img/279560/tubo-lab-codex-logo.png) no-repeat; text-indent: -9999px; 
  }

Note que position, top e left são as novas propriedades, e suprem a necessidade de posicionar com precisão nosso logotipo. Para seu site, basta mudar os valores de top e left usando o Inspetor de elementos até que fique de acordo com a medida que precisa, depois basta aplicá-los em seu CSS Avançado.

Categoria: Header

voltar para Codex

left show tsN fwR fsN|left tsN b01e fwR bsd show|left fwR tsN show|bnull||image-wrap|news login c05|fsN fwR normalcase tsN|c05|login news fwR normalcase|tsN fwR normalcase|normalcase fwR c05|content-inner||