• CSS

CSSだけで画像に影をつけたい|box-shadowを使う方法

レスポンシブが主流になってくると、写真にはできるだけ余計な加工をせずにおしゃれに魅せたいもの。
特にWordPressなどで画像をアップロードするのに、いちいち加工なんかしてられない。
そんな場合に影などを自動でつけるCSS。

[html]#main img{
box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
-webkit-box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
-moz-box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;}[/html]

CSSにあらかじめこのように記載しておくと、IDがmainの中のimgタグには自動で影がついてくる。
カラーコードはrgba表示にしておくとスマホ対応にもなるので便利です。

この他に
[html]#main img{
border:3px solid #fff;
box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
-webkit-box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
-moz-box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;}[/html]
とやっておくと写真に3ピクセルの白い枠がついて影ができます。

関連記事

  1. コピペでカンタン|シンプルでスタイリッシュな見出しを作るサンプル集

  2. CSSレイアウトサンプル-1カラム

  3. CSSレイアウトサンプル-2カラム

  4. CSS nite in Osaka

  5. ちゃんとCSSするためのスタイルガイド入門

  6. CSS3メモ~背景画像のサイズを固定する