画像を矩形以外の形状で表示したい人のためのチュートリアル

画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。

PNG Masking: How to Dynamically Shape Any Image on Your Website

[ad#ad-2]

• デモ
• 画像の作り方
• 制作：HTML, CSS, JavaScript

デモ

デモでは、画像をブラシストローク状に表示しています。

デモページ

もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。

• Roundfolio

画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。

[ad#ad-2]

画像の作り方

画像は3種類が必要で、全て同じサイズにします。

• ロールオーバー用の画像
  ※透過PNG画像
• マスク用の画像
  ※透過PNG画像
• ベースとなる画像

ブラシストローク状に使用する画像3種類

サークル状のは、下記のようになります。

サークル状に使用する画像3種類

制作：HTML, CSS, JavaScript

HTML

ロールオーバーとマスク用に2つの空span要素を使用します。

<a href="images/gallery-full.jpg" class="item">
<span class="rollover"></span>
<span class="gallery-shadow"></span>
<img src="images/gallery-thumb.jpg"/>
</a>

CSS

ロールオーバーとマスク用の画像は、それぞれの背景画像として指定します。

a.item{
position:relative;
display:block;
height:187px;
width:187px;
float:left;
}
a.item .gallery-shadow{
display:block;
position:absolute;
top:0%;
left:0%;
width:187px;
height:187px;
background:url(images/gallery-shadow.png);
}
a.item .rollover{
display:block;
position:absolute;
top:0%;
left:0%;
width:187px;
height:187px;
background:url(images/gallery-rollover.png);
}

JavaScript

「jquery.js」を外部ファイルとして、下記のスクリプトを記述します。

<script type="text/javascript">
$(document).ready(function(){
	$(".rollover").css({'opacity':'0'});
	$('#gallery a.item').hover(
		function() {
			$(this).find('.rollover').stop().fadeTo(500, 1);
		},
		function() {
			$(this).find('.rollover').stop().fadeTo(500, 0);
		}
	)
});
</script>