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

サイト構築 -CSS

Post on:2008年8月12日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

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

Add grunge effect to text using simple CSS
デモ

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

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

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

HTML

<textarea name="code" class="html" cols="60" rows="5">
<h1>This is one very long title with grunge effect<span></span></h1>
</textarea>

<h1>This is one very long title with grunge effect<span></span></h1>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
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');
}
</textarea>