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 テキスト効果に移動しますこの章では、さまざまなテキスト効果について学習します。


演習で自分自身をテストする

エクササイズ:

すべての <p> 要素のテキストの色を「赤」に変更します。

<style>p {  : red;}</style>    <body>  <h1>This is a heading</h1>  <p>This is a paragraph</p>  <p>This is a paragraph</p></body></pre>

演習を開始する


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

財産

説明

テキストシャドウ テキストに追加される影の効果を指定します


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

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

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

スクールの詳細