ベストをチェック 25+ 美しい CSS テキスト シャドウ あなたのウェブサイトのために
CSS テキスト シャドウは、Web ページのテキストに視覚効果を追加する方法であり、深さの錯覚を作成し、テキストを背景から際立たせます。テキストの影は、CSS プロパティ text-shadow を使用して作成されます。これにより、影の色、オフセット、ぼかし、広がりを指定できます。
text-shadow プロパティの構文は次のとおりです。
text-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
水平オフセット: 影がテキストからオフセットされる水平距離。
垂直オフセット: 影がテキストからオフセットされる垂直距離。
ぼかし半径: 影に適用されるぼかしの量。値が高いほど、影がより拡散し、シャープさが失われます。
広がり半径: 影がテキストから広がる量。正の値は影を拡大し、負の値は影を縮小します。
color: 影の色。
たとえば、次の CSS コードは、水平方向のオフセットが 2px、垂直方向のオフセットが 2px、ぼかし半径が 3px、拡散なしの黒いテキスト シャドウを作成します。
text-shadow: 2px 2px 3px black;
カンマで区切って同じテキストに複数の影を追加することもできます。例えば：
text-shadow: 2px 2px 3px black, -2px -2px 3px white;
このコードは、互いに対角線上に配置された 2 つの影 (1 つは黒、もう 1 つは白) を作成します。その結果、3D 効果があるように見えるテキストの影ができます。
テキストの影は、テキストに視覚的な興味を持たせ、読みやすくするための便利なツールです。 text-shadow プロパティのさまざまな値を試して、Web サイトに最適な効果を見つけてください。