Home Me envie um e-mail! Feed
Blog do yogodoshi

Tutorial: Como colocar um efeito grunge em um texto apenas com CSS

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:

grunge

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:

grunge text

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.

feed Gostou do Blog?  Assine o RSS Feed ou receba em seu e-mail

Posts Relacionados:
Typeface.js - Use fontes customizadas nos seus sites com ajuda do Javascript
Vídeo-aula: Desenhe um durex no Photoshop
Efeito onda de ki (tipo Jean Grey) no Photoshop
Aprenda a criar uma tooltip customizada e com fade in e fade out
Vejam o poder do CSS

Warllington diz,

Agosto 27, 2008 @ 3:53 pm

Muito bom
Eu estava procurando por algo assim.

Parabens!

Canha diz,

Agosto 27, 2008 @ 5:10 pm

Huh. Como que eu nunca pensei nisso antes? 0_0
Parece tão óbvio.
Vou até testar agora. Fiquei curioso ^^

Abraços

manthonioz diz,

Dezembro 15, 2009 @ 1:18 pm

Eu descobri um e-mail fantástico na internet e gostaria de compartilhar com todos internautas no mundo.Um grande abraço a todos e um ótimo final de ano.

Assinar feed RSS de comentários neste post · TrackBack URI

Deixe seu comentário

Fechar
Envie por e-mail