文字に半透明の影を付ける

書式

text-shadow: X方向のオフセット Y方向のオフセット ぼかし具合 rgba(赤の輝度, 緑の輝度, 青の輝度);
text-shadow: rgba(赤の輝度, 緑の輝度, 青の輝度) X方向のオフセット Y方向のオフセット ぼかし具合;

説明

文字に半透明の影を付けるにはtext-shadowで色指定を行う際にrgba()を使います。rgba()では色の不透明度を指定することができます。そこで、4番目のパラメータに不透明度を指定すれば半透明の影を表示することができます。値は0.0が完全な透明、1.0が完全な不透明になります。
なお、古いブラウザで反映されない場合にはベンダープレフィックスを付けてみてください。

サンプル サンプルを実行 サンプルをダウンロード

h1 {
text-shadow : 10px 8px 2px rgba(255,0,0, 0.2);
}
目次に戻る