グランジ風の日本語フォントを実現するCSS

2017年3月9日

とっつぁん

css WEBデザイン

この記事は 2 分くらいで読めると思います

あとで読む

グランジ風の日本語フォントをWEBサイトに実装したい

グランジ風の日本語フォントを実現するCSS

WEBサイトの見出しにグランジ風のかすれた文字の演出をしたい時に考えるのがWEBフォントです。

WEBフォントは便利なんですが、日本語のフォントはまだまだ数が少ないのが難点。

探しても見つからなくて結局見出しは画像で作るか…となってしまう事も良くありますが、画像で見出し作ると下層ページとかめんどくさすぎるんですよね。（昔はそれが普通だったんですが…）

という事で今回はCSSでそれっぽくやってしまう方法です。

デモ

みーたむ兎にも角にもまずはどのような結果になるのかを知りたいですね。

とっつぁんまぁそうなるよね…
って事で以下がデモページでござる。

DEMO

あーたむ何かWEBサイトっていうよりプリントみたいだね

とっつぁんそうそう、背景を紙っぽい画像とか使ったらまさに…

ソース（コピペでオッケー）

CSS

h1 {
	position:relative;
}

h1:after {
	content: '';
	position:absolute;
	display:block;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:url('grunge.png');
	z-index: 1 ;
}

h1 a:link {
	position : relative;
	z-index: 2 ;
}

※h1の疑似要素afterの背景にグランジ用の画像を指定した例です、

h1の部分や画像のパスは環境に合わせて変更してください。

※文字の上に画像が乗っている為、リンクをクリック出来ないので、

リンクがある場合はz-indexでafterより上に重なるように指定しています。

みーたむつまりリンクにはグランジのエフェクトはかからないんですね

とっつぁん見出し等で絶対にリンクを貼らないならこの指定はいらないね。

かぶせる画像

今回のデモに使った画像は白背景を想定して適当に作りました。

背景が白なら流用できると思います。

みーたむなるほど、この画像のかすれ具合が微妙、或いはとっつぁんが生理的に受け付けない場合は自分で画像作成すれば良いというわけですね。

とっつぁん（真顔かよ…）