最近ブログで画像を写真風にして影をつけてあるものを良く見かける・・・・自分もやってみたい！！早速探してみると、「小粋空間」さんに詳しく書いてありました。
こんな感じのやつです →
実際にやってみると自分の環境では、ちょっとだけ問題あり（ブラウザによっての表示の違い＆その他）・・・そこで、少しだけ改造したのでそのメモを残しておくことに・・・
←こんな感じのやつです
使用方法
こちらの「朝飯前。」さんから影用の背景画像をダウンロードその後、自分の画像フォルダに転送
スタイルシートに下記を追記
span.shadow_l {
margin: 10px 7px -2px 15px;
background: url(背景画像のアドレス) right bottom;
float: left;
}
span.shadow_l img {
margin: 0;
padding: 0;
position: relative;
left: -5px;
top: -5px;
padding: 8px;
background: #fff;
border: 1px solid;
border-color: #C0C0C0 #737373 #737373 #C0C0C0;
}
こちらが、画像が左で文字が右用 ↑margin: 10px 7px -2px 15px;
background: url(背景画像のアドレス) right bottom;
float: left;
}
span.shadow_l img {
margin: 0;
padding: 0;
position: relative;
left: -5px;
top: -5px;
padding: 8px;
background: #fff;
border: 1px solid;
border-color: #C0C0C0 #737373 #737373 #C0C0C0;
}
こちらが、画像が右で文字が左用 ↓
span.shadow_r {
margin: 10px 5px -2px 15px;
background: url(背景画像のアドレス) right bottom;
float: right;
}
span.shadow_r img {
margin: 0;
padding: 0;
position: relative;
left: -5px;
top: -5px;
padding: 8px;
background: #fff;
border: 1px solid;
border-color: #C0C0C0 #737373 #737373 #C0C0C0;
}
黄色文字のところに、先ほど転送した背景画像のアドレス or パスを記述margin: 10px 5px -2px 15px;
background: url(背景画像のアドレス) right bottom;
float: right;
}
span.shadow_r img {
margin: 0;
padding: 0;
position: relative;
left: -5px;
top: -5px;
padding: 8px;
background: #fff;
border: 1px solid;
border-color: #C0C0C0 #737373 #737373 #C0C0C0;
}
「margin」 「padding」 「color」 などはお好みで変更してください。
投稿内の記述方法
（画像が左で文字が右の場合）<span class="shadow_l"><img src="画像.jpg" /></span>
<div style="clear: both;"> </div>
下の1行は回りこみを解除したい場合に記述<div style="clear: both;"> </div>
画像が右で文字が左の場合は「"shadow_l"」を「"shadow_r"」に変えるだけです。
以上終了です。
人気度 : 27 %
（ 参考になったら、評価してねぇ～ (o*。_。)oペコッ
最上階
1階
関係のある記事
No user の書き込みがあります
コメントほしぃ～よぉ～ σ(^◇^;)