表現力が豊かになってきたCSS、SEOを考慮してもなるべくHTML＋CSSで出来る表現はしていきたいところですよね。今回はテキストにドロップシャドウの効果を付与できる「text-shadow」について書いてみます。
text-shadowのドロップシャドウが薄い
文字の視認性を高めるため、写真に文字を被せたりする時とかに役立つドロップシャドウ効果ですが、text-shadowで表現する時に、「色が薄い」というお悩み、ありませんか。例えば以下のように周囲5pxに黒いドロップシャドウを付与する例で記述してみます。
text-shadow: 0 0 5px #000;
表示は以下のようになります。読めなくはないですが、薄ーいですよね。
周囲にぼかし5pxでドロップシャドウを付与
値を複数指定することで重ねる＝濃くする
力技のような印象ですが、この薄いtext-shadow、値をカンマ区切りで複数指定することで、ドロップシャドウが重なる＝濃くなる、という効果を得られます。以下のように記述してみましょう。
text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;
するとこのような表示になります。白文字でもくっきりと読めるようになりました。
周囲にぼかし5pxでドロップシャドウを付与
以上、薄いtext-shadowの色を濃くしたい時の指定方法でした。
