css - efecto - Cómo replicar el modo de capa de multiplicación de PS

efecto multiplicar css (8)

Es posible con un 24.png, si conoce el truco.

En Illustrator puede exportar el gráfico como 24.png, pero esto nunca parece funcionar como multiplicar.

He encontrado lejos.

obtener su gráfico multiplicado por sí mismo
coloca una caja negra sólida al 100% detrás de ella y selecciona ambos gráficos
en la ventana de transparencia seleccione ''Hacer máscara'' y luego ''Invertir máscara''
exportar como un archivo 24.png

funciona igual que una multiplicación cuando el índice z (ed) está en la parte superior de una imagen.

¿Alguien sabe de una buena manera de replicar el modo de capas múltiples de Photoshop utilizando una imagen o CSS?

Estoy trabajando en un proyecto que tiene miniaturas que obtienen una superposición de colores cuando pasas el cursor sobre ellas, pero el diseñador utilizó un conjunto de capas para multiplicar y no puedo imaginar cómo producirlo en la web.

Lo mejor que he encontrado es usar rgba o un png transparente, pero incluso así no se ve bien.

Hace poco tuve la necesidad de hacer exactamente lo que me pidió el OP, así que busqué alrededor. Encontré una excelente manera de replicar el efecto de multiplicación haciendo un PNG transparente en Photoshop.

Crea un nuevo documento con las mismas dimensiones de tu capa de multiplicación.
Llene el documento con negro.
Agregue una máscara vectorial (el icono a la izquierda de la capa "fx" en la parte inferior de la ventana de capas).
Alt/Option + click en la máscara misma.
Ahora copie y pegue su capa de multiplicar en la máscara.
Cmd/Ctrl + i para invertir la capa que acaba de pegar.
Crea una nueva capa debajo de esta capa y agrega la imagen detrás de la superposición múltiple.
Todo debería verse muy cerca del resultado deseado. Si es necesario, puede ajustar la opacity de la capa enmascarada que creamos.
Cuando se ve bien, basta con alternar la visibilidad de la capa inferior y guardar la capa enmascarada como PNG et voila.

Todo el crédito va a Sojeong desde https://superuser.com/questions/381704/multiply-blending-mode-to-png

Mira esto: http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

Al usar esas instrucciones, tuve un gran éxito al filmar una imagen en blanco y negro (dibujo de tinta en mi caso, con negros y grises sobre un fondo blanco sólido) sobre un fondo oscuro (madera en mi caso). Apenas hay diferencia con el verdadero filtro Multiply de Adobe.

Usé las instrucciones de Photoshop para eliminar los blancos de mi imagen, dejando solo negros y grises sobre un fondo transparente. Guardar esto en PNG y colocarlo en la madera en CSS / HTML todavía parecía mucho peor que el múltiple, pero reduciendo fuertemente el brillo del PNG lo resolvió (los grises claros se destacaron antes, haciéndolo feo).

En general, te recomiendo que juegues en Photoshop, replicando la situación de la web: una capa semitransparente (sin cosas especiales) sobre un fondo sólido. Los tutoriales como el anterior pueden permitirle reproducir efectos de multiplicación u otros efectos sofisticados.

No estoy seguro de si tendrás suerte. Por lo que yo sé, no es posible, incluso si trataste de integrar un JavaScript avanzado con él.

No existe tal habilidad disponible. Las únicas opciones de composición que obtienes e incluso cercanas son:

lighter modo de composición lighter en un <canvas> HTML5 (que es a + b no a * b, y tiene aproximadamente el efecto opuesto a multiplicarse)
min o subtract filtros Compositor en IE solamente.

Ninguno de los dos es realmente práctico.

En general, no debe intentar exportar composiciones de Photoshop como capas, sino renderizarlas en una sola imagen opaca. Para las reinversiones, puede crear dos imágenes (una para el estado normal y otra para el vuelo) y cambiarlas usando CSS :hover estilo de :hover para elegir una imagen de fondo diferente, o mejor, ya que no requiere precarga y reduce las solicitudes HTTP. imágenes en una y use background-image / background-position para mostrar la parte derecha de esa imagen en cada estado como una imagen de fondo. ("Sprites CSS")

Simple con un poco de SVG:

<svg width="200" height="200" viewBox="10 10 280 280"> <filter id="multiply"> <feBlend mode="multiply"/> </filter> <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" /> </svg>

y algunos CSS:

#kitten:hover { filter:url(#multiply); }

El violín: http://jsfiddle.net/7uCQQ/381/

Solo para el registro, este tipo está desarrollando una biblioteca para hacerlo. Acabo de entrar mientras hacía una investigación, aún no lo he intentado.

https://github.com/Phrogz/context-blender

Se están introduciendo nuevas propiedades CSS para hacer exactamente esto, son blend-mode y background-blend-mode .

Actualmente, no podrá utilizarlos en ningún tipo de entorno de producción, ya que son muy nuevos y actualmente solo son compatibles con Chrome Canary (navegador web experimental) y Webkit Nightly.

Estas propiedades están configuradas para funcionar casi exactamente igual que los modos de fusión de photoshop, y permiten establecer varios modos diferentes como valores para estas propiedades, como overlay , screen , lighten , color-dodge , por supuesto, multiply ... entre otros .

blend-mode permitiría que las imágenes (y posiblemente el contenido? No he oído nada que sugiriera que en este punto). se superpusieran una sobre otra para que se aplicara este efecto de mezcla.

background-blend-mode sería bastante similar, pero estaría destinado a imágenes de fondo (configuradas con background o background-image ) en lugar de elementos de imagen reales.

EDITAR: La siguiente sección se está volviendo un poco irrelevante a medida que el soporte del navegador crece. Consulte esta tabla para ver qué navegadores tienen soporte para esto: http://caniuse.com/#feat=css-backgroundblendmode

Si tienes la última versión de Chrome instalada en tu computadora, puedes ver estos estilos en uso activando algunos indicadores en tu navegador (simplemente los puedes enviar a tu barra de direcciones :)

chrome://flags/#enable-experimental-web-platform-features chrome://flags/#enable-css-shaders * note that the flags required for this might change at any time

Habilite a esos chicos malos y luego revise este violín: http://jsfiddle.net/cqzJ5/ (Si los estilos están habilitados correctamente en su navegador, las dos imágenes deben mezclarse para que la escena parezca que está bajo el agua)

Si bien esta puede no ser la respuesta más legítima en este momento debido al soporte casi inexistente para esta característica, podemos esperar que los navegadores modernos adopten estas propiedades en el futuro cercano, brindándonos una solución realmente agradable y fácil a este problema. .

Algunos recursos de lectura adicionales sobre los modos de fusión y las propiedades de css: