HAL9000さんのエントリー「YouTube動画に枠をつけてみる」に感動したので、当ブログでもさっそく使わせてもらいました。
使用したHTML
<iframe width="" height="" src="" frameborder="0" allowfullscreen></iframe>
使用したCSS
.subContents iframe {
display: block;
margin: 0 auto;
z-index: 2;
background-color: transparent; /*背景色・透明*/
padding: 10px; /*枠線の太さ*/
-webkit-box-shadow: 1px 1px 0 #C0C0C0; /*シャドウの設定*/
-moz-box-shadow: 1px 1px 0 #C0C0C0; /*シャドウの設定*/
box-shadow: 1px 1px 2px #ECECEC; /*シャドウの設定*/
border:1px solid #E0E0E0; /*ボーダーの太さ・種類・色*/
}
目的はあくまでも動画の紹介ですから、CSSの設定項目は目立ちすぎないよう、色や太さを抑え目にしましょう。映画と同じく控えめな演出がポイントです！
HALさんのエントリーのように「radius」の値を設定して角丸を表現することも可能ですが、当ブログではあまりそぐわなかったので、あえてカットしました。各々のブログデザインに合わせて微調整することも大切ですね。
CSS3のボックスシャドウについて詳しくお知りになりたい方はコチラの参考サイトを。
解説図入りで詳しく紹介されているので、大変わかりやすいと思います。