Ir para conteúdo / Skip to content

Image Replacement - Episódio 2

Postado em: 6 de junho de 2006 por Pedro Rogério

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.

Se tiver um tempo, leiam também:

Deixe seu comentário

2 comentários para esse post

  1. Federico disse:
    #1

    You should be careful. Some screen readers will not read the display:none text.

  2. Pedro Rogério disse:
    #2

    Thanks for the tip Federico!!!

Deixe seu comentário