memocarilog

CSS3の”text-shadow”を使用してフォントにヴィンテージ風なレトロなエフェクトをかける方法です。

下記の”LOREM IPSUM DOLOR SIT AMET,”の文字部分はCSSのみで表現しています。

このフォント部分のCSSコードは以下です。

font-family: Verdana,sans-serif;
color:#666;
font-size:50px;
font-weight:bold;
text-shadow: 4px 4px 0px #eee, 5px 5px 0px #707070;

シャドウをフォントからすこし離した位置に配置することで、ヴィンテージ風なレトロなエフェクトが表現されています。フォントサイズとシャドウの位置の対比が難しいですね。フォントサイズが大きくないとなかなかそれらしくみえません。

CSSだけでこういったエフェクトを表現できると、画像を作らなくてよいので楽ですね。