Есть ли способ получить результаты 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 Но не уверен, как с ним работать в случае смешивания изображений.

0 ответов

Другие вопросы по тегам