Quiero poner una red rectangular <div> elemento más de mi web para que se vería no sólo transparente, pero también como mezclado en Photoshop en modo Multiplicar.

La <div> habría position: fixed, por lo que el contenido de abajo que iba a cambiar rápidamente.

Es posible con cualquier HTML5 /CSS3 /lienzo /SVG truco?

10 Comentarios

  1. 27

    He creado un independiente, ligero, de código abierto de la biblioteca para realizar estilo Photoshop modos de fusión de un HTML Canvas contexto a otro: contexto-licuadora. Aquí está el ejemplo de uso:

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

    Ver el LÉAME para obtener más información, incluyendo la que en la actualidad-los modos de mezcla admitidos.

    Se puede utilizar para realizar multiplicarse a partir de un lienzo a otro, pero no a través de la norma de los elementos HTML.

  2. 12

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

    • +1; su proyecto de especificación puede ser justo lo que necesitaba para conseguir el 100% Photoshop compatible con los modos de mezcla en la presencia de la disminución de alfa! (Y esperemos que finalmente la biblioteca no se necesita en absoluto.)
    • Funciona en Chrome beta si habilita la Web experimental las características de la Plataforma . jsfiddle.net/X4GyF
    • Sólo para el registro, ahora en el modo por defecto en Chrome, FF y Opera
  3. 7

    También puede buscar en esta demo: http://media.chikuyonok.ru/canvas-blending/ a ver cómo hacer esto con una lona.

    Compruebe la fuente de los modos de fusión de’ fórmulas y cómo aplicarlos (fórmulas son mucho más legible que en pixastic o contexto-en la batidora).

    • Esta es una impresionante demostración de hombre! Has hecho? Puedo por favor use el código de fusión normal en mi propio trabajo? Traté de visitar la raíz para contactar con el autor, pero lanzó un mensaje de error 404!
    • No, esa no soy yo, esto es por el famoso ruso front-end hombre Sergey Chikuyonok (el hombre detrás de Zen Coding, por cierto) 🙂 En el artículo él llama a sentirse libre con el código de la demo, sin embargo, usted puede ponerse en contacto con él a través de comentarios, o ver el pie de página de la página de su correo electrónico.
    • Gracias compañero! Voy a correo de él! Que el artículo tiene un montón de cosas buenas para Lona! 🙂
    • es tan bonito, yo también quiero hasta votar la misma respuesta dos veces
  4. 2

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

    Javascript modos de fusión (OpenGL).

    No creo «modos de fusión» como Photoshop podría ser emulado con puro HTML, a menos que el lenguaje dio un brusco giro en otra dirección. Pero sería genial ver a alguna forma más fácil de hacer esto.

    • muestra de fusión a través de algo que ya está ahí, en el lienzo. pero, supongo, no puedo aplicar la mezcla a algo que está por DEBAJO de la lona, ya que se necesitaría el lienzo para capturar el contenido de la ventana, pero, al menos en firefox, que no se permite a las aplicaciones web.
  5. 2

    Yo también estoy muy interesado en hacerlo. Muchos de los diseños que he codificado para diseñadores visuales podría haber usado. Aparte de los otros posts en este hilo, hay una manera de hacer esto, en la actualidad sólo en Firefox 4, sin la utilización de OpenGl o Lienzo. Es a través del uso de filtros SVG. Aparrently es en camisones de Webkit y Chrome también, pero no podía ver nada de trabajo todavía.

    Aquí están algunas demostraciones y explicaciones:

    Mi humilde opinión, algo anyware cerca de modos de mezcla demasiado duro para lograr ahora. Es muy difícil encontrar referencias en feConvolveMatrix, feSpecularLighting, o feColorMatrix, y los ejemplos son imposibles de averiguar por mí. Podría funcionar, pero no sé cómo.

    Quiero algo como EffectGames sugerido:

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

    Esta sería una forma mejor enfoque. Tal vez algunos ninja no skiled en matemáticas nos podría hacer una lib para hacer eso.

    EDICIÓN: Hay un más fácil SVG spec a hacer exactamente los modos de mezcla. Pero no hay navegador que he probado funciona (FF4, IE9, Opera11, Webkit por la Noche): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html – Pero también no sé si esto será posible utilizar en HTML-elementos del DOM.

  6. 1

    Esto es lo más cercano que he visto, y sí, todos los activos tienen que estar en la lona. Tenga en cuenta que Internet Explorer se inicia el apoyo a la lona en la versión 9, que aún no ha salido, así que si tienes que soportar IE<9 tendrás que utilizar una solución.

    • Sí, el Pixastic de la biblioteca [ pixastic.com ] tiene un aspecto bastante fresco. Gracias por el enlace. BTW, es decir, 9 fue lanzado en Marzo, así que puede ser una opción ahora.

Dejar respuesta

Please enter your comment!
Please enter your name here