

― 調 整 後 ―



こんにちは!ほたるです!
PhotoshopやIllustratorでは簡単にできるドロップシャドウや光彩の効果。
WEBページのテキストにもCSSでつけられるのでその方法を紹介します!
text-shadowで影をつける
基本の影のつけ方
text-shadowはこんな感じで、テキストに影をつける時に使うプロパティです。
ほたるノート
HTML
<span class="sample1">ほたるノート</span>
C S S
.sample1 {
color: #87ddd9;
font-size: 250%;
text-shadow: 2px 2px 3px #999999;
}
CSSの説明
color: #87ddd9;(文字色)
font-size: 250%;(文字の大きさ)
text-shadow: 2px(影の横方向位置)2px(影の縦方向位置)3px(ぼかしの大きさ)#999999;(影の色)

影の位置をマイナスにした場合
影をさっきと逆方向にしたい場合はマイナスを使います。
ほたるノート
HTML
<span class="sample2">ほたるノート</span>
C S S
.sample2 {
color: #87ddd9;
font-size: 250%;
text-shadow: -2px -2px 3px #999999;
}

text-shadowの応用
影を2方向につける
text-shadowは影を複数指定することができます。
ほたるノート
HTML
<span class="sample3">ほたるノート</span>
C S S
.sample3 {
color: #87ddd9;
font-size: 250%;
text-shadow: 2px 2px 3px #f4bad3,
-2px -2px 3px #ffee7f;
}


影を4方向につける
私が記事一覧のサムネイル(アイキャッチ)画像の日付につけた効果がこれです。
ほたるノート
HTML
<span class="sample4">ほたるノート</span>
C S S
.sample4 {
color: #fff;
font-size: 250%;
text-shadow: 2px 2px 10px #5bbab2 ,
-2px 2px 10px #5bbab2 ,
2px -2px 10px #5bbab2 ,
-2px -2px 10px #5bbab2;
}


この他にも色んなパターンで設定出来るので、写真の上や目立たせたい文字に設定してみてくださいね!
\この記事はどうでしたか?/