[CSS]テキストにグランジ風のエフェクトをつけるスタイルシート

janko at warp speedのエントリーから、h1やp内のテキストデータに、グランジ風のエフェクトをつけるスタイルシートを紹介します。

Add grunge effect to text using simple CSS
デモ

仕組みは、以前当サイトでも紹介した「テキストにグラデーション効果をつけるスタイルシート」と同じもので、背景画像を変更したものとなっています。

空spanを使用するため好みは分かれると思いますが、画像で作成することに比べて、テキストデータだと修正・更新が容易という利点もあります。

デモは、下記のようになっています。

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

Post on:2008年8月12日