CSS text-shadow 文字に影をつけるサンプル

CSSのtext-shadowプロパティで、文字に影をつけるサンプルです。

目次

仕様 text-shadowプロパティの仕様
サンプル text-shadowのサンプル

text-shadowプロパティの仕様

text-shadow :  値1 値2 値3 値4

text-shadowプロパティは、文字に影をつけます。

引数は、4つあります。

説明
値1 (offset-x) 数値+単位の分、影が右にずれます。
マイナス値を指定した場合は左にずれます。
値2 (offset-x) 数値+単位の分、影が下にずれます。
マイナス値を指定した場合は上にずれます。
値3
(blur-radius)
数値+単位の分、影をぼかす範囲になります。省略可能です。
値が0の場合、輪郭がはっきりし、値が大きくなるにつれぼかしが強くなります。
値4 (color) 色を指定します。色の指定は先頭(値1の前)でも可能です。省略可能です。
省略した場合の色はブラウザに依存します。

text-shadowのサンプル

text-shadowのサンプルです。文字に影をつけます。

test1
test2
offset-x
test3
offset-y
test4
blur-radius
test5
color

 

上記サンプルのコードです。

<style>
  .test1 {
    /* 影を右に3pxずらす */
    text-shadow: 3px 3px 5px #000;
  }
  .test2 {
    /* 影を右に15pxずらす */
    text-shadow: 15px 3px 5px #000;
  }
  .test3 {
    /* 影を下に15pxずらす */
    text-shadow: 3px 15px 5px #000;
  }
  .test4 {
    /* 影を15pxの範囲でぼかす */
    text-shadow: 3px 3px 15px #000;
  }
  .test5 {
    /* 影の色を指定 */
    text-shadow: 3px 3px 5px #87ceeb;
  }
  .c1 div {font-weight: bold;width: 300px;border: 1px solid #000;
  margin-bottom: 20px;height: 50px;text-align: center;}
</style>
<body>
  <div class="c1">
    <div class="test1">test1</div>
    <div class="test2">test2<br />offset-x</div>
    <div class="test3">test3<br />offset-y</div>
    <div class="test4">test4<br />blur-radius</div>
    <div class="test5">test5<br />color</div>
  </div>
</body>

関連の記事

CSS border-radius 四角の角を丸くするサンプル
CSS box-shadow ボックスに影をつけるサンプル
CSS opacity 透明度を指定するサンプル
CSS linear-gradient 線のグラデーションのサンプル
CSS radial-gradient 円のグラデーションのサンプル

△上に戻る