10.css3 枠(ボックス)の内側に影を付ける Chap 5-6
学習書の「sample_a」(Chap5_1-6)を表示しソースコードを見て下さい。
1) Article Section 枠に影を付ける
article sectionの枠には、既に内側にグラデーションが入っている。その中に影を入れて浮き出たようなデザインになっている。
CSS記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
article section {clear: both; border: solid 1px #aaaaaa; margin: 20px 0 10px; padding: 18px; border-radius: 5px; overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfdfdf)); background: -webkit-linear-gradient(#ffffff 0%, #dfdfdf 100%); background: -moz-linear-gradient(#ffffff 0%, #dfdfdf 100%); background: -o-linear-gradient(#ffffff 0%, #dfdfdf 100%); background: -ms-linear-gradient(#ffffff 0%, #dfdfdf 100%); -webkit-box-shadow: 0px 2px 3px #cccccc, 0px 0px 4px 3px #ffffff inset; box-shadow: 0px 2px 3px #cccccc, 0px 0px 4px 3px #ffffff inset;} |
8~13行目は、枠内のグラデーション。
16行目は前章で付けた外側の影、17行目に「,」で区切り「inset」を入れて内側の影を表示。
14,15行目は、一世代前のWebkit系ブラウザへの対応。
16行目は前章で付けた外側の影、17行目に「,」で区切り「inset」を入れて内側の影を表示。
14,15行目は、一世代前のWebkit系ブラウザへの対応。