テキストにグランジの効果をつけるCSSテクニック

まず、grungeのphotoshopブラシなどでグランジの画像をpng形式で作成します。
以下からグランジのphotoshopブラシをダウンロードできます。

• Grunge Set 1 : 14 Hi-Res Brushes
• Free Grunge Brushes

次にCSSですが、デモページでは、<h1>をつかっているので以下のようにCSSを組みます。

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');
} 

以上のようにして、このように出来上がります。