0

CSSで描画表現を指定できるブレンドモード

CSSで描画表現を指定できるブレンドモード

PhotoShopなどに搭載されている機能のひとつである「描画モード」ですが、多くの方がこの機能を利用しているのではないでしょうか。その便利な「描画モード」がCSSで表現できるようになりました。CSSでこれが実現ができるとなるとPhotoShopがなくても画面上で多くの表現ができるようになってきますね。

 

描画モードとは?

2つ以上の画像やカラーを重ね合わせて様々な描画表現ができる機能

 

対応ブラウザ

Can I use で対応状況を確認

※IEのみ非対応になっています。
※Android BrowserやiOS Safarなどのスマートフォンも非対応ですのでPCブラウザでご確認ください。

 

使い方

1.表示エリアを用意します。

空の<div>要素を配置しています。

 

2.任意のクラスのbackgroundに、背景色と画像を同時に指定します。

.blendという名前のクラスに、背景の指定をします。

背景色に「#3db6b8」

blend-color

背景画像に「green.jpg」

green

 

3.個別にbackground-blend-modeを指定します。

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種類の描画モードがありますので色々と試してみてください。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > CSSで描画表現を指定できるブレンドモード