Agosto 27, 2008 at 2:51 pm · Categorias: Dicas XHTML/ CSS, Tutoriais
O Janko deu essa dica lá no blog dele (em inglês), o efeito do tutorial é no estilo grunge mas a técnica pode ser utilizada de diversas outras maneiras, a imaginação e o lixo do IE é o limite!
Basicamente é assim que funciona:
1- Abra o Photoshop (ou seja lá qual for o software), pegue um brush grunge ou faça o seu próprio, com a cor do fundo da sua página; dê uma pintada e salve o arquivo em .png com fundo transparente. Mais ou menos assim:

2- Agora pra colocar em um <h1> por exemplo você deve se utilizar da manha de colocar um elemento com posição absoluta dentro de um com posicionamento relativo; dê uma olhada no código
HTML
<h1>This is one very long title with grunge effect<span></span></h1>
CSS
h1 {
position:relative; color:#aeef33; font-family: Georgia;
}
h1 span{
position:absolute; display:block;
top:0; left:0;
height:100%; width:100%;
background:url(’grunge.png’);
}
3- E o resultado será esse:

Gostou? Lembrando que foi feito apenas com CSS! Você pode ver um exemplo online criado pelo autor do tutorial; eu só traduzi e resumi o tutorial dele que pode ser encontrado aqui: Add grunge effect to text using simple CSS.
Compartilhe!
- Gostou do post? Envie para seu amigo