css - poner - ¿Son modos de mezcla similares a Photoshop posibles en HTML5?

modos de fusion photoshop pdf

Question

Quiero poner un elemento rectangular rojo <div> sobre mi página web para que se vea no solo transparente, sino también como mezclado en el modo Multiplicar de Photoshop.

El <div> tendría position: fixed , por lo que el contenido debajo de él cambiaría rápidamente.

¿Es posible con cualquier truco HTML5 / CSS3 / canvas / SVG?

Answer 1

Creé una biblioteca separada, liviana y de código abierto para realizar modos de fusión estilo Photoshop de un contexto HTML Canvas a otro: context-blender . Aquí está el uso de muestra:

// Might be an ''offscreen'' canvas
var over = someCanvas.getContext(''2d'');
var under = anotherCanvas.getContext(''2d'');
over.blendOnto( under, ''screen'', {destX:30,destY:15} );

Consulte el README para obtener más información, incluidos los modos de fusión admitidos actualmente.

Puede usar esto para multiplicar de un lienzo a otro, pero no sobre elementos HTML estándar.

Answer 2

Dependiendo de las imágenes involucradas y el efecto exacto que está buscando, es posible que pueda hacer algunas capas creativas de imágenes y gradientes de CSS para lograr el efecto deseado:

http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/

Answer 3

Esto no es HTML5, pero es lo más cercano que puedo encontrar para lo que estás preguntando.

Modos de mezcla Javascript (OpenGL).

No creo que los "modos de fusión" como Photoshop se puedan emular con solo HTML puro, a menos que el lenguaje dé un giro brusco en otra dirección. Pero sería genial ver alguna forma más fácil de hacer esto.

Answer 4

Ha aterrizado en Chrome Canary, por lo que debería llegar pronto. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/

Answer 5

He implementado los modos de mezcla más conocidos de gimp / photoshop utilizando canvas en http://canvasquery.com/ sin embargo, no es adecuado para relatime.

Esto cambiará con la introducción de los modos de mezcla nativos en el lienzo

https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable

Answer 6

No (no de forma nativa) pero pronto: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

Answer 7

También estoy muy interesado en hacer eso. Muchos diseños que he codificado para diseñadores visuales podrían haber usado eso. Aparte de las otras publicaciones en este hilo, hay una forma de hacerlo, actualmente solo en Firefox 4, sin usar OpenGl o Canvas. Es a través del uso de filtros SVG. Aparentemente también está en Nighties de Webkit y Chrome, pero no pude ver nada funcionando todavía.

Aquí hay algunas demostraciones y explicaciones:

• (demo) http://people.mozilla.org/~roc/filter.xhtml
• https://developer.mozilla.org/en/applying_svg_effects_to_html_content
• https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
• http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html

En mi humilde opinión, cualquier cosa cercana a los modos de fusión es demasiado difícil de lograr en este momento. Es muy difícil encontrar referencias en feConvolveMatrix , feSpecularLighting o feColorMatrix , y los ejemplos son simplemente imposibles de resolver para mí. Podrían funcionar, pero no sé cómo.

Deseo que algo como EffectGames sugiriera :

div.sprite {
position: absolute;
z-index: 2;
composite: add;
}

Este sería un enfoque mucho mejor. Tal vez algún ninja experto en matemáticas podría hacernos lib para hacer eso.

EDITAR: Hay una especificación de SVG más fácil para hacer exactamente los modos de fusión. Pero ningún navegador que probé lo hizo funcionar (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - Pero tampoco sé si esto será posible de usar en elementos HTML-DOM.

Answer 8

También puede ver esta demostración: http://media.chikuyonok.ru/canvas-blending/ para ver cómo hacer esto con lienzo.

Consulte la fuente para las fórmulas de los modos de fusión y cómo aplicarlas (las fórmulas son mucho más legibles que en pixastic o context-blender).

Answer 9

Ya puedes usarlo con CSS simple (sin lienzo). Ejemplo:

mix-blend-mode: ''multiply''

Es posible que Internet Explorer no lo admita, pero los otros navegadores sí.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Answer 10

Esto es lo más cercano que he visto , y sí, todos los activos tienen que estar en el lienzo. Tenga en cuenta que Internet Explorer comienza a admitir el lienzo en la versión 9, que aún no ha salido, por lo que si tiene que admitir IE <9, deberá usar una solución alternativa.