ボックスシャドウ
CSS3を使用すると、シャドウエフェクトを作成することができます！
私の上にマウスを移動！
CSS3シャドウ効果
CSS3を使用すると、テキストや要素に影を追加することができます。
この章では、次のプロパティについて説明します：
-
text-shadow -
box-shadow
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
続いて数字-webkit-または-moz-接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3のテキストシャドウ
CSS3 text-shadowプロパティは、テキストに影を適用します。
最も単純な使用では、あなただけの水平影（2ピクセル）と垂直影（2ピクセル）を指定します。
テキストシャドウ効果！
次に、影に色を追加します。
テキストシャドウ効果！
そして、影のぼかし効果を追加します。
テキストシャドウ効果！
次の例では、黒い影と白のテキストを示しています。
テキストシャドウ効果！
次の例では、赤いネオングロー影を示しています。
テキストシャドウ効果！
複数の影
テキストに複数の影を追加するには、影のコンマ区切りのリストを追加することができます。
次の例では、赤と青のネオングロー影を示しています。
テキストシャドウ効果！
次の例では、黒、青、およびDARKBLUE影と白のテキストを示しています。
テキストシャドウ効果！
例
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
»それを自分で試してみてください CSS3 box-shadowプロパティ
CSS3 box-shadowプロパティは、要素に影を適用します。
最も単純な使用では、あなただけの水平影と垂直方向の影を指定します。
これは黄色である<div>黒を持つ要素box-shadow
次に、影に色を追加します。
これは黄色である<div>グレーを持つ要素box-shadow
次に、シャドウにぼかし効果を追加します。
これは黄色である<div>ぼやけ、グレーの持つ要素box-shadow
また、面白い効果を作成するために、擬似クラスの後に::前に::に影を追加してすることができます。
例
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} »それを自分で試してみてください カード
使用例box-shadow紙状のカードを作成するには、プロパティを：
1
2016年1月1日
ハルダンゲル、ノルウェー
例
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
それを試してみてください（テキストカード）» （画像カード）をお試しください» 練習で自分自身をテスト！
CSS3シャドウプロパティ
次の表は、CSS3の影のプロパティを示しています：
| プロパティ | 説明 |
|---|---|
| box-shadow | 要素に1または複数の影を追加します。 |
| text-shadow | テキストに1または複数の影を追加します。 |