CSSテキストシャドウの使い方

CSSテキストシャドウの使い方

CSSのtext-shadowプロパティを使用すると、テキストに影を追加できます。
この記事では、text-shadowプロパティについて解説します。

CSSテキストシャドウ

右下2pxの位置に影を追加する

CSS Text Shadow

p { text-shadow: 2px 2px; }

影に色を追加する

CSS Text Shadow

p { text-shadow: 2px 2px #0000FF; }

影にぼかし効果を追加する

CSS Text Shadow

p { text-shadow: 2px 2px 5px #0000FF; }

白色のテキスト×黒色のシャドウ

CSS Text Shadow

p {
color: #FFFFFF;
text-shadow: 2px 2px 4px #000000;
}

青色のグローシャドウ

CSS Text Shadow

p {
text-shadow: 0 0 3px #0000FF;
}

複数の影を追加する

テキストに複数の影を追加するには、カンマで区切ってください。

黄色と赤色のグローシャドウ

CSS Text Shadow

p {
text-shadow: 0 0 3px #FFFF00, 0 0 5px #0000FF;
}

白色のテキスト×黒色、青色、紺色のシャドウ

Css Text Shadow

p {
color: #FFFFFF;
text-shadow: 1px 1px 2px #000000, 0 0 25px #0000FF, 0 0 5px #000077;
}

text-shadowでボーダーを作成する

text-shadowプロパティを使用して、テキストの周囲にボーダーを作成することもできます。

Css Text Shadow

p {
color: yellow;
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

 

コメントを残す

メールアドレスが公開されることはありません。