I have a web design that works with additive color mixing. The desired effect is: red square overlays green square, the overlapping area appears yellow.
Are there any good ways to achieve additive color mixing with standard tools (CSS, CSS transparency/opacity, transparent png images)?
The way we want to apply it in the design: two patterns (e.g. transparent png images) overlay each other - the areas where the two patterns overlay are brighter.
METHOD 1:
The desired effect can be achieved using CSS mix-blend-mode nowadays. Chrome support only for now.
Visit chrome://flags/ and "Enable experimental Web Platform features" to see effect.
<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>
METHOD 2:
The effect can also be achieved using background-blend-mode with multiple background gradients on a single HTML element.
Check here for browser support: http://caniuse.com/css-backgroundblendmode
<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;
}
METHOD 3:
Same effect using SVG. Works on most browsers.
Tested on: FF 7+; Chrome 16+; IE 10+; Opera 12+; Safari 5, 6+ (failed on 5.1)
<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>
METHOD 4:
With the exception if IE8 and below, canvas will work on most browsers. Here are a few examples/libraries that could achieve the additive colors:
http://media.chikuyonok.ru/canvas-blending/
As I saw the answer of TheNoble-Coder, I remembered the old ways of my first experiments with transparency. You can achieve an optical illusion similar to what you want with colored GIFs, PNGs or even any other raster graphics format.
The trick is to paint only every second pixel in the base color, so that a raster appears with colored and transparent pixels alternating. If you place two such images with different base colors above each other, the additive color mixing will result in the eye of the viewer and the final color looks like an additive color mix.
Back to your question: you can create such simple graphics effects using a canvas or a probably also through combination of CSS gradients.
Overlapping images can somehow produce Color Mixing Effect
In the code bellow, absolute positioning has been used to overlap the top image the bottom images and opacity of the top image has been set to 70% to make it transparent.
<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) -->
View Demo for the above code Here:- http://jsfiddle.net/YtAHN/embedded/result/
If you use css and some tricks you can achieve an affect which will look like two squares overlapped and overlapping region yellow. The Simple trick is that you have to add multiple div's to make the green and red squares and use float, clear and opacity to produce transparency effect. Check this simple code Which will produce this affect:
<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) -->
View Demo for the above code Here:- http://jsfiddle.net/JqY3r/embedded/result/
If you simply use overlapping and transparency it will not work. You have to use a trick like above code to produce such effect(except for images, as images can be used to produce this colour mixing affect as in the first example). As you will see that the following code CAN NOT produce the desired effect as above
<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) -->
View Demo for the above code Here:- http://jsfiddle.net/9AgDm/embedded/result/
Hope this helps.
`.
– Sparky Dec 02 '12 at 16:32