CSS3を使って文字に影を付けて装飾する

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

文字に影を付けるには

文字に影を付ける事で読みやすくしたり、見出しのような文字を目立たせたりできるので、付けたいと思う場面はありませんか?
特に背景に写真を配置して、その上の文字を載せると文字が読みにくくなってしまいます。
文字に影を付けたり、縁取りをすると読みやすくできるのでオススメです。

影や縁取りをする場合、文字を画像にして、img要素で配置して・・・とデザインを作るはずです。
でも文字を入れ替えたい、文字のサイズを大きくしたい・小さくしたい、色を変えたい・・・
背景にを配置していた写真を差し替えたので、影の色が合わなくなった・・・などなど、ホームページを運用していると変更が必要になる事も多くあると思います。
その都度画像編集ソフトを使って作り直してもいいですが、時間がかかってしまうので少し面倒です。

CSSを書き直すだけで色を変えたり、影を付けたりできたら便利そうだな・・・とは思いませんか?
影や縁取りのデザインはCSSでできるんです!

影を付けるには「text-shadow」

文字に影を付けるには、text-shadowを使います。
書き方は「text-shadow: (右への距離) (下への距離) (ぼかし具合) (影の色);」です。
右・下への距離は負の値([-]マイナス)も付けることができるので、左・上方向へ伸ばすこともできますよ。

実際に影を付けてみる

※サンプルではわかりやすいように影と文字色を濃くしています。

影を実際に付けてみましょう

CSS
p.text-shadow{
  text-shadow:3px 3px 2px #777;
}

一行で書けるので簡単です。
画像にしているわけではないので、文字のサイズ・色変更に手間がかかる事も、検索にかからないという事もありません!

右上に影を付けるには
p.text-shadow{
  text-shadow:3px -3px 2px #777;
}

左上に影を付けるには
p.text-shadow{
  text-shadow:-3px -3px 2px #777;
}

左下に影を付けるには
p.text-shadow{
  text-shadow:-3px 3px 2px #777;
}

文字の縁取りをしてみよう!

先ほどの「text-shadow」は複数設定する事ができます。
その機能を使って縁取りの様な効果をかける事ができるんです!!

実際に縁取りしてみよう

複数の「text-shadow」を使うには、カンマ(,)で区切ってつなげます。

文字を縁取り

CSS
p.text-shadow{
  text-shadow:
    1px 1px 3px #777,
    -1px 1px 3px #777,
    1px -1px 3px #777,
    -1px -1px 3px #777;
}

影を付ける値は「カンマ(,)」を使えば複数の設定をすることができます。
効果を重ねて、より濃い縁取りをしたり、2色、3色の縁取りをしたりと・・・できる事は様々です。
ぜひデザインに合わせて、いろいろと試してみてください。

まとめ

・画像を背景に設定した場合、文字の影や縁取りをすることで読みやすくなる
・「text-shadow」を使って文字に影を付ける事ができる
・画像文字を使わないので、文字の入替えや色変更が簡単にでき、検索エンジンに読み取ってもらえる文章を作成できる
・「カンマ(,)」を使って、複数の設定を持たせることができる
・四隅に設定すれば、縁取りのような効果を付けることができる

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