33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

CSSで文字に影をつける

本日の教材動画はこちら 

今回はCSSで文字に影をつけてみましょう。なんか前に似たようなこと勉強したよなーって思ってみてみたら、「影をつける方法について」記事ですでに自分で調べて勉強してたようなんですが、改めて教材としてでてきたので再度見ていきましょう。

text-shadow で文字に影をつける

 使い方は至ってシンプルで text-shadow{横方向にずらす数値 縦方向にずらす数値 ぼかし数値 色指定;}です。実際に使ってみたほうが早いので早速見ていきましょう。

 

f:id:qqqnek0:20210217160320j:plain

ソース内容と表示

上記のようなシンプルなページを用意しました。この文字にCSSで影をつけていってみましょう。

 

CSSで影をつける

CSSで影をつける

グレー色を影を、少しぼかしてつけてみました。数値にはマイナス数値も使え、色は透明度をいじれるrgbaも利用可能です。また、影を複数つけることもできます。

 

CSSで影をつける

CSSで影をつける

全て実践したのがこちらになります。

 

しかしCSSで文字に影を微調節するより、影つけた画像用意したほうが簡単では?って思ってたんですが、動画で「文字に直接影をつけることで検索で有利に」みたいなこと言ってたのでなるほどなー!となりました。多用するとうるさいページになりそうですが、ポップな雰囲気のデザインにはとても合いそうな技術ですね。

  

【復習記事】

影をつける方法について

【参考サイト】

text-shadow …… テキストに影をつける