ヴィンテージ風のレトロなフォントのエフェクトをCSS3で表現する方法

ヴィンテージ風のレトロなフォントのエフェクトをCSS3で表現する方法

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

レトロビンテージ

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

LOREM IPSUM DOLOR SIT AMET,

このフォント部分の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だけでこういったエフェクトを表現できると、画像を作らなくてよいので楽ですね。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能