テキストに影を追加するには

このガイドでは、ページ上の任意のテキストに影を追加する方法を紹介します。

テキストに影を追加

ボックスに影を追加するガイドでは、ページ上の任意の要素に影を追加する方法を紹介しています。しかし、そのテクニックは、要素の周囲のボックスにのみ影を追加するものです。ボックス内のテキストにドロップシャドウを追加するには、異なる CSS プロパティ text-shadow が必要です。

text-shadow プロパティはいくつかの値を取ります。

下記の例では、X 軸のオフセットを 2px、Y 軸のオフセットを 4px、ぼかし半径を 4px、色を半透明の青に設定しています。さまざまな値を使って、影がどう変わるか試してみてください。

メモ: テキストシャドウを使用すると、簡単にテキストを読みづらくなる場合があります。低コントラストのテキストを読むことが困難な閲覧者のために、選択した色が読みやすく、十分な色コントラスト (en-US)になっていることを確認しておいてください。