ワードプレスをおしゃれにカスタムをしたい人必見!CSSで文字に影をつけてみよう

css1

CSStext-shadowというタグを使用すれば、文字に影をつけることができ、手軽にオシャレな装飾ができます。

 

使うタグは?

 text-shadowというタグを使っていきましょう。

text-shadow: 横方向 縦方向 ぼかし 影の色;

 

色のサンプル

あまり影自体が濃いと不自然になるので、影の色は薄いグレーが無難です。

オススメはDCDCDCかD3D3D3あたりですね。

2015-08-23 5.47.46      

 

使用例

  • 自然な影の例
 
使用タグ 【text-shadow: 2px 2px 1px #DCDCDC;】
2015-08-23 5.48.26
 
  • 少し派手な影の例
 
使用タグ 【text-shadow: 2px 2px 2px #808080;】
 
2015-08-23 5.53.40
 
 
 
というわけで、是非ご自身でもいろいろ試してみてくださいね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です