CSSのblend-modeを使い、複数の画像やカラーを重ねてPhotoshopのレイヤーと描画モードを利用した合成のような効果を作ります。 サンプルは、花の画像を背景に使い、その上に青色を付けたdiv要素(分かりやすくやや小さめ)を載せています。初期状態で花の画像のblend-modeはnoneになっていて、画像の下側のボタンでblend-modeを切り替えます。ボタンの名称がそれぞれblend-modeの値になっています。効果作成はCSSのみでおこなっていますが、ボタンによる値の切り替えにJavaScriptを使っています。

効果名:通常(初期)、darken(比較・暗)、multiply(乗算)、color-burn(焼き込みカラー)、lighten(比較・明)、screen(スクリーン)、color-dodge(覆い焼きカラー)、overlay(オーバーレイ)、soft-light(ソフトライト)、hard-light(ハードライト)、difference(差の絶対値)、exclusion(除外)、hue(色相)、saturation(彩度)、color(カラー)、luminosity(輝度)。

元の花の画像の見た目(縮小しています)

サンプルの花の画像

サンプル(重ね合わせ) 状態:通常(初期)

htmlソース

  1. <div id="image-wrap">
  2. <div id="upper"></div>
  3. </div>
  4. <div id="btn">
  5. <ul>
  6. <li><button id="darken">darken</button></li>
  7. <li><button id="multiply">multiply</button></li>
  8. <li><button id="color-burn">color-burn</button></li>
  9. <li><button id="lighten">lighten</button></li>
  10. <li><button id="screen">screen</button></li>
  11. <li><button id="color-dodge">color-dodge</button></li>
  12. <li><button id="overlay">overlay</button></li>
  13. <li><button id="soft-light">soft-light</button></li>
  14. <li><button id="hard-light">hard-light</button></li>
  15. <li><button id="difference">difference</button></li>
  16. <li><button id="exclusion">exclusion</button></li>
  17. <li><button id="hue">hue</button></li>
  18. <li><button id="saturation">saturation</button></li>
  19. <li><button id="color">color</button></li>
  20. <li><button id="luminosity">luminosity</button></li>
  21. </ul>
  22. </div>

CSSソース

  1. div#image-wrap {
  2. width:600px;
  3. height:370px;
  4. margin:10px auto;
  5. position:relative;
  6. background:url(img3/hana600.png);
  7. }
  8. div#upper {
  9. width:580px;
  10. height:350px;
  11. position:relative;
  12. background:#0460f8;
  13. top:10px;
  14. left:10px;
  15. mix-blend-mode: none;
  16. }

Scriptソース

  1. $(function(){
  2. $("#darken").on('click',function(){
  3. $("#upper").css('mix-blend-mode','darken');
  4. $("#status").text('darken(比較・暗)');
  5. });
  6. /* 中略 */
  7. $("#luminosity").on('click',function(){
  8. $("#upper").css('mix-blend-mode','luminosity');
  9. $("#status").text('luminosity(輝度)');
  10. });
  11. });

 

戻るボタン