css - Web 開発で加法混色を使用する方法はありますか?

Question

加法混色で動作する Web デザインがあります。望ましい効果は次のとおりです。赤い四角が緑の四角に重なり、重なっている領域が黄色に見えます。

標準ツール (CSS、CSS 透明度/不透明度、透明な png 画像) で加法混色を実現する良い方法はありますか?

デザインに適用したい方法: 2 つのパターン (例: 透明な png 画像) が互いに重なり合います。2 つのパターンが重なっている領域はより明るくなります。

score 4 · Accepted Answer

方法 1:

最近では、CSS mix-blend-mode を使用して目的の効果を実現できます。Chrome のサポートは今のところのみです。

chrome://flags/ にアクセスし、「実験的な Web プラットフォーム機能を有効にする」を行って効果を確認してください。

http://jsfiddle.net/9AgDm/4/

<div style="width: 200px; height: 200px; background-color: #F00; position: absolute; top: 100px; left: 100px;"></div>
<div style="width: 200px; height: 200px; background-color: #0F0; position: absolute; top: 0; left: 0;"></div>
<div style="width: 200px; height: 200px; background-color: #F00; position: absolute; top: 100px; left: 100px; mix-blend-mode: screen;"></div>

方法 2:

この効果は、単一の HTML 要素に複数の背景グラデーションを指定して background-blend-mode を使用して実現することもできます。

ブラウザのサポートについては、こちらをご覧ください: http://caniuse.com/css-backgroundblendmode

http://jsfiddle.net/9AgDm/5/

<div></div>

CSS:

div {
    background-blend-mode: screen;
    background: 
        linear-gradient(to right, #0F0, #0F0),
        linear-gradient(to right, #F00, #F00);
    background-position:
        0 0,
        100px 100px;
    background-repeat: no-repeat;
    background-size:
        200px 200px,
        200px 200px;
    height: 300px;
    width: 300px;
}

方法 3:

SVG を使用した同じ効果。ほとんどのブラウザで動作します。

テスト済み: FF 7+; Chrome 16+; IE 10+; Opera 12+; Safari 5、6+ (5.1 では失敗)

http://jsfiddle.net/9AgDm/9/

<svg width="300" height="300">
  <defs>
    <filter id="additive">
      <feFlood x="0" y="0" width="200" height="200" flood-color="#0F0" result="a"/>
      <feFlood x="100" y="100" width="200" height="200" flood-color="#F00" result="b"/>
      <feBlend in="a" in2="b" result="ab" mode="screen"/>
     </filter>
  </defs>
  <rect filter="url(#additive)" width="100%" height="100%"/>
</svg>

方法 4:

IE8 以下の場合を除き、canvas はほとんどのブラウザーで動作します。加法混色を実現できるいくつかの例/ライブラリを次に示します。

http://media.chikuyonok.ru/canvas-blending/

http://www.pixastic.com/lib/docs/actions/blend/

http://canvasquery.com/#blending

score 2 · Accepted Answer

TheNoble-Coder の回答を見て、透明性に関する最初の実験の昔のやり方を思い出しました。色付きの GIF、PNG、またはその他のラスターグラフィックスフォーマットを使用して、希望するものと同様の錯視を実現できます。

コツは、ベースカラーの 1 つおきのピクセルだけをペイントすることです。これにより、ラスターは色付きのピクセルと透明なピクセルが交互に表示されます。このような 2 つの画像を異なる基本色で重ねて配置すると、加法混色によって視聴者の目に映り、最終的な色は加法混色のように見えます。

ここに画像の説明を入力

質問に戻りますが、canvasまたはおそらく CSS グラデーションの組み合わせを使用して、このような単純なグラフィック効果を作成できます。

score 0 · Accepted Answer

重なり合う画像は、どういうわけかカラーミキシング効果を生み出すことができます

次のコードでは、絶対配置を使用して上部の画像を下部の画像に重ね、上部の画像の不透明度を 70% に設定して透明にしています。

  <div>   
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/220px-Color_icon_red.svg.png" style="width:200px; height:200px; float:left; background-color:#F00; position:absolute; top:100px; left:100px; opacity:0.7;filter:alpha(opacity=70); z-index:2" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Color_icon_green.svg/220px-Color_icon_green.svg.png" style="width:200px; height:200px; float:left; background-color:#030; clear:left" />
  </div>
  <!--This Code has been checked in Firefox 16, Chrome8 and IE8(with Activex enabled) -->

上記のコードのデモを見る:- http://jsfiddle.net/YtAHN/embedded/result/

色付きの div が重なっている場合、その効果を生み出すことはできませんが、CSS と単純な CSS トリックを使用してその効果のように見せることができます。

css といくつかのトリックを使用すると、2 つの四角形が重なり合い、黄色の領域が重なり合っているように見える効果を得ることができます。単純なトリックは、複数の div を追加して緑と赤の正方形を作成し、float、clear、および opacity を使用して透明効果を生成する必要があることです。この影響を生成するこの単純なコードを確認してください。

<div>
<div style="width:200px; height:100px; float:left; background-color:#F00; opacity:0.7;
filter:alpha(opacity=70);">   <!-- filter:alpha(opacity=xx) Used For IE8 and earlier Compatibility -->
Red Div
</div>
<div style="width:100px; height:100px; float:left; background-color:#F00; clear:left; opacity:0.7;
filter:alpha(opacity=70);">
Red Div
</div>
<div style="width:100px; height:100px; float:left; background-color:#FF0; opacity:0.5;
filter:alpha(opacity=50);">
Overlapping Region
</div>
<div style="width:100px; height:100px; float:left; background-color:#030; opacity:0.7;
filter:alpha(opacity=70);">
Green Div
</div>
<div style="width:100px; height:100px; float:left;  clear:left; opacity:0.7;
filter:alpha(opacity=70);">
Blank Div
</div>
<div style="width:200px; height:100px; float:left; background-color:#030; opacity:0.7;
filter:alpha(opacity=70);">
Green Div
</div>
</div>
<!--This Code has been checked in Firefox 16, Chrome8 and IE8(with Activex enabled) -->

上記のコードのデモを見る:- http://jsfiddle.net/JqY3r/embedded/result/

次のコードから明らかなように、div の単純なオーバーラップと透明度では、この混色効果は生成されません。

単純にオーバーラップと透明度を使用すると機能しません。上記のコードのようなトリックを使用して、このような効果を生成する必要があります (最初の例のように、画像を使用してこの混色効果を生成できるため、画像を除きます)。 次のコードでは、上記のように望ましい効果が得られないことがわかります。

<div style="width:200px; height:200px; float:left; background-color:#F00; position:absolute; top:100px; left:100px; opacity:0.7;
filter:alpha(opacity=70); z-index:2">  <!-- filter:alpha(opacity=xx) Used For IE8 and earlier Compatibility -->
</div>
<div style="width:200px; height:200px; float:left; background-color:#030; opacity:0.7;
filter:alpha(opacity=70); clear:left">
</div>
<!--This Code has been checked in Firefox 16, Chrome8 and IE8(with Activex enabled) -->

上記のコードのデモを見る:- http://jsfiddle.net/9AgDm/embedded/result/

お役に立てれば。

css - Web 開発で加法混色を使用する方法はありますか?

3 に答える 3

Related

Reference