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

Category
： 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;
}