佐野屋よろず帳

横浜市の米屋が適当な事書いてます

*

CSSで画像にドロップシャドウをつける

   

alpine_a110.jpg
ブログの投稿画像に影をつける為のメモ。
修正する時に忘れない為にね。

利用にしたのは
小粋空間: CSSで画像に影をつける(ドロップシャドウ)

画像に影をつけて回り込みをさせるCSSなので、回り込み解除を加えて終了。

.shadow {
    margin: 10px 0 0 5px;
    background: url(背景画像へのパス) right bottom;
    float: left; /* 回り込み制御 */
}
 
.shadow img {
    position: relative;
    left: -5px; /* 画像を左へ移動 */
    top: -5px; /* 画像を上へ移動 */
    padding: 5px; /* 画像枠 */
    background: #ffffff; /* paddingを設定した場合の背景色 */
    border: 1px solid #999999; /* 画像の枠線 */
}

.clear {
    display: block;
    clear: both;
}

回り込みをさせない場合は、別にクラスを用意してやればOKかな。

 - MT4 , ,

ad

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  関連記事