−Box Shadowエフェクト−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

ボックスに影をつけるbox-shadow

1）box全体に影を付ける
【 CSS 】
#box-shadow{
	box-shadow:0px 0px 10px #555555;
}

2）斜め右下に影を付ける（※これが基本）
#box-shadow{
	 box-shadow:5px 5px;
}

3）指定した方角にぼかしをかける
#box-shadow{
	 box-shadow:5px 5px 10px;
}

4）綺麗なぼかし。上品
#box-shadow{
	 box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3), 0 1px #FFFFFF inset, 0 -3px 2px rgba(0, 0, 0, 0.25) inset; 
}

5)ボックスの下部にだけ影を付ける
box-shadow: 0 3px 6px rgba(0,0,0,0.2);

6)写真のように枠をつける
.effect1{
	border: 10px solid #ffffff;
	box-shadow: 0 0 5px #cccccc;
	cursor: pointer;
}

-10px　で下に影をズラす

.balloon1-left{box-shadow:10px 10px 15px -10px #cccccc;}
.balloon1-right{box-shadow:-10px 10px 15px -10px #cccccc;}

エフェクト01

【 HTML 】
boxは必ず指定する！これを入れないと影がおかしくなる！
<div class="box form">
  <h3>Effect 8</h3>
</div>

【CSS 】
.form{
	width:600px!important;　※ここで横の大きさを指定
	height:220px!important;　※ここで縦の長さを指定
	margin:0 auto;
	text-align:left;
	border:solid 1px #CCCCCC;
	padding:10px 0px;
	margin-bottom:20px;
}
.form .labelname{padding-left:150px;}
.form .labelname input{
	width:60%;
	display:block;
}
.form .submit{
	margin-left:250px;
}


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

エフェクト02

【 HTML 】
<p><img class="shadow01" src="img/image01.jpg" width="470" height="300" alt="image" /></p>


【CSS 】
.shadow01{
    /*影を入れる*/
    -webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
    -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
     box-shadow: 0 10px 8px -6px #8d8c8c;
	 border:solid 1px #dcdcdc;
	 margin-left:3em;
}