mix-blend-modeはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。「オーバーレイ」「スクリーン」などのブレンドモードを利用することでデザインの自由度が広がります。本記事ではmix-blend-modeの魅力と使い方をデモを交えて紹介します。
情報源: CSS3のブレンドモードmix-blend-modeを使いこなそう - ICS LAB
hello world
normal
hello world
multiply
hello world
darken
hello world
hard-light
hello world
luminosity
hello world
- /* Keyword values */
- mix-blend-mode: normal;
- mix-blend-mode: multiply;
- mix-blend-mode: screen;
- mix-blend-mode: overlay;
- mix-blend-mode: darken;
- mix-blend-mode: lighten;
- mix-blend-mode: color-dodge;
- mix-blend-mode: color-burn;
- mix-blend-mode: hard-light;
- mix-blend-mode: soft-light;
- mix-blend-mode: difference;
- mix-blend-mode: exclusion;
- mix-blend-mode: hue;
- mix-blend-mode: saturation;
- mix-blend-mode: color;
- mix-blend-mode: luminosity;
- /* Global values */
- mix-blend-mode: initial;
- mix-blend-mode: inherit;
- mix-blend-mode: unset;
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode