【CSS Modules】text-shadowプロパティの使い方

text-shadowプロパティは、CSSにおいて、要素内のテキストに影を適用するために使用されるプロパティです。このプロパティは、ウェブページ上のテキストに視覚的な奥行きや立体感を与えたり、背景とのコントラストが低い場合にテキストの可読性を向上させたりする目的で利用されます。

text-shadowプロパティには、主に四つの値を指定できます。一つ目はoffset-xで、影の水平方向のオフセット、つまりテキストからの横方向の移動量を定義します。正の値は右方向に、負の値は左方向に影を移動させます。二つ目はoffset-yで、影の垂直方向のオフセット、つまりテキストからの縦方向の移動量を定義します。正の値は下方向に、負の値は上方向に影を移動させます。これらのoffset-xとoffset-yは必須の値です。三つ目はblur-radiusで、影のぼかし半径を指定します。この値が大きいほど影が広がり、より柔らかくぼやけた影が生成されます。この値はオプションであり、省略した場合はぼかしが適用されません。四つ目はcolorで、影の色を指定します。この値もオプションであり、省略された場合は、テキスト自体の色が影の色として適用されます。

これらの値は半角スペースで区切って記述し、例えば text-shadow: 2px 2px 4px #333; のように指定します。この記述では、テキストから右に2ピクセル、下に2ピクセル移動し、4ピクセルのぼかしがかかった濃い灰色の影が適用されます。さらに、複数の影をコンマ（,）で区切って指定することにより、複数の影を重ね合わせるなど、より複雑な視覚効果をテキストに適用することも可能です。例えば、text-shadow: 1px 1px 0px white, 2px 2px 0px black; のように記述できます。このプロパティは、ウェブコンテンツのデザインにおいてテキストを際立たせるための重要なツールです。

Copy
1text-shadow: 2px 2px 4px #cccccc;

引数なし

引数はありません

戻り値なし

戻り値はありません