Есть ли способ получить результаты Adobe Photoshop Blend в режимах Pin Light, Divide, Subtract, Vivid Light в CSS?
В Adobe Photoshop есть почти 30 смешанных режимов, а в CSS - только 15-18. Есть ли способ получить результаты оставшихся режимов наложения в CSS, например, Pin Light, Divide, Subtract, Vivid Light и т. Д.? Здесь я использую Sass для генерации режимов наложения классов. Это единственные поддерживаемые в CSS.
$blend-modes: () !default;
$blend-modes: map-merge(
(
"normal" : 'normal',
"multiply" : 'multiply',
"screen" : 'screen',
"overlay" : 'overlay',
"darken" : 'darken',
"lighten" : 'lighten',
"colordodge" : 'color-dodge',
"colorburn" : 'color-burn',
"hardlight" : 'hard-light',
"softlight" : 'soft-light',
"difference" : 'difference',
"exclusion" : 'exclusion',
"hue" : 'hue',
"saturation" : 'saturation',
"color" : 'color',
"luminosity" : 'luminosity'
), $blend-modes
);
// Generating Blend Modes Classes
@each $key,$mode in $blend-modes {
.#{$key}::after { background-color:red; mix-blend-mode: #{$mode}; }
}
//CSS Output is like following To each Effect
.normal::after { background-color:red; mix-blend-mode: normal; }
Я также нашел этот https://github.com/heygrady/scss-blend-modes Но не уверен, как с ним работать в случае смешивания изображений.