• CSS3
  • >
  • ボックスにシャドウをかける【box-shadow】

ボックスにシャドウをかける【box-shadow】

test-shadowに続き、CSS3のはじめの段階で実装しやすいbox-shadow。 ボックスの外にも中にもかけられるのが楽しいです。

基本編

次に3パターンのボックスシャドウを作ってみました。
3番目の値(ぼかしの半径)が0の場合はクッキリと表示され、4番目の値(シャドウの拡大量)が大きいとシャドウもビッグに…

.shadow01{
	box-shadow:5px 5px 0px 0px #222;
}
.shadow02{
	box-shadow:5px 5px 5px 0px #222;
}
.shadow03{
	box-shadow:5px 5px 0px 5px #222;
}

バリエーション編

insetプロパティを使用することにより内側にもシャドウをつけ、へベルやエンボス風の効果をつけることもできます。

.shadow04{
	box-shadow:inset 0px 0px 10px 2px #fff,5px 5px 5px 0px #222;
	border-radius:10px;
}
.shadow05{
	box-shadow:inset 5px 5px 5px 0px #222;
	border-radius:10px;
}

高級感編

複数指定、微妙なさじ加減でボタンのような感じに仕上げることもできます。

.shadow06{
	box-shadow:0px 10px 0px 0px #48070b,
	0px 0px 25px 0px #680a10 inset,
	0px 20px 15px -2px #680a10;
}
BUTTON

PR

One thought on “ボックスにシャドウをかける【box-shadow】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

このエントリーをはてなブックマークに追加
Lv.
ページの先頭へ戻る
閉じる
プレビューエリア
ココにコード内容が反映されます。
ココにテキスト