*

PC LIFE

ホーム >  Web制作 >  HTM5/CSS3 > 
9.枠の外側に影 MENU 

9.css3 枠の外側に影を付ける Chap 5-5

学習書の「sample_a」(Chap5_1-5)を表示しソースコードを見て下さい。
1) Article Header枠に影を付ける
CSSの指定だけで枠に影を付けることができる、学習書の完成ページとは異なるが、影をわかりやすくするため、「森の中の工房について」の部分に以下のような枠に影を付けてみた。

枠の影のCSS記述 A図
    5行目は、一世代前のブラウザ対応
枠の影をぼかすCSS記述 B図
  10px 10px 5px → 横 縦 ぼかし の各Pixel数
2) 学習書 枠に影を付ける
学習書の完成頁は、以下のようになっており、横が0pxなので横の影は表示されない。
3) 影とぼかしのポジショニング
box-shadow: 10px 10px 5px #cccccc の場合