トリビア・リンク

トリビア記録記　～移ろいゆく時の流れとともに～

カレンダー

カテゴリ

リンク

人気記事

RSSリンクの表示

プロフィール

クーア

インターネットで氾濫している情報の中で、一つ一つの情報を吟味・厳選してその時の感動を記事にしたいと思います。

カウンター

  • 08月 31 2012

  • 画像枠に影をつける方法

  • 掲載カテゴリ : ノウハウ集
Facebookでは写真アップロードと文章でちょっとした日記代わりに使えます。ブログでも画像があった方がやはり見栄えはいいですよね。そんなわけで今日は画像に写真のような枠をつけて更に影をつけたサムネイルのスタイルシートを作成しました。⇒ ランキング

１．影用画像の準備
ここからダウンロード

２．画像枠の影と画像枠のHTML
<div class="img-kage"><div class="img-waku"><img src="gazou.jpg" alt="画像" /></div></div>

３．スタイルシート
.img-kage {
margin: 0px 0px 0px 5px;
background: url(影画像を置いたURL) right bottom;
float: left;
}
.img-waku {
position: relative;
left: -5px;
top: -5px;
padding: 5px;
background: #FFFFF0;
border: 1px solid #999999;
}
こんな感じに表示されます。











コメント

コメントの投稿

   管理者にだけ表示を許可する