CSSでのテキストシャドウの使用方法

1. テキストに基本的なシャドウを追加する方法:

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

上記の例では、テキストに2ピクセルの水平オフセット、2ピクセルの垂直オフセット、4ピクセルのぼかし半径、そして不透明度0.5の黒い色のシャドウが追加されます。

2. 複数のシャドウを追加する方法:

.text-shadow-multiple {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
               -2px -2px 4px rgba(255, 255, 255, 0.5);
}

上記の例では、テキストに2つのシャドウが追加されます。最初のシャドウは黒い色で、2ピクセルの水平オフセット、2ピクセルの垂直オフセット、4ピクセルのぼかし半径、そして不透明度0.5を持ちます。2つ目のシャドウは白い色で、同様のパラメータを持ちます。

3. テキストに斜めのシャドウを追加する方法:

.text-shadow-skew {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  transform: skew(-10deg);
}

上記の例では、テキストに斜めのシャドウが追加されます。text-shadowプロパティによってシャドウが作成され、transformプロパティによってテキストが-10度傾けられます。

これらはいくつかの基本的なテキストシャドウの例ですが、CSSにはさまざまな他のオプションもあります。必要に応じてシャドウの色、オフセット、ぼかし半径、不透明度などを調整して、デザインに適した効果を作成することができます。