現在、写真素材を提供している素材屋さんは非常に増え、使いたい内容の写真素材を手に入れるのも容易になってきました。その手に入れた写真素材が加工自由ならアレンジを加えてみるのも１つの手です。
ここでは、画像ソフトを使わずにアレンジするプチテクをご紹介していきます。
スタイルシート編：02
今回は画像自体に加工を加えてみたいと思います。加工自由な写真素材でご利用下さいね。モノクロ化
IE5以上のみの拡張機能ですが、簡単にモノクロ処理をすることができます。
→ ▼スタイルシート
img.pict3{
filter: gray();
}
▼HTML
<img src="img/sample1.jpg" width="200" height="150" alt="" class="pict3">
ドット加工
次は効果用に用意した画像と写真素材を重ねてみましょう。例えばドット効果を重ねてみます。※WindowsXP＋IE6のみで表示確認
  |
|
|
| ドット処理 | ドット処理（半透明化） |
▼スタイルシート
// 写真素材画像
.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(style=0, opacity=60); //半透明化する場合（IE5.0〜）
}
▼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を１パックにしたものを用意。
オマケとしてドット画像の他に「ライン」「ライン２」「ドット２〜４」「ハート」柄も同梱してあります。
ZIP形式で圧縮していますので、ダウンロード後に解凍してご参考くださいね。 |
 |
|
| ドット４（透明度 30％） | ライン（透明度 20％） |
サーチカテゴリ
素材サイト全般が登録可能な姉妹サイト「Web素材屋サーチ」もあります。
最新のお知らせ
お手軽ぷちテク講座
SPONSORED LINK
容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
年間６９３円からの格安ドメイン取得サービス─ムームードメイン
利用規約 | プライバシーポリシー | 免責事項 | リンクについて＆使用素材サイトの紹介 | お問い合わせ | ▲ページTOP
Copyright (C)
2006-2008
imgサーチ All Rights Reserved.
Script：Yomi-Search Ver4.21／Support：Yomi-Search Fan
※当ホームページに記載されている会社名・商品名・サイト名などは、各社の登録商標もしくは商標です。
※当ホームページに記載されている会社名・商品名・サイト名などは、各社の登録商標もしくは商標です。