9.css3 枠の外側に影を付ける Chap 5-5
学習書の「sample_a」(Chap5_1-5)を表示しソースコードを見て下さい。
1) Article Header枠に影を付ける
CSSの指定だけで枠に影を付けることができる、学習書の完成ページとは異なるが、影をわかりやすくするため、「森の中の工房について」の部分に以下のような枠に影を付けてみた。
枠の影のCSS記述 A図
1 2 3 4 5 6 |
article header {border: solid 1px #aaaaaa; margin: 20px 0 10px; padding: 18px; border-radius: 5px; -webkit-box-shadow: 0px 2px 3px #cccccc; box-shadow: 10px 10px #cccccc} |
5行目は、一世代前のブラウザ対応
枠の影をぼかすCSS記述 B図
1 2 |
article header {... box-shadow: 10px 10px 5px #cccccc} |
10px 10px 5px → 横 縦 ぼかし の各Pixel数
2) 学習書 枠に影を付ける
学習書の完成頁は、以下のようになっており、横が0pxなので横の影は表示されない。
1 2 |
article header {... box-shadow: 0px 2px 3px #cccccc} |
3) 影とぼかしのポジショニング
box-shadow: 10px 10px 5px #cccccc の場合