Comment répliquer le mode couche multipliée PS

Question

Est-ce que quelqu'un connaît un bon moyen de reproduire le mode de calques multiples de Photoshop en utilisant une image ou un CSS?

Je travaille sur un projet comportant des vignettes qui se superposent en couleur lorsque vous les survolez, mais le concepteur a utilisé un jeu de calques pour se multiplier et je ne vois pas comment le produire sur le Web.

La meilleure chose que j'ai imaginée est d'utiliser rgba ou un png transparent, mais même dans ce cas, cela ne semble pas correct.

Answer 1

Il y a des nouvelles propriétés CSS d'être présenté à faire cette chose, ils sont blend-mode et background-blend-mode.

Actuellement, vous ne serez pas en mesure de les utiliser dans tout type d'environnement de production, car ils sont très très nouveau, et actuellement pris en charge uniquement par Chrome Canary (expérimental navigateur web) et Webkit tous les Soirs.

Ces propriétés sont mises en place pour travailler presque exactement le même que les modes de fusion de photoshop, et à permettre aux différents modes de jeu comme les valeurs de ces propriétés telles que l' overlay, screen, lighten, color-dodge, et bien sûr, multiply.. entre autres.

blend-mode permettrait d'images (et éventuellement le contenu? Je n'ai pas entendu quoi que ce soit pour suggérer que, à ce stade, cependant). superposées les unes aux autres pour avoir cet effet de fondu appliqué.

background-blend-mode serait tout à fait similaire, mais serait destiné pour les images d'arrière-plan (défini à l'aide de background ou background-image), plutôt que de véritables éléments de l'image.

---

EDIT: La section suivante est en train de devenir un peu inutile comme navigateur soutien grandissant.. consultez ce tableau pour voir les navigateurs qui supportent ce: http://caniuse.com/#feat=css-backgroundblendmode

---

Si vous avez la dernière version de Chrome installé sur votre ordinateur, vous pouvez réellement voir ces styles en cours d'utilisation par l'activation de certains drapeaux dans votre navigateur (il suffit de jeter dans votre barre d'adresse:)

chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders

* note that the flags required for this might change at any time

Permettre à ces mauvais garçons et de vérifier ensuite ce violon: http://jsfiddle.net/cqzJ5/ (Si les styles sont bien activés dans votre navigateur, les deux images doivent être mélangés à la scène comme il est sous l'eau)

Même si cela peut ne pas être la plus légitime, la réponse à l'heure actuelle en raison de la presque totalement absentes le support de cette fonctionnalité, nous pouvons espérer que les navigateurs modernes adoptera ces propriétés dans un avenir proche, nous donnant un vraiment agréable et facile solution à ce problème.

Un peu de lecture ressources sur les modes de fusion et les propriétés css:

• http://blogs.adobe.com/webplatform/2013/06/24/css-background-blend-modes-are-now-available-in-chrome-canary-and-webkit-nightly/
• http://demosthenes.info/blog/707/PhotoShop-In-The-Browser-Understanding-CSS-Blend-Modes
• http://html.adobe.com/webplatform/graphics/blendmodes/

Answer 2

Simple avec un peu 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>
 

et quelques CSS:

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

Le violon: http://jsfiddle.net/7uCQQ/

Answer 3

Pour mémoire, ce gars est en train de développer une bibliothèque pour le faire. Je viens juste d’y entrer en faisant une recherche, je n’ai pas encore essayé.

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

Answer 4

Il est possible avec un 24.png - si vous savez le truc.

Dans illustrator, vous pouvez exporter le graphique 24.png, mais cela ne semble jamais à travailler comme se multiplier.

J'ai trouvé de suite.

1. obtenez votre multiplié graphique sur son propre
2. place un solide noir 100% boîte derrière elle, et sélectionnez les deux graphiques
3. dans la transparence de la fenêtre, sélectionnez "Rendre Masque" puis "Inverser le Masque'
4. l'exportation comme une 24.fichier png

fonctionne comme une multiplication quand z-index(ed) sur le dessus d'une image.

Answer 5

Pas cette possibilité est disponible. La seule composition d'options que vous obtenez qui sont encore proches sont:

• lighter de composition en mode HTML5 <canvas> (ce qui est a+b n'est pas une*b et a sur la face en effet à se multiplier)

• min ou subtract Compositor filtres dans IE uniquement.

Ni sont vraiment pratiques.

En général, vous ne devriez pas tenter d'exporter Photoshop compositions de calques, mais rendu à un seul opaque de l'image. Pour les roulements, vous pouvez faire deux images (une pour l'état normal, l'un pour planait) et le swap entre eux à l'aide de la CSS :hover style pour choisir une image de fond différente, ou mieux, car il ne nécessite pas de préchargement et réduit les requêtes HTTP-combiner les deux images dans l'une et l'utilisation background-image/background-position pour afficher la partie droite de l'image, dans chaque etat, comme une image d'arrière-plan. ("Sprites CSS")