Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Após o meu primeiro post ensinando a técnica de image replacement, vou postar aqui uma outra técnica, um pouco mais avançada, que faz o uso de <span>, mas também não deixa de ser simples. O que devemos fazer é o seguinte:

Aqui o CSS:

h1 {
    height:200px;
    background:url("logotipo.jpg") no-repeat;
    }
h1 span { display:none; }

Aqui só é necessário colocar a altura da imagem e colocar normalmente o “no-repeat” para que não haja repetição alguma da imagem, por que nós não queremos isso. O que entra depois é o “span” com “display:none” para que ele desapareça com o nosso texto.

Aqui o HTML:

<h1><span>Pinceladas da Web</span></h1>

Para que haja uma melhor interação com o tutorial, dê uma olhada nesse exemplo, experimente desabilitar o CSS para ver o resultado.