元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

CSS入門(text-shadowプロパティの使い方)

text-shadowプロパティの基本的な使い方について書きます。text-shadowプロパティは、テキスト(文字列)に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。

記述の仕方

/* 記述例 */
セレクタ名{ text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色; }

text-shadowプロパティの基本情報

text-shadowプロパティが取る値について説明します。

  • 水平方向の距離
    • 水平方向の影の距離(px、emなど)
    • 正の値だと右に、負の値だと左に影を付ける
  • 垂直方向の距離
    • 垂直方向の影の距離(px、emなど)
    • 正の値だと下に、負の値だと上に影を付ける
  • 影のぼかし半径
    • 影をぼかす距離
  • 影の色

サンプルコード

<p class="txtshadow1">text-shadowで文字に影を付ける</p>
<p class="txtshadow2">text-shadowで文字に影を付ける</p>
.txtshadow1{
  font-size:24px;
  font-weight:bold;
  padding:10px;
  text-shadow:8px 8px 0px magenta;
}

.txtshadow2{
  font-size:24px;
  font-weight:bold;
  padding:10px;
  /* 影を複数付けることができる */
  text-shadow:8px 8px 2px magenta,
              -8px -8px 2px blue;
}

表示例

text-shadowで文字に影を付ける

text-shadowで文字に影を付ける

1つ目は、ぼかしの半径を0にして、くっきりとした影にしています。2つ目は、影を2つ付けたのと、ぼかしの半径を2pxにして影をぼかしています。

表示の比較

左のボタンは、テキストに影を付けていません。右のボタンは、テキストに影を付けています。些細な違いかもしれませんが、右のボタンの文字の方が読みやすくなったと思います。

まとめ

text-shadowプロパティの基本的な使い方について書きました。文字に影を付けると少し印象が変わると思います。ボタンの文字に影を付けて読みやすくしたいときに使用すると良いです。使用頻度は高くないかもしれませんが、知っていて損はないと思います。

» HTML入門のまとめはこちらです。