PhotoShopなどに搭載されている機能のひとつである「描画モード」ですが、多くの方がこの機能を利用しているのではないでしょうか。その便利な「描画モード」がCSSで表現できるようになりました。CSSでこれが実現ができるとなるとPhotoShopがなくても画面上で多くの表現ができるようになってきますね。
描画モードとは？
2つ以上の画像やカラーを重ね合わせて様々な描画表現ができる機能
対応ブラウザ
※IEのみ非対応になっています。
※Android BrowserやiOS Safarなどのスマートフォンも非対応ですのでPCブラウザでご確認ください。
使い方
1.表示エリアを用意します。
空の<div>要素を配置しています。
|
1 |
<div class="blend"></div> |
2.任意のクラスのbackgroundに、背景色と画像を同時に指定します。
.blendという名前のクラスに、背景の指定をします。
|
1 2 3 4 5 |
.blend { width: 600px; height: 400px; background: #3db6b8 url("../images/green.jpg") no-repeat center center; } |
背景色に「#3db6b8」
背景画像に「green.jpg」
3.個別にbackground-blend-modeを指定します。
background-blend-modeにmultiply(乗算)を指定します。
|
1 2 3 |
.blend.multiply { background-blend-mode: multiply; } |
描画モード一覧
1.Multiply(乗算)
background-blend-mode: multiply;
2.Scrren(スクリーン)
background-blend-mode: screen;
3.Overlay(オーバーレイ)
background-blend-mode: overlay;
4.Darken/(暗く)
background-blend-mode: darken;
5.Lighten(明るく)
background-blend-mode: lighten;
6.Color Dodge(ごまかし)
background-blend-mode: color-dodge;
7.Color burn(覆い焼きリニア)
background-blend-mode: multiply;
8.Hard light(ハードライト)
background-blend-mode: hard-light;
9.Soft light/(ソフトライト)
background-blend-mode: soft-light;
10.Difference(差異)
background-blend-mode: difference;
11.Exclusion(除外)
background-blend-mode: exclusion;
12.Hue(色合い)
background-blend-mode: hue;
13.Saturation(彩度)
background-blend-mode: saturation;
14.Color(色相)
background-blend-mode: color;
15.Luminosity(輝度)
background-blend-mode: luminosity;
以上15種類の描画モードがありますので色々と試してみてください。