¿Hay formas de usar la mezcla de color aditiva en el desarrollo web?

Tengo un diseño web que funciona con mezcla de colores aditiva . El efecto deseado es: el cuadrado rojo se superpone al cuadrado verde, el área superpuesta aparece en amarillo.

¿Hay alguna forma de lograr una mezcla de color aditiva con herramientas estándar (CSS, transparencia / opacidad CSS, imágenes png transparentes)?

La forma en que queremos aplicarlo en el diseño: dos patrones (p. Ej., Imágenes png transparentes) superpuestos: las áreas donde los dos patrones superpuestos son más shinys.

Cuando vi la respuesta de TheNoble-Coder, recordé las antiguas formas de mis primeros experimentos con la transparencia. Puede lograr una ilusión óptica similar a la que desea con GIF coloreados, PNG o incluso cualquier otro formato de gráficos de ttwig.

El truco consiste en pintar solo cada segundo píxel en el color base, de modo que aparezca un ráster con píxeles de colores y transparentes alternando. Si coloca dos de esas imágenes con colores base diferentes uno encima del otro, la mezcla de color aditiva dará lugar al ojo del observador y el color final se verá como una mezcla de color aditiva.

enter image description here

De vuelta a su pregunta: puede crear efectos gráficos tan simples utilizando un canvas o probablemente también mediante una combinación de degradados de CSS.

MÉTODO 1:

El efecto deseado se puede lograr usando CSS mix-blend-mode hoy en día. Soporte de Chrome solo por ahora.

Visite chrome: // flags / y “Habilite las características experimentales de la plataforma web” para ver el efecto.

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

 

MÉTODO 2:

El efecto también se puede lograr usando background-blend-mode con múltiples degradados de fondo en un solo elemento HTML.

Consulte aquí para obtener compatibilidad con el navegador: http://caniuse.com/css-backgroundblendmode

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

 

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; } 

MÉTODO 3:

Mismo efecto usando SVG. Funciona en la mayoría de los navegadores.

Probado en: FF 7+; Chrome 16+; IE 10+; Opera 12+; Safari 5, 6+ (error en 5.1)

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

           

MÉTODO 4:

Con la excepción de IE8 y abajo, canvas funcionará en la mayoría de los navegadores. Aquí hay algunos ejemplos / bibliotecas que podrían lograr los colores aditivos:

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

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

http://canvasquery.com/#blending

Las imágenes superpuestas de alguna manera pueden producir un efecto de mezcla de colores

En el código de abajo, el posicionamiento absoluto se ha utilizado para superponer la imagen superior. Las imágenes inferiores y la opacidad de la imagen superior se han establecido en un 70% para que sea transparente.

  

Ver demostración del código anterior Aquí: – http://jsfiddle.net/YtAHN/embedded/result/


Los divs coloreados cuando se superponen no pueden producir ese efecto; sin embargo, podemos hacer que se vea como ese efecto usando CSS y un simple truco de CSS:

Si usas css y algunos trucos, puedes lograr un efecto que se verá como dos cuadrados superpuestos y superponiendo la región amarilla. El truco simple es que tienes que agregar varios div para hacer los cuadrados verdes y rojos y usar float, clear y opacity para producir un efecto de transparencia. Verifique este código simple que producirá este efecto:

 
Red Div
Red Div
Overlapping Region
Green Div
Blank Div
Green Div

Ver demostración del código anterior Aquí: – http://jsfiddle.net/JqY3r/embedded/result/


La simple superposición y transparencia en div’s NO producirá este efecto de mezcla de color como obvio desde el siguiente código:

Si simplemente usa superposición y transparencia, no funcionará. Debe usar un truco como el código anterior para producir dicho efecto (excepto las imágenes, ya que las imágenes pueden usarse para producir este efecto de mezcla de color como en el primer ejemplo). Como verá, el siguiente código NO PUEDE producir el efecto deseado como se indicó anteriormente

 

Vea la demostración del código anterior aquí: – http://jsfiddle.net/9AgDm/embedded/result/

Espero que esto ayude.

Aquí hay un enfoque que utiliza el canvas HTML5 como alternativa a CSS:

La demostración n. ° 9 anima la mezcla aditiva de tres colores: rojo, verde y azul. Las características de fusión del canvas HTML5 facilitan la mezcla de colores. El atributo globalCompositeOperation se establece en un valor de ‘pantalla’.

 ctx.globalCompositeOperation = 'screen';