img要素のデザインをCSSでいろんなパターン装飾してみる

今回のサンプルで使う画像です。

例えば、企業系のWebサイトとかで、商品画像とか、イメージ画像とかって使う機会ってけっこうあると思うんですが、ただ画像をおくだけでは寂しいですよね...

この時にimg要素に薄い色のborderを入れてあげるだけでけっこう綺麗になると思うですよね。

なので今回はimg要素のデザインをいろんなパターン作ってみたので、参考にしてみて下さい。

…ここからが続き

imgに枠線を入れる

サンプル画像1

.entryBody #contents .entry p.img01	{
	border: 2px solid #2D88B3;
}

imgに枠をつけてみる

サンプル画像2

.entryBody #contents .entry p.img01	{
	border: 1px solid #CCC;
	background: #FFF;
	padding: 2px;
}

枠をつけ、隆起してるようにしてみる

サンプル画像3

.entryBody #contents .entry p.img01	{
	border: 1px solid #CCC;
	background: #FFF;
	padding: 2px;
}

枠をつけ、押下してるようにしてみる

サンプル画像4

.entryBody #contents .entry p.img01	{
	border: 1px solid #CCC;
	background: #FFF;
	padding: 2px;
}

枠の背景に色をつけてみる

サンプル画像5

.entryBody #contents .entry p.img05	{
	border: 1px solid #000;
	background: #F8D7B4;
	padding: 2px;
}

二重線にしてみる

サンプル画像6

.entryBody #contents .entry p.img06	{
	border: 3px double #000;
}

枠ありの影をつけてみる

サンプル画像7

.entryBody #contents .entry p.img07 {
	position: relative;
	width: 550px;
	height: 200px;
	background: #CCC;
}
.entryBody #contents .entry p.img07 img {
	position: absolute;
	top: -10px;
	left: -10px;
	border: 1px solid #EEE;
	background: #FFF;
	padding: 2px;
}

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article