ホームページを作成に関する備忘録
css3でいろいろな影を付けてみる
cssファイル(共通部分)
05 | background: -webkit-gradient(linear,left top,left bottom, color-stop(0.82,#f2f19b),color-stop(0.47,#d5def6),color-stop(0.16,#ddd)); |
06 | background: -webkit-linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%); |
07 | background: -moz-linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%); |
08 | background: -o-linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%); |
09 | background: -ms-linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%); |
10 | background: linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%); |
cssファイル(効果1)
2 | -webkit-box-shadow: 0 10px 6px -6px #555; |
3 | -moz-box-shadow: 0 10px 6px -6px #555; |
4 | box-shadow: 0 10px 6px -6px #555; |
htmlファイル(効果1)
1 | < div class = "hako kouka1" > |
csファイル(効果2)
05 | .kouka2:before, .kouka2:after |
16 | -webkit-box-shadow: 0 15px 10px #777; |
17 | -moz-box-shadow: 0 15px 10px #777; |
18 | box-shadow: 0 15px 10px #777; |
19 | -webkit-transform: rotate(-3deg); |
20 | -moz-transform: rotate(-3deg); |
21 | -o-transform: rotate(-3deg); |
22 | -ms-transform: rotate(-3deg); |
23 | transform: rotate(-3deg); |
27 | -webkit-transform: rotate(3deg); |
28 | -moz-transform: rotate(3deg); |
29 | -o-transform: rotate(3deg); |
30 | -ms-transform: rotate(3deg); |
31 | transform: rotate(3deg); |
htmlファイル(効果2)
1 | < div class = "hako kouka2" > |
cssファイル(効果3)
04 | -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; |
05 | -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; |
06 | box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; |
08 | .kouka3:before, .kouka3:after |
13 | -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); |
14 | -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); |
15 | box-shadow:0 0 20px rgba(0,0,0,0.8); |
20 | -moz-border-radius:100px / 10px; |
21 | border-radius:100px / 10px; |
27 | -webkit-transform:skew(8deg) rotate(3deg); |
28 | -moz-transform:skew(8deg) rotate(3deg); |
29 | -ms-transform:skew(8deg) rotate(3deg); |
30 | -o-transform:skew(8deg) rotate(3deg); |
31 | transform:skew(8deg) rotate(3deg); |
htmlファイル(効果3)
1 | < div class = "hako kouka3" > |
box-shadowを使った効果
box-shadowを使った効果にはいろいろなものがあります。ネットで検索するといろいろおもしろいものが出てきます。
box-shadowの書式は box-shadow: (a)px (b)px (c)px (d)px #(eee);
(a)右方向へずらす距離
(b)下方向へずらす距離
(c)ぼかす範囲
(d)拡張させる範囲
#(eee)影の色 です。
右方向にずらす距離に負の値を持ってくると、左方向にずらす距離になります。
また、下方向へずらす距離に負の値を持ってくると、上方向にずらす距離になります。
拡張させる距離を負にすると、縮小させる距離になります。
ぼかす範囲と拡張させる距離は省略可能です。
また、insetを指定すると、影はボックスの内側に表示されます。
効果1
効果2
よくあるやつです。これは、div要素のhakoの下にkouka2というものを置き、そのkouka2にbefore、after疑似要素を用いて新しい要素を作ります。これには、またbox-shadowで影を付けて、その影がhakoの下に現れるようにするのですが、ちょっとだけ現れるように、transformのrotateを使って回転させます。また、このままでは、hakoの上にkouka2の要素が現れてしまいますので、順序を下にするために、z-index:-1を加えて1つ下にします。
と、これでいいかと思ったのですが、なぜかkouka2の要素が出てこない。おかしいと思って、hakoの要素にz-index:5くらいを指定してみたら、今度はkouka2の要素が上に現れて下に行かない。いろいろと原因を探していたら、こちらで、原因が究明されていました。このページは、hako要素は、実は更に上にdiv要素があり、それにz-indexが書かれていないと、「祖先にz-indexが指定された要素を持たない要素は、上の要素が生成したZ軸を用いて上下関係を決めます。また、この軸上での上の要素のz-indexの初期値は0であるため、z-indexに負の値を指定した要素は上の要素の下に回ってしまい、見えなくなってしまう」ということです。
効果3