枠に影をつける
枠に影をつける
- 「box-shadow」プロパティ
article header { border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px; border-radius: 10px; box-shadow: 10px 10px #ccc; }
影をぼかす
- ぼかしの大きさ「5px」
article header { border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px; border-radius: 10px; box-shadow: 10px 10px 5px #ccc; }
影の表示位置を調節する
article header { border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px; border-radius: 10px; box-shadow: 0 2px 5px #ccc; }
記事のパーツにも影の設定する
article section { clear: both; border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px 18px 10px 18px; border-radius: 10px; overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dfdfdf)); background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%); background: -moz-linear-gradient(#fff 0%, #dfdfdf 100%); background: -o-linear-gradient(#fff 0%, #dfdfdf 100%); background: -ms-linear-gradient(#fff 0%, #dfdfdf 100%); box-shadow: 0 2px 5px #ccc; }
一世代前のWebKit系ブラウザに対応させる
article header { border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px; border-radius: 10px; -webkit-box-shadow: 0 2px 3px #ccc; box-shadow: 0 2px 5px #ccc; }
article section { clear: both; border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px 18px 10px 18px; border-radius: 10px; overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dfdfdf)); background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%); background: -moz-linear-gradient(#fff 0%, #dfdfdf 100%); background: -o-linear-gradient(#fff 0%, #dfdfdf 100%); background: -ms-linear-gradient(#fff 0%, #dfdfdf 100%); -webkit-box-shadow: 0 2px 3px #ccc; box-shadow: 0 2px 5px #ccc; }
枠の内側に影をつける
枠を立体的なデザインにする
- 2つ目の影を追加する
- 枠の内側に影をつける
- 枠内のすべての辺に影をつける
article section { clear: both; border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px 18px 10px 18px; border-radius: 10px; overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dfdfdf)); background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%); background: -moz-linear-gradient(#fff 0%, #dfdfdf 100%); background: -o-linear-gradient(#fff 0%, #dfdfdf 100%); background: -ms-linear-gradient(#fff 0%, #dfdfdf 100%); -webkit-box-shadow: 0 2px 3px #ccc, 0 0 4px #f80 inset; box-shadow: 0 2px 5px #ccc, 0 0 4px #f80 inset; }
影を大きく・白色にする
article section { clear: both; border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px 18px 10px 18px; border-radius: 10px; overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dfdfdf)); background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%); background: -moz-linear-gradient(#fff 0%, #dfdfdf 100%); background: -o-linear-gradient(#fff 0%, #dfdfdf 100%); background: -ms-linear-gradient(#fff 0%, #dfdfdf 100%); -webkit-box-shadow: 0 2px 3px #ccc, 0 0 4px 3px #fff inset; box-shadow: 0 2px 5px #ccc, 0 0 4px 3px #fff inset; }
コンテンツ全体の背景色を指定する
#container { width: 900px; margin: 0 auto; background-color: #fff; padding: 0 40px; }