CSSでテキストに光彩効果をつける方法

トリィ

ほたちゃんほたちゃん！記事一覧のサムネイル画像の右下にある日付が見えづらいよ〜？

本当だ！調整してみよう！

ほたる

―　調　整　後　―

ほたる

これでどうかな？

見やすくなったね！なんだか文字が光ってるみたい！どうやったの？

トリィ

ほたる

text-shadowを使うんだよ！

こんにちは！ほたるです！

PhotoshopやIllustratorでは簡単にできるドロップシャドウや光彩の効果。

WEBページのテキストにもCSSでつけられるのでその方法を紹介します！

text-shadowで影をつける

基本の影のつけ方

text-shadowはこんな感じで、テキストに影をつける時に使うプロパティです。

ほたるノート

HTML

ほたるノート

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

ほたるノート

C S S

.sample2 {
color: #87ddd9;
font-size: 250%;
text-shadow: -2px -2px 3px #999999;
}

トリィ

反対側についたね！

text-shadowの応用

影を2方向につける

text-shadowは影を複数指定することができます。

ほたるノート

HTML

ほたるノート

C S S

.sample3 {
color: #87ddd9;
font-size: 250%;
text-shadow: 2px 2px 3px #f4bad3,
-2px -2px 3px #ffee7f;
}

ほたる

『,』カンマで区切ることで複数影を設定することができます！

黄色とピンク色の影がついた！

トリィ

影を4方向につける

私が記事一覧のサムネイル（アイキャッチ）画像の日付につけた効果がこれです。

ほたるノート

HTML

ほたるノート

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;
}

ほたる

ふんわりした雰囲気もでるから気に入っています！

サイトのデザインにもぴったりな効果だね！

トリィ

この他にも色んなパターンで設定出来るので、写真の上や目立たせたい文字に設定してみてくださいね！

＼この記事はどうでしたか？／