memocarilog

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

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

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

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

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

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.