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.
De nouvelles propriétés CSS sont introduites pour faire cela, il s'agit de blend-mode
et background-blend-mode
.
Actuellement, vous ne pourrez pas les utiliser dans n'importe quel environnement de production, car ils sont très récents et ne sont actuellement pris en charge que par Chrome Canary (navigateur Web expérimental) et Webkit Nightly.
Ces propriétés sont configurées pour fonctionner presque exactement de la même manière que les modes de fusion de photoshop et permettent de définir différents modes en tant que valeurs pour ces propriétés, telles que overlay
, screen
, lighten
, color-dodge
et bien sûr multiply
.. entre autres.
blend-mode
autoriserait les images (et peut-être le contenu? Je n'ai rien entendu qui puisse suggérer que, à ce stade-ci), superposées pour que cet effet de fusion soit appliqué.
background-blend-mode
serait assez similaire, mais serait destiné aux images d'arrière-plan (défini à l'aide de background
ou background-image
) plutôt que d'éléments d'image réels.
EDIT: La section suivante est en train de perdre de son importance à mesure que le support des navigateurs grandit .. Consultez ce tableau pour voir quels navigateurs prennent en charge cette fonctionnalité: http://caniuse.com/#feat=css -backgroundblendmode
Si la dernière version de Chrome est installée sur votre ordinateur, vous pouvez réellement voir ces styles utilisés en activant certains indicateurs dans votre navigateur (il suffit de les ajouter 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
Activez ces mauvais garçons puis vérifiez ce violon: http://jsfiddle.net/cqzJ5/(Si les styles sont correctement activés dans votre navigateur, les deux images doivent être fusionnées pour la scène a l'air d'être sous l'eau)} _
Bien que cela ne soit pas la réponse la plus légitime pour le moment en raison de la prise en charge quasi-inexistante de cette fonctionnalité, nous pouvons espérer que les navigateurs modernes adopteront ces propriétés dans un proche avenir, ce qui nous donnera une solution vraiment simple et agréable à ce problème .
Quelques ressources de lecture supplémentaires sur les modes de fusion et les propriétés css:
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/381/
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é.
C'est possible avec un 24.png - si vous connaissez le truc.
Dans illustrator, vous pouvez exporter le graphique en tant que 24.png, mais cela ne semble jamais fonctionner comme si vous le multipliiez.
J'ai trouvé loin.
fonctionne comme une multiplication quand z-index (ed) au-dessus d'une image.
Aucune telle capacité n'est disponible. Les seules options de composition que vous obtenez et qui sont même proches sont:
Mode de composition lighter
sur un <canvas>
HTML5 (qui est a + b et non a * b, et a le même effet de se multiplier)
Filtres min
ou subtract
Compositor
dans IE uniquement.
Ni sont vraiment pratiques.
En règle générale, vous ne devez pas essayer d'exporter des compositions Photoshop sous forme de calques, mais les rendre en une seule image opaque. Pour les survols, vous pouvez créer deux images (une pour l'état normal et une pour le survol) et les permuter entre elles en utilisant le style CSS :hover
pour choisir une image d'arrière-plan différente. en un et utilisez background-image
/background-position
pour afficher la partie droite de cette image dans chaque état en tant qu'image d'arrière-plan. («Sprites CSS»)
J'ai eu récemment le besoin de faire exactement ce que le PO a demandé, alors j'ai cherché. J'ai trouvé un excellent moyen de reproduire l'effet de multiplication en créant un fichier PNG transparent dans Photoshop.
Alt/Option + click
sur le masque lui-même.Cmd/Ctrl + i
pour inverser le calque que vous venez de coller.opacity
du calque masqué que nous avons créé.Tout le crédit revient à Sojeong de https://superuser.com/questions/381704/multiply-blending-mode-to-png
Découvrez ceci: http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html
En utilisant ces instructions, j'ai eu beaucoup de succès en filigrane une image en noir et blanc (dessin à l'encre dans mon cas, avec des noirs et des gris sur un fond blanc uni) sur un fond sombre (bois dans mon cas). Il n’ya guère de différence avec le véritable filtre Multiply d’Adobe.
J'ai utilisé les instructions de Photoshop pour supprimer les blancs de mon image, ne laissant que les noirs et les gris sur un fond transparent. Enregistrer cela au format PNG et le placer sur le bois en CSS/HTML paraissait encore bien pire que multiplier, mais la luminosité du fichier PNG a été résolue (les gris clairs se distinguaient auparavant, le rendant laid).
En général, je vous recommande de jouer dans photoshop et de reproduire la situation Web: une couche semi-transparente (sans objet particulier) au-dessus d'un arrière-plan solide. Des didacticiels tels que ceux décrits ci-dessus peuvent vous permettre de reproduire des effets multiples ou fantaisistes.
Je ne sais pas si vous aurez de la chance. Autant que je sache, ce n'est pas possible, même si vous tentez d'intégrer du code JavaScript avancé.