Títulos personalizados e amigos do Google

Muitos designer tentam estilizar os títulos com recursos que não são amigos do Google. Um dos recursos usados, frequentemente, é o SIRF, que usa uma substituição de imagens através do JavaScript.
Sabemos que o Google não indexa JavaScript, e por este motivo, quem usa este recurso corre o risco de ser punido pelo Buscador.
Irei explicar no exemplo de hoje, como criar títulos com estilo bonito e que são reconhecidos pelo Google. Apenas iremos usar XHTML, CSS e 2 imagens.

Primeiro vamos criar o código XHTML passo a passo:

<div class="passo1">

<h1>Título Estilizado</h1>

</div>


Aqui temos os elemento de classe "passo1 e o elemento h1.
Está é a unica marcação necessária para nosso exemplo.

Vamos escrever a CSS para fazermos o efeito desejado:

h1 {
font: bold 120px/120px Arial, sans-serif;
color: #ccc;
}

.passo1 h1 {
border-bottom: 30px solid red;
line-height: 81px;
letter-spacing: -10px;
background: url(images/missing-splat.png) 0 0 no-repeat;
}

O elemento h1 está configurado para ter uma fonte em negrito com tamanho bastante grande e cor cinza.

A classe passo1 h1 colocamos uma borda abaixo solida de 30px em vermelho.

line-height está com 81px para que a bordar abaixo fique sob a letras e por trás delas. A fonte do texto é 120px menos 81px fica 29px. Isso dá o efeito da borda sob as letras.

letter-spacing: -10px reduz o espaçamento entre as letras para que o efeito fique como desejado.

Colocamos a imagem splash atrás das letras e não há repetição pois a imagem é grande o suficiente para expansão, caso haja.

Até agora usamos uma imagem apenas e já temos um efeito interessante, mas vamos a segunda imagem.

.passo1 {
background: url(images/missing-halftone.png);
}

passo1 está atrás de passo1 h1. Por isso colocamos uma imagem neste nível para dar um efeito todo especial. A imagem se repete horizontalmente preenchendo todo o Título.

Resultado final:


Espero que tenham gostado do tuto e caso usarem em seus projetos comente aqui!

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email