CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-shadowプロパティで黒い影付きの白いテキストを作成する方法

Webデザインにおいて、白いテキストに黒い影を付けることで、背景とのコントラストが生まれ、文字がより読みやすく、立体的な印象になります。この効果は、CSSの text-shadow プロパティを使うことで簡単に実現できます。

text-shadowプロパティとは

text-shadow プロパティは、テキストに影を追加するためのCSSプロパティです。基本的な構文は以下のとおりです。

text-shadow: 水平方向のオフセット 垂直方向のオフセット ぼかし半径 影の色;

各値の意味は次のとおりです。

  • 水平方向のオフセット: 影を右（正の値）または左（負の値）にずらす距離
  • 垂直方向のオフセット: 影を下（正の値）または上（負の値）にずらす距離
  • ぼかし半径: 影のぼかし具合。値が大きいほど柔らかい影になります
  • 影の色: 影の色を指定します（例： #000000 は黒）

実装例：黒い影のある白いテキスト

以下のコードでは、見出し（h1要素）に対して白い文字色と黒い影を設定しています。text-shadow: 3px 3px 3px #000000; により、右下方向に3pxずつずらした、3pxのぼかしを持つ黒い影が適用されます。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 3px 3px 3px #000000;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>上の見出しにはテキストシャドウ効果が適用されています。</p>
</body>
</html>

表示結果のポイント

このコードを実行すると、白い「Heading One」というテキストの右下に、ぼかしのかかった黒い影が表示されます。背景が暗い場合でも、影によってテキストの輪郭が際立ち、視認性が向上します。

なお、影のオフセットやぼかしの値を調整することで、さまざまな演出が可能です。例えば、オフセットを0にしてぼかしを大きくすると、グロー（発光）のような効果も作れます。ぜひ値を変えながら、自分好みのスタイルを試してみてください。

  1. CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

    CSSのclip-pathプロパティを活用することで、吹き出しのようなコメントボックスを作成できます。画像ファイルに頼らずCSSだけで完結するため、軽量でメンテナンス性が高く、デザインの調整も容易です。 clip-pathプロパティの基本構文 clip-pathは、要素の表示範囲を切り抜く（クリップする）ためのプロパティです。基本的な構文は以下のとおりです。 Selector {    clip-path: /*値*/; } polygon()関数を使うと、複数の座標点を指定して三角形などの多角形を描画できます。この仕組みを利用して、コメントボックスの下に付ける「しっ

  2. CSSのfilterプロパティで画像を白黒（グレースケール）に変換する方法

    CSSのfilterプロパティにグレースケール値を指定することで、カラー画像を簡単に白黒画像へと変換できます。filterプロパティは、ぼかし（blur）やドロップシャドウ（drop-shadow）など、さまざまな特殊効果を画像に適用できる便利な機能です。基本の構文CSSのfilterプロパティの構文は以下の通りです。Selector {    filter: grayscale(100%);    -webkit-filter: grayscale(100%); }grayscale(100%)で完全な白黒になり、パーセンテージを下げることで部分的に彩