cssのブレンドモード（mix-blend-mode）プロパティがなかなかいい感じなのでメモしました。
mix-blend-modeとは
Phtoshopでいうレイヤー効果をcssで可能にするプロパティです。
レイヤー効果は常識的なテクニックですが、それがcssで可能になるのはありがたいですね。
mix-blend-modeプロパティーの種類
Phtoshopのレイヤー効果と同じです。
| 効果 | プロパティー名 | 効果のタイプ | 使い方 |
|---|---|---|---|
| 比較(暗) | darken | 暗い | mix-blend-mode:darken; |
| 乗算 | multiply | 暗い | mix-blend-mode:multiply; |
| 焼きこみ | color-burn | 暗い | mix-blend-mode:multiply; |
| 比較(明) | lighten | 明るい | mix-blend-mode:lighten; |
| スクリーン | screen | 明るい | mix-blend-mode:screen; |
| 覆い焼き | color-dodge | 明るい | mix-blend-mode:color-dodge; |
| オーバーレイ | overlay | 明暗両方 | mix-blend-mode:overlay; |
| ソフトライト | soft-light | 明暗両方 | mix-blend-mode:soft-light; |
| ハードライト | hard-light | 明暗両方 | mix-blend-mode:hard-light; |
| 差の絶対値 | difference | 差分 | mix-blend-mode:difference; |
| 除外 | exclusion | 差分 | mix-blend-mode:exclusion; |
| 色相 | hue | 色ベース | mix-blend-mode:hue; |
| 彩度 | saturation | 色ベース | mix-blend-mode:saturation; |
| カラー | color | 色ベース | mix-blend-mode:color; |
| 輝度 | luminosity | 色ベース | mix-blend-mode:luminosity; |
クロスフェード効果のあるブレンドモード
plus-lighterというプロパティがあります。他のブレンドモードとは趣が違い、クロスフェードの際有効のようです。
スライドショーなど活かしてみてはどうでしょうか？
まとめ
表現としての幅は広がりますが、背景との相性も含めしっかり吟味、調整が必要そうです。個人的にはマウスストーカーに使用すると効果的ではないかと思いました。
今後も研究したいと思います。
