2018/10/03
レスポンシブが主流になってくると、写真にはできるだけ余計な加工をせずにおしゃれに魅せたいもの。
特にWordPressなどで画像をアップロードするのに、いちいち加工なんかしてられない。
そんな場合に影などを自動でつけるCSS。
#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;}
CSSにあらかじめこのように記載しておくと、IDがmainの中のimgタグには自動で影がついてくる。
カラーコードはrgba表示にしておくとスマホ対応にもなるので便利です。
この他に
#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;}
とやっておくと写真に3ピクセルの白い枠がついて影ができます。

↑ブログランキングに参加しています♪よかったらクリックしてくださいね