Box Shadow
With CSS3 you can create shadow effects!
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 text-shadow
プロパティは、テキストに影を付けます。
最も簡単な使用例として、水平の影(2px)と垂直の影(2px)だけを指定します:
次に、影に色を追加します:
その次に、影にぼかし効果を追加します:
following example shows a white text with black shadow:
次の例は、黒い影付きの白いテキストを表示します:
テキストに複数の影を追加するには、影のカンマ区切りのリストを追加することができます。
次の例は、赤と青のネオングローの影を表示しています:
次の例は、黒、青、濃青色の影付きの白いテキストを表示しています:
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Try it Yourself ❯
CSS3 box-shadow
プロパティは、要素に影を付けます。
最も簡単な使用例として、水平の影と垂直の影だけを指定します:
次に、影に色を加えます:
その次に、影にぼかし効果を追加します:
また、面白い効果を作るために、::before と ::after 擬似クラスにも影を追加することができます:
#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;
}
Try it Yourself ❯
紙のようなカードを作成するための box-shadow
プロパティの使用例:
January 1, 2016
Hardanger, Norway
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;
}
Try it (Text Card) ❯
Try it (Image Card) ❯
Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯ Exercise 5 ❯
次の表は、CSS3 shadow プロパティのリストです:
プロパティ | 説明 |
---|---|
box-shadow | 要素に 1 つ以上の影を追加する |
text-shadow | テキストに 1 つ以上の影を追加する |