このページの本文へ

text-shadowで作る「見出し」デザインのアイデア (3/4)

2011年02月01日 11時00分更新

文●菊池 崇

  • この記事をはてなブックマークに追加
本文印刷

レタープレス風のtext-shadowをつくってみよう

 次は、少し控えめなtext-shadowの使い方だ。アップルのWebサイトやiPhone/iPadのユーザーインターフェイスをよく見てみるとレタープレス(活版印刷、ここでは浅い彫り込みの意味)風のエフェクトが使われている。このレタープレス風のエフェクトをtext-shadowを使って再現してみよう。シンプルなエフェクトだが、これだけでもWebサイトがぐっとリッチな雰囲気になる。

スクリーンショット

米アップルのウェブページのナビゲーションはレタープレス風のエフェクトを使っている(http://www.apple.com/)

■HTML[サンプル3]


<p>テキストシャドウをうまくつかえばいろんなことができる</p>


■CSS[サンプル3]


p {
color:#505050;
text-shadow: 1px 1px 0px #fff; 
text-align : center; }


サンプル3の実行画面。浅い彫り込みのような効果を実現できた

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く