CSS

CSSと透過png画像を活用してjpg画像にマスク効果を適用する手順

画像をウェブ上で表示する際、異なる形やデザインのマスクを使用してその見た目を変更することは、クリエイティブなデザインや特定のアートワークの要件を満たすための素晴らしい方法です。
この記事では、CSSと透過png画像を使用してjpg画像をマスク表示する方法を詳しく紹介します。

なぜマスク表示は重要なのか?

マスク表示はデザインの幅を広げ、ユーザーに印象的なビジュアル体験を提供します。
特定の部分のみを強調表示したり、アニメーション効果を追加することで、サイトのエンゲージメントを高めることができます。

必要な画像の準備

透過のpng画像
透過png画像

マスクされるjpg画像
マスクされるjpg画像

これらの画像を利用して、jpg画像の上にpngマスクを適用します。

マスク表示のためのCSSの記述

次のCSSは、jpg画像をマスク表示するためのものです。
ここでは、#photoエリアを用意し、その上に.photo-maskエリア(背景にpng画像を設定)をレイヤーとして重ねます。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0 15px 0;
	line-height:1.4em;
	text-align:center;
}
.clWrap{
	width:750px;
	margin:0 auto;
}
#photo {
	position: relative;
	display: block;
	width: 152px;
	height: 152px;
	margin:0 auto;
}
#photo .photo-mask{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 152px;
	height: 152px;
	background:url(mask.png);
}
-->  
</style>

HTMLの記述

以下のHTMLは、上記のCSSを適用してjpg画像をマスク表示するためのものです。
ここでは、id=”photo”エリアにimg画像を配置し、その上にclass=”photo-mask”エリア(背景にpng画像を設定)をレイヤーとして設定します。

<div id="idWrap">
<div id="idContents">

	<h1>png画像を上のレイヤーにし、下のjpg画像をマスク表示</h1>
    <div id="photo">
        <span class="photo-mask"></span>
        <img src="i01.jpg" alt="" width="152" height="152" />
    </div><!--/photo-->

</div><!--/idContents-->

</div><!--/idWrap-->

CSSとpng画像でjpg画像をマスクするデモページ

実際のマスク表示のデモは以下のリンクから確認できます。

CSSとpng画像でjpg画像をマスクするデモ

その他の応用例

マスク処理された画像だけを使用するのも良いですが、レイヤー下のjpg画像の位置をJavaScriptで動的に移動させてアニメーション効果を追加するなど、さまざまな応用が考えられます。このテクニックをマスターすることで、ウェブサイトやアプリのデザインの幅を大きく広げることができるでしょう。

まとめ

画像のマスク表示は、デザインやメッセージングのニーズに応じてビジュアルをカスタマイズするための強力なツールです。
この記事を参考にして、自分のプロジェクトでクリエイティブなマスク表示を楽しんでください。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。