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

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

テキストにグランジ風のエフェクトをつけるスタイルシートのデモのキャプチャ

Add grunge effect to text using simple CSS
デモ

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

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

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

HTML

CSS

sponsors

top of page

©2018 coliss