imgサーチ｜写真素材専門サーチエンジン

写真素材検索のための専門サーチエンジン

新規サイト登録 | 修正・削除 | サイトマップ | お気に入りに追加

AND OR

現在、写真素材を提供している素材屋さんは非常に増え、使いたい内容の写真素材を手に入れるのも容易になってきました。その手に入れた写真素材が加工自由ならアレンジを加えてみるのも１つの手です。
ここでは、画像ソフトを使わずにアレンジするプチテクをご紹介していきます。

スタイルシート編：01｜スタイルシート編：02｜テーブル編｜ジェネレーター編｜ぷちテク INDEX

スタイルシート編：02

今回は画像自体に加工を加えてみたいと思います。加工自由な写真素材でご利用下さいね。

モノクロ化

IEのみの拡張機能ですが、簡単にモノクロ処理をすることができます。（Firefox等では無効）

　→　

▼スタイルシート

img.photo3 {
	filter: gray();
}

▼HTML

<img src="img/sample1.jpg" width="200" height="150" alt="写真" class="photo3">

ドット加工

次は効果用に用意した画像と写真素材を重ねてみましょう。例えばドット効果を重ねてみます。
※IE6～8/Firefox/Opera/Safari/Chromeで表示確認（半透明化にも対応）


ドット処理		ドット処理（半透明化）

▼スタイルシート

// 写真素材画像
.dot1 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
}

// ドット画像
.dot2 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;			/* 0より大きい数字にすることで重なり順を指定 */
	background-image: url(dot.gif);	/* DIVボックス内に背景画像として敷き詰める */
	filter: alpha(opacity=50);	/* 半透明化：IE6～8 */
	-moz-opacity: 0.50;		/* 半透明化：Firefox, Netscape */
	opacity: 0.50;			/* 半透明化：Opera, Safari, Firefox */
}

▼HTML

<div style="width:200px; height:150px; position:relative;">
   <div class="dot1"><img src="img/sample2.jpg" alt="" width="200" height="150"></div>
   <div class="dot2"><img src="img/space.gif" width="200" height="150"></div>
</div>

今回のサンプル画像は幅200ピクセル×高さ150ピクセルを使用しましたが、他サイズの場合は上記HTML部分の青字部分を、利用したい画像のサイズ数値に変更して下さい。

他の例と比べてちょっとだけ難しいので、サンプル画像・ドット画像・HTMLを１パックにしたものを用意。
オマケとしてドット画像の他に「ライン」「ライン２」「ドット２～４」「ハート」柄も同梱してあります。