ホームページ作成備忘録

ホームページを作成に関する備忘録

css3でいろいろな影を付けてみる

cssファイル(共通部分）

01.hako {
02    width: 80%;
03    height:150px;
04    margin: 30px auto;  
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%);
11    }
12     
13.hako p{
14    text-align:center;
15    font-size: large;
16    position: relative;
17    top: 50px;
18    }

cssファイル（効果１）

1.kouka1{
2-webkit-box-shadow: 0 10px 6px -6px #555;
3-moz-box-shadow: 0 10px 6px -6px #555;
4box-shadow: 0 10px 6px -6px #555;
5}

htmlファイル（効果１）

1<div class="hako kouka1">
2<p>下だけに影を付けました</p>
3<p>どうですか？</p>
4</div>

csファイル（効果２）

01.kouka2
02{
03  position: relative;
04}
05.kouka2:before, .kouka2:after
06{
07  z-index: -1;
08  position: absolute;
09  content: "";
10  bottom: 15px;
11  left: 10px;
12  width: 50%;
13  top: 80%;
14  max-width:300px;
15  background: #777;
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);
24}
25.kouka2:after
26{
27  -webkit-transform: rotate(3deg);
28  -moz-transform: rotate(3deg);
29  -o-transform: rotate(3deg);
30  -ms-transform: rotate(3deg);
31  transform: rotate(3deg);
32  right: 10px;
33  left: auto;
34}   

htmlファイル（効果２）

1<div class="hako kouka2">
2<p>よくあるやつです</p>
3</div>

cssファイル（効果３）

01.kouka3
02{
03    position:relative;
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;
07}
08.kouka3:before, .kouka3:after
09{
10    content:"";
11    position:absolute;
12    z-index:-1;
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);
16    top:0;
17    bottom:0;
18    left:10px;
19    right:10px;
20    -moz-border-radius:100px / 10px;
21    border-radius:100px / 10px;
22}
23.kouka3:after
24{
25    right:10px;
26    left:auto;
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);
32}

htmlファイル（効果３）

1<div class="hako kouka3">
2<p>こんなものもあります。</p>
3</div>

box-shadowを使った効果

　box-shadowを使った効果にはいろいろなものがあります。ネットで検索するといろいろおもしろいものが出てきます。

　box-shadowの書式は　box-shadow: (a)px (b)px (c)px (d)px #(eee);
　　(a)右方向へずらす距離
　　(b)下方向へずらす距離
　　(c)ぼかす範囲
　　(d)拡張させる範囲
　　#(eee)影の色　です。

　右方向にずらす距離に負の値を持ってくると、左方向にずらす距離になります。
　また、下方向へずらす距離に負の値を持ってくると、上方向にずらす距離になります。
　拡張させる距離を負にすると、縮小させる距離になります。

ぼかす範囲と拡張させる距離は省略可能です。

また、insetを指定すると、影はボックスの内側に表示されます。

効果１

下だけに影を付けました

どうですか？

効果２

　よくあるやつです。これは、div要素のhakoの下にkouka2というものを置き、そのkouka2にbefore、after疑似要素を用いて新しい要素を作ります。これには、またbox-shadowで影を付けて、その影がhakoの下に現れるようにするのですが、ちょっとだけ現れるように、transformのrotateを使って回転させます。また、このままでは、hakoの上にkouka2の要素が現れてしまいますので、順序を下にするために、z-index:-1を加えて１つ下にします。

　と、これでいいかと思ったのですが、なぜかkouka2の要素が出てこない。おかしいと思って、hakoの要素にz-index:5くらいを指定してみたら、今度はkouka2の要素が上に現れて下に行かない。いろいろと原因を探していたら、こちらで、原因が究明されていました。このページは、hako要素は、実は更に上にdiv要素があり、それにz-indexが書かれていないと、「祖先にz-indexが指定された要素を持たない要素は、上の要素が生成したZ軸を用いて上下関係を決めます。また、この軸上での上の要素のz-indexの初期値は0であるため、z-indexに負の値を指定した要素は上の要素の下に回ってしまい、見えなくなってしまう」ということです。

よくあるやつです

効果３

こんなものもあります。