CSSだけでレタープレスを表現する

CSSだけでレタープレスを表現する

CSS3のtext-shadowプロパティを使用して、簡単にレタープレスを表現する方法です。

参考:LETTERPRESS EFFECT USING CSS

LETTERPRESS EFFECT USING CSS

フォントの色は背景色よりも暗い色でなければならない シャドウの色はフォントの色よりも明るい必要があります。

ホバー時には↑の逆でフォントの色よりシャドウの色が暗くなっていて、浮き出るような感じの効果をだしています。

レタープレス効果を付けてみる

レタープレス効果を付けたい要素に下記のスタイルを指定します。

h1 {
  font-size:60px;
  font-family: Arial, Helvetica, sans-serif;
  color: #666;
  text-shadow: 0px 2px 1px #eee;
}
/*---- ホバー時の指定 ----*/
h1:hover {
  color: #eee;
  text-shadow: 0px 2px 1px #666;
}

短く簡単なコードで表現できるので使いやすいですね。これで以下のようにレタープレスを表現できます。

See the Pen Letterpress by Saomocari (@Saomocari) on CodePen.

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 マルチサイト機能