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

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

cssファイル(共通部分）

.hako {
	width: 80%;
	height:150px;
	margin: 30px auto;	
	background: -webkit-gradient(linear,left top,left bottom, color-stop(0.82,#f2f19b),color-stop(0.47,#d5def6),color-stop(0.16,#ddd));
	background: -webkit-linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%);
	background: -moz-linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%);
	background: -o-linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%);
	background: -ms-linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%);
	background: linear-gradient(top,#ddd 16%, #d5def6 47%, #f2f19b 82%);
	}
	
.hako p{
	text-align:center;
	font-size: large;
	position: relative;
	top: 50px;
	}

cssファイル（効果１）

	
	.kouka1{
	-webkit-box-shadow: 0 10px 6px -6px #555;
	-moz-box-shadow: 0 10px 6px -6px #555;
	box-shadow: 0 10px 6px -6px #555;
    }

htmlファイル（効果１）



下だけに影を付けました


どうですか？

csファイル（効果２）

.kouka2
{
  position: relative;
}
.kouka2:before, .kouka2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.kouka2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

htmlファイル（効果２）



よくあるやつです

cssファイル（効果３）

.kouka3
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.kouka3:before, .kouka3:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.kouka3:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

htmlファイル（効果３）



こんなものもあります。

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に負の値を指定した要素は上の要素の下に回ってしまい、見えなくなってしまう」ということです。

よくあるやつです

効果３

こんなものもあります。