トリビア・リンク

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

カレンダー

カテゴリ

人気記事

プロフィール

クーア

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

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • 画像枠に影をつける方法

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

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

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

3.スタイルシート
.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;
}
こんな感じに表示されます。











コメント

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。