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

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

テキストに影を追加

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

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

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

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