CSS 阴影効果
- 前のページ CSS 径向渐変
- 次のページ CSS box-shadow
Shadows
CSSで影効果を作成！
上にマウスを合わせてください！
CSS 阴影効果
CSSを使用して、テキストや要素に影を追加できます。
このトレーニングでは、以下の属性を学びます：
text-shadowbox-shadow
CSS 文字影
CSS text-shadow 属性はテキストに影を追加します。
最も簡単な使い方は、水平の影（2px）と垂直の影（2px）を指定することです：
テキストのシャドウ効果！
例
h1 {
text-shadow: 2px 2px;
}
次に、影に色を追加します：
テキストのシャドウ効果！
例
h1 {
text-shadow: 2px 2px red;
}
次に、影にぼかし効果を追加します：
テキストのシャドウ効果！
例
h1 {
text-shadow: 2px 2px 5px red;
}
以下の例では、黒い影を持つ白いテキストを示しています：
テキストのシャドウ効果！
例
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
以下の例では、赤のネオン光の影を示しています：
テキストのシャドウ効果！
例
h1 {
text-shadow: 0 0 3px #FF0000;
}
複数の影
テキストに複数の影を追加するには、カンマで区切られた影リストを追加してください。
以下の例では、赤と青のネオン光の影を示しています：
テキストのシャドウ効果！
例
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
以下の例では、黒色、青色、濃い青色のシャドウを持つ白色のテキストを示しています：
テキストのシャドウ効果！
例
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
text-shadow 属性を使用してテキストの周りに純ボーダー（シャドウなし）を作成することもできます：
テキストを囲むボーダー！
例
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
- 前のページ CSS 径向渐変
- 次のページ CSS box-shadow
