TECH I.S.

CSS テキストシャドウ


テキストシャドウ

text-shadowプロパティは、テキストに影を追加します。

最も単純な使用法では、水平の影(2px)と垂直の影(2px)のみを指定します。

文字の影効果!

h1{   text-shadow: 2px 2px; }
自分で試してみる »

次に、影に色(赤)を追加します。

文字の影効果!

h1{   text-shadow: 2px 2px red; }
自分で試してみる »

次に、影にぼかし効果(5px)を追加します。

文字の影効果!

h1{   text-shadow: 2px 2px 5px red; }
自分で試してみる »

その他のテキストシャドウの例

例 1

白いテキストに影を付ける:

h1 {   color: white;   text-shadow: 2px 2px 4px #000000; }
自分で試してみる »

例 2

赤いネオンが光るテキストシャドウ:

h1 {   text-shadow: 0 0 3px #ff0000; }
自分で試してみる »

例 3

赤と青のネオンが光るテキストシャドウ:

h1 {   text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff; }
自分で試してみる »

例 4

h1 {   color: white;   text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; }
自分で試してみる »

ヒント: フォント、テキスト サイズ、およびテキストのスタイルを変更する方法については、CSS フォントの章をご覧ください。

ヒント: さまざまなテキスト効果については、CSS テキスト効果の章をご覧ください。


CSS テキストシャドウプロパティ

プロパティ

説明

text-shadow テキストに追加される影の効果を指定します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細