デザイン

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

CSSで光彩効果をつける方法

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

サムネイル日付調整前

本当だ!調整してみよう!
ほたる
ほたる

 

― 調 整 後 ―

サムネイル日付調整後

ほたる
これでどうかな?
見やすくなったね!なんだか文字が光ってるみたい!どうやったの?
トリィ
トリィ
ほたる
ほたる
text-shadowを使うんだよ!

 

こんにちは!ほたる(@hotaru_tory)です!

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

ほたる
ほたる
ふんわりした雰囲気もでるから気に入っています!
サイトのデザインにもぴったりな効果だね!
トリィ
トリィ

 

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

 

 

\この記事はどうでしたか?/

-デザイン
-,

TOP

© 2020 ほたるノート