\ えぬすぴブログ

 #612  <<PC>>

CSS “text-shadow”

ネットで色々見ていたとき、スタイルシートの中に“text-shadow”というおもしろそうなのがあるのが分かりました。

{ text-shadow: 影の色 左右の距離 上下の距離 ぼかす範囲 ; }

こんな感じに、“<span style="text-shadow: #666 2px 2px 2px;">テキストに影を付ける</span>”ことができます。

text-shadow”はCSS第二・第三水準(CSS2,CSS3)のプロパティで、最近の Opera, Google Chrome, Safari などで対応しています。 IE 8 や Firefox 3.0 などでは対応していませんので変化はないです。

  • 使用前 … えぬすぴブログ
  • 使用後 … えぬすぴブログ

上の例では { text-shadow: #F00 2px 2px 2px; } として、わざと目立つように影を赤くしました。 実際に使うときは、文字と似た色や灰色系にすると自然な印象になりそうです。

ボクも、ホームページのタイトルや見出しで使ってみました。 見やすくしたい所に使うと便利そうです。

距離は -1px のようにマイナスの値にもできて、影を複数にすることもできます。 上手く組み合わせて使うと縁取りの文字も作れて、楽しそうです♪ 

▼ 同じカテゴリーの記事

コメント

コメントの投稿

※ 「名前」と「本文」以外は省略できます。

  • ※ 必須
  • ※ 必須
  •  → 確認ページ (メールアドレスの記入があっても公開されません)
10 ← 2019年11月 → 12
-----12
3456789
10111213141516
17181920212223
24252627282930



 Google サイト内検索

▼タグ(抜粋)