このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

text-shadow”プロパティ:テキストの影CSS3で追加

記事Mar. 7th,2021
テキストの影を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 text-shadow: none;
適用対象 テキスト
継承 Yes
パーセント値 パーセント値は指定できません
計算値 none”、もしくは3個の絶対長と算出された色をアイテムとするリスト
アニメーション 計算値による(“none”はアイテムがないリストとして扱い、リスト・アイテムが不足する場合は空白の影(“transparent 0 0 0 0”)を付け加えます)

text-shadow”プロパティは要素内のテキストが落とす影を指定するプロパティです。

影は要素のボーダー背景の上、テキストとその装飾の下に描画されます。また、隣接する要素のテキストが重なる場合は影はそのテキストよりも下に描画されます。

box-shadow”プロパティとは異なり、テキストが半透明の場合はテキストの下にも影が描画されます。

サンプルコード

p { text-shadow: rgb(204,153,204) 5px 5px 3px;}

説明
<shadow>”値
<length> pxemなどで影の位置や幅、ぼかしを指定 (詳細は次の項を参照。)
<color> rgb()”関数16進数カラーコードカラーネームなどで影の色を指定 (省略した場合currentColorとなります。)
他の値
none 影を表示しない
共通キーワード

値の指定方法

<shadow>”値

<shadow>”値は<color>”値と複数の<length>”値の組み合わせです。それぞれの値はホワイトスペースで区切って記述します。

<length>”値は2個、3個もしくは4個指定できます。<length>”値は少なくとも2個指定しなければなりません。<length>”値を2個か3個の場合には省略された値は“0”として扱われます。

<length>”値に加えて、<color>”値を指定できます。この値は任意で、<length>”値の間でなければ記述する順番も自由です。

2個の“<length>”値

<length>”値が2個の場合、1個目の値は影の垂直方向のオフセット距離、2個目の値は影の水平方向のオフセット距離を指定します。正の値と負の値のどちらでも指定できます。水平方向の距離は正の値の場合は右方向、負の値の場合は左方向へ影が移動します。垂直方向の距離は正の値の場合は下方向、負の値の場合は上方向へ影が移動します。

text-shadow: 〚垂直方向のオフセット〛 〚水平方向のオフセット〛;

3個の“<length>”値

<length>”値が3個の場合、1個目と2個目の値は2個の場合と同様で、3個目の値は影のぼかしを指定します。“0”以上の値のみ指定でき、指定された距離は影の色が完全に透明になるまでの距離を表します。“0”とした場合はぼかしがなく、影の縁ははっきりします。

text-shadow: 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛;

4個の“<length>”値

<length>”値が4個の場合、1個目から3個目の値は3個の場合と同様で、4個目の値は影の幅を指定します。正と負の値が両方指定でき、指定された距離の分だけ影がすべての方向に縮小、もしくは拡張されます。“0”とした場合は影の大きさはテキストの大きさと同じなります。

box-shadow: 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛 〚幅〛;

<color>”値

<color>”値は影の色を指定します。<color>”値を省略した場合はその要素のcolor”プロパティの値を使用するcurrentColorとみなされます。

text-shadow: 〚色〛 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛 〚幅〛;

none

none”キーワードは影を描画しないことを表します。他の値との併用はできません。

text-shadow: none;

複数の影の指定

値のセットをコンマ(“,”)で区切って並べて記述することで一つの要素に複数の影を設定することができます。最初に記述した影が最前面、最後に記述した影が最背面になるように、重ねて描画されます。

text-shadow:
〚一番手前の影の色〛 〚一番手前の影の垂直方向のオフセット〛 〚一番手前の影の水平方向のオフセット〛 〚一番手前の影のぼかし〛 〚幅〛,
〚手前から二番目の影の色〛 〚手前から二番目の影の垂直方向のオフセット〛 〚手前から二番目の影の水平方向のオフセット〛 〚手前から二番目の影のぼかし〛 〚幅〛,
〚手前から三番目の影の色〛 〚手前から三番目の影の垂直方向のオフセット〛 〚手前から三番目の影の水平方向のオフセット〛 〚手前から三番目の影のぼかし〛 〚幅〛,
...,
〚一番奥の影の色〛 〚一番奥の影の垂直方向のオフセット〛 〚一番奥の影の水平方向のオフセット〛 〚一番奥の影のぼかし〛 〚幅〛;

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
text-shadow
定義なし

定義なし

定義あり

定義あり

使用例

テキストの影を指定する

p { text-shadow: rgb(204,153,204) 5px 5px 3px;}

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

p { text-shadow: rgb(204,153,204) 5px 5px 3px 3px;}

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

複数の影を指定する

p { text-shadow: rgb(204,153,204) 5px 5px 3px,rgb(142,135,143) -5px -5px 2px,rgb(90,188,166) 0px 0px 3px;}

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク