透過ＰＮＧで画像にハイライトやフレームをつける

大量のサムネール画像に対してハイライトをつけたり、フレームをつけるなどの装飾をしたい場合、ひとつづつ加工していくと手間がかかります。しかし、透過ＰＮＧを利用すれば、直接加工しなくても画像に装飾することができます。

作り方は装飾したい画像の下に透明でハイライトやフレーム処理した画像を用意して、２枚重ねるような感じにします。応用次第でレース状のフレームなどを作成して、装飾したい画像の上にも枠を作ることもできます。ただし、ＩＥ６で透過ＰＮＧを使用する場合、JavaScriptなどを適応させなければ使えないので注意しましょう。

デザインサンプル

画像サンプル

サンプルCSSコード

.photo01 {
　　background: url(img/haikei.png);
　　background-repeat: no-repeat;
　　display: block;
　　width: 310px;
　　height: 310px;
}

.photo01 img {
margin: 5px;
}

Stylesheet Designguide MENU

Copyright (C) スタイルシートデザインガイド All Rights Reserved.