CSSで文字に影をつける
本日の教材動画はこちら
今回はCSSで文字に影をつけてみましょう。なんか前に似たようなこと勉強したよなーって思ってみてみたら、「影をつける方法について」記事ですでに自分で調べて勉強してたようなんですが、改めて教材としてでてきたので再度見ていきましょう。
text-shadow で文字に影をつける
使い方は至ってシンプルで text-shadow{横方向にずらす数値 縦方向にずらす数値 ぼかし数値 色指定;}です。実際に使ってみたほうが早いので早速見ていきましょう。
上記のようなシンプルなページを用意しました。この文字にCSSで影をつけていってみましょう。
グレー色を影を、少しぼかしてつけてみました。数値にはマイナス数値も使え、色は透明度をいじれるrgbaも利用可能です。また、影を複数つけることもできます。
全て実践したのがこちらになります。
しかしCSSで文字に影を微調節するより、影つけた画像用意したほうが簡単では?って思ってたんですが、動画で「文字に直接影をつけることで検索で有利に」みたいなこと言ってたのでなるほどなー!となりました。多用するとうるさいページになりそうですが、ポップな雰囲気のデザインにはとても合いそうな技術ですね。
【復習記事】
【参考サイト】