Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[CSS 3] Create a Letterpress Effect with CSS Text-Shadow – CSS3のtext-shadowを使ってプレス文字を再現する

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS 3から使えるようになる新しいプロパティ、text-shadowを使って表現するプレス文字。text-shadowってまぁようするにテキストに対してドロップシャドウの効果を与えるプロパティなんですが、これの数値を工夫する事でプレス文字っぽく見せるというものです。作例では“text-shadow: 0px 2px 3px #555;”と指定されていて、この数値は左から順にシャドウのX軸の距離、Y軸の距離、ボカシ範囲、色を表しています。X軸の距離を0にするのがポイントみたい。Safariではかなり以前から先行実装されていたプロパティなので、CSS 3の新しい機能としては見る機会の多い表現ですね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください