テンプレート・素材カテゴリ


CSS3で文字に影・装飾をつける「text-shadow」

TOPページ > デザイン講座 > 文字に影・装飾をつける「text-shadow」

text-shadowプロパティでは、テキストに陰影や装飾をつけることができます。今までは画像で作っていた影も、CSSを使えば簡単に表現することができますよ。


CSS:text-shadow: 横方向 縦方向 ぼかしの距離 影の色;
TEXT-SHADOW
.text-01 {
  text-shadow:3px 5px 5px #333;
  font-size: 50px;
  color: #000;
  font-weight: bold;
}
<div class="text-01>TEXT-SHADOW</div>

TEXT-SHADOW

カンマ「,」で区切って、複数指定することもできます。

.text-02 {
  text-shadow: 0 -1px 1px #fff,
    	       -1px 0 1px #fff,
    	       1px 0 1px #fff,
    	       0 1px 1px #fff,
    	       1px 1px 1px #000,
    	       2px 2px 2px #000,
    	       3px 3px 3px #000;
  font-size: 50px;
  color: #000;
  font-weight: bold;
}
<div class="text-02>TEXT-SHADOW</div>

TEXT-SHADOW

縁取り文字を作ることもできます。

.text-03 {
  text-shadow: 2px 2px 1px #000,
               -2px 2px 1px #000,
               2px -2px 1px #000,
               -2px -2px 1px #000;
  font-size: 50px;
  color: #fff;
  font-weight: bold;
}
<div class="text-03>TEXT-SHADOW</div>

TEXT-SHADOW

型押し文字みたいなのも表現できます。

.text-04 {
  color: rgba(0,0,0,0.6);
  text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
  font-size: 50px;
  font-weight: bold;
  background: #222;
}
<div class="text-04>TEXT-SHADOW</div>

CSS:rgba(255,255,255,0.1); で(赤,緑,青,)というようにRGB指定もできます。最後の「0.1」は変化の強さです。


TEXT-SHADOW

文字が浮いているように見えます。

.text-05 {
  text-shadow: 0px 3px 0px #b2a98f,
               0px 14px 10px rgba(0,0,0,0.15),
               0px 24px 2px rgba(0,0,0,0.1),
               0px 34px 30px rgba(0,0,0,0.1);
  font-size: 50px;
  color: #fff;
  font-weight: bold;
  background: #acc768;
}
<div class="text-05>TEXT-SHADOW</div>

TEXT-SHADOW

文字がネオンのように?光ってます。

.text-06 {
  text-shadow: 0px 0px 1px #ffffff,
               0px 0px 10px #ffd700,
               0px 0px 20px #ffd700,
               0px 0px 30px #ffd700,
               0px 0px 40px #ffd700;
  font-size: 50px;
  color:#fff;
  font-weight: bold;
  background: #000;
}
<div class="text-06>TEXT-SHADOW</div>

TEXT-SHADOW

文字が立体的に見えます。

.text-07 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
  font-size: 50px;
  color:#fff;
  font-weight: bold;
  background: #b3ccff;
}
<div class="text-07>TEXT-SHADOW</div>

TEXT-SHADOW

文字が燃えているように見えます。

.text-08 {
  text-shadow: 0px -1px 5px #fff,
               0px -5px 10px #ff0,
               0px -10px 25px #f80,
               0px -20px 50px #f00;
  font-size: 50px;
  color:#fff;
  font-weight: bold;
  background: #fff;
}
<div class="text-08>TEXT-SHADOW</div>

参照:[CSS]コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス。


Recommended


スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。

応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅。

現場のワークフローに沿ったサイト制作までを詳しく解説。プロが教える「実習」+「講義」の全30レッスン。

これからのWeb制作に必要な知識を総合的に解説。HTML5 2014年勧告候補に対応!

はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。



ページトップへ