Does anybody know of a good way to replicate Photoshop's multiply layer mode using either an image or CSS?
I'm working on a project that has thumbnails that get a color overlay when you hover over them, but the designer used a layer set to multiply and I can't figure out how to produce it on the web.
The best thing I've come up with is either using rgba or a transparent png, but even then it doesn't look right.
There are new CSS properties being introduced to do just this thing, they are blend-mode and background-blend-mode.
Currently, you won't be able to use them in any sort of production environment, as they are very very new, and currently only supported by Chrome Canary (experimental web browser) & Webkit Nightly.
These properties are set up to work nearly exactly the same as photoshop's blending modes, and allow for various different modes to be set as values for these properties such as overlay, screen, lighten, color-dodge, and of course multiply.. among others.
blend-mode would allow images (and possibly content? I haven't heard anything to suggest that at this point though.) layered on top of each other to have this blending effect applied.
background-blend-mode would be quite similar, but would be intended for background images (set using background or background-image) rather than actual image elements.
EDIT:
The next section is becoming a bit irrelevant as browser support is growing.. Check this chart to see which browsers have support for this: http://caniuse.com/#feat=css-backgroundblendmode
If you've got the latest version of Chrome installed on your computer, you can actually see these styles in use by enabling some flags in your browser (just throw these into your address bar:)
chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders
* note that the flags required for this might change at any time
Enable those bad boys and then check out this fiddle: http://jsfiddle.net/cqzJ5/
(If the styles are properly enabled in your browser, the two images should be blended to make the scene look like it is underwater)
While this may not be the most legitimate answer at the current moment due to the almost entirely nonexistent support for this feature, we can hope that modern browsers will adopt these properties in the near future, giving us a really nice and easy solution to this problem.
Some extra reading resources on blending modes and the css properties:
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/
Simple with a bit of 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>
and some CSS:
#kitten:hover {
filter:url(#multiply);
}
The fiddle: http://jsfiddle.net/7uCQQ/381/
Just for the record, this guy is developing a library to do so. I just came into it while doing a research, haven't tried yet.
https://github.com/Phrogz/context-blender
It is possible with a 24.png - if you know the trick.
In illustrator you can export the graphic as a 24.png, but this never seems to work like multiply.
I've found away.
get your multiplied graphic on its own
place a solid black 100% box behind it, and select both graphics
in the transparency window select 'Make Mask' and then 'Invert Mask'
export as a 24.png file
works just like a multiply when z-index(ed) on top of a picture.
No such ability is available. The only compositing options you get that are even close are:
lighter compositing mode on an HTML5 <canvas> (which is a+b not a*b, and has about the opposite effect to multiply)
min or subtract Compositor filters in IE only.
Neither are really practical.
In general you should not attempt to export Photoshop comps as layers, but render them down to a single opaque image. For rollovers you can make two images (one for normal state, one for hovered) and swap between them using the CSS :hover style to choose a different background image, or—better, as it requires no preloading and reduces HTTP requests—combine both images into one and use background-image/background-position to display the right part of that image in each state as a background image. (“CSS sprites”)
I recently had the need to do exactly what the OP asked so I searched around. I found a great way to replicate the multiply effect by making a transparent PNG in Photoshop.
Create a new document with the same dimensions of your multiply
layer.
Fill the document with black.
Add a vector mask (the icon to the left of layer "fx" at the bottom of the layers window).
Alt/Option + click on the mask itself.
Now copy and paste your multiply layer into the mask.
Cmd/Ctrl + i to invert the layer you just pasted.
Create a new layer below this layer and add the image behind the multiply overlay.
Everything should look pretty close to your desired result. If needed, you can adjust the opacity of the masked layer we created.
When it looks good just toggle the bottom layer's visibility and save the masked layer as a PNG et voila!
All credit goes to Sojeong from https://superuser.com/questions/381704/multiply-blending-mode-to-png
Check this out:
http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html
Using those instructions, I had great success watermarking a black-and-white image (ink drawing in my case, with blacks and greys on a solid white background) onto a dark background (wood in my case). There is hardly any difference with the real Multiply filter of Adobe.
I used the Photoshop instructions to remove the whites from my image, leaving only blacks and greys on a transparent background. Saving this to PNG and putting it on the wood in CSS/HTML still lookedmuch worse thanmultiply, but strongly reducing the brightness of the PNG solved it (the light greys stood out before, making it ugly).
In general I recommend you play around in photoshop, replicating the web situation: a semi-transparent (no special stuff) layer on top of a solid background. Tutorials such as the above may allow you to reproduce multiply or other fancy effects.
Not sure if you will have any luck. As far as I know, it isn't possible even if you tried to integrate some advanced JavaScript with it.
Related
I'm working with SVG sprites to create an icon system. I'm using gulp-svg-sprites to generate the sprites and am using the symbol option so when calling each SVG, I can use something as simple as:
<svg class="icon"><use xlink:href="sprite/svg/symbols.svg#icon-alert"></use></svg>
With fill: currentColor I'm able to also control the color of each icon, which again, is great.
The issue comes when I need to use these icons as a background element. I'm aware that you cannot use xlink:href to grab a specific icon from the sprite -- and am okay just grabbing the individual SVG when needed here, but the issue comes when I need to change the fill/color of that SVG that is referenced as a background image.
Things like -webkit-background-clip: text; work great for applying a different background and cutting off based on the text, but I need a solid color overlay that can be switched out on demand.
Is there a simple SVG filter I can attach onto this background (referenced as an SVG) that I can bolt-onto this? Would appreciate any help. Thanks!
Update
Here is a working example. BUT, I'm looking for something that could also work in IE9, which is why I was hoping for something else.
Wrote an article using a LESS function I wrote that edits the SVG object once its pulled in with LESS http://zslabs.com/articles/svg-background-fill
You can apply a filter to change the color of the entire element (including the background) - but in most cases you cannot selectively apply it to just the background as you want to. If you had an exact example online with the exact cases you're trying to cover - there may be some very specific solutions for your exact case (eg. if your foreground is all black-stroked, then a color matrix filter could possibly work.))
I want to create an opacity blur overlay, similar to Windows Aero or iOS7. Unfortunately the filter: blur() or filter: url(#svgBlur) properties can only apply to the element, not content behind it.
To get round this we need a copy of the background that is blurred. This is possible in FX using the background: -moz-element(#elementId) experimental CSS property. Using that I can get the effect I want in FX only.
There are other questions about solving the blur problem, and one solution appears to be the use of the html2Canvas plug in.
However that is recreating the entire blurred content, including manually recreated styles and the like. It's very impressive work, but it seems like massive overkill (both in performance and size) for this kind of effect.
What I want to do is create is some kind of shim just for -moz-element. It looks like that should be possible using an SVG foreignObject, but that has both security issues and fails if your HTML is not valid XML.
Is there any way round of emulating -moz-element (using canvas, SVG, or something else) where I don't have to parse/redraw the entire overlaid area?
Browsers that support the BackgroundImage pseudo input allow you to filter the content behind an element. Opera 12 supports that and maybe some other UAs too.
I think Opera 12 also supports the SVG 1.2 Tiny feature of having an external foreignObject i.e.
<foreignObject xlink:href="external file url"/>
You could combine this with the backgroundImage to have html content as a background even if the html content was not not valid XML.
Your milage may vary with other UAs though and as you say Firefox has a different solution.
You can check out a plugin I recently made called AeroJS. It does exactly what you're looking for and supports everything but IE.
EDIT: My apologies for not not including a description of the plugin.
Basically, the way AeroJS works is by taking the HTML of a specified element (backgroundElement), the background image of a specified element (backgroundImage) and prepending them to the specified element. Then, using WebKit's blur filter, a specified amount of blur (blurAmount) is applied to the elements in the background. It's still in the early stages of development so bugs are expected. One drawback of using AeroJS is that it's almost entirely static. You can move around the element and everythung behind it will be blurred however any changes that happen to the original DOM will not be reflected in the blurred/copied HTML. Custom code will be needed for that.
If those properties only apply to the selected element, why don't you select them all?
Maybe with:
#myElementID *
Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it.
But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth).
What is the best solution for this case? Using png or drawing it by css?
Is there a tool/website to convert my png to css code?
Make the white areas transparent (colour to alpha in GIMP)
Convert the image to a data URI (it's optional but it will make your site load faster)
Use the url in (2) as the background-image and use any background-color you want.
Use this to convert an image: http://codepen.io/blazeeboy/pen/bCaLE
I think it's much better to use converted images because browsers load them faster.
I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.
Rather than CSS, I would suggest SVG is the appropriate tools for this job.
SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.
The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.
The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.
So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.
Maybe u could use this: https://javier.xyz/img2css/, the principle is to use box-shadow,it's fine if the picture is small, so u should consider performance
So I'm looking at a specific application for a web browser which requires me to express color as a straight alpha channel with a black and white alpha channel as a separate element. (an example of both types
I know many moons ago, IE supported some perverse filter options, but since I'm doing css3 transforms, I need this to work in a modern browser, preferably Chrome.
Basically what I'd like to do is have an element with CSS transforms applied, specifically rotation most likely, then I'd like to take that and copy it to another equivalently sized element which has the black / white transformation applied. An additional bonus would be setting the original element to use straight alpha, but I can live without that for now.
I haven't been able to find any routes with which to start investigating. If you have one, I'd be super grateful. My last resort is to start doing things in WebGL or Canvas and modifying the output there.
Two or three different elements stacked on top of each other using absolute positioning and z-index? This would require you to save two different images which I'm guessing you're trying to avoid.
You can do CSS 3D transforms. Browser support is basically there in newer IE, Chrome, Firefox, iOS and Android.
where can you use them
how to use them
MDN
I've actually figured out the answer... it's CSS Shaders.
https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
Not yet available, but soon.
The reason not to use Canvas is for simplicity in authoring. (Long story.)
To set a semi-transparent background I use:
background-color: rgba(0, 120, 180, 0.8);
For IE, which doesn't support rgba I use a 1x1 png with the same color:
background-image: url(http://i53.tinypic.com/2mgtu9e.png);
(demo here)
Question 1
I know that there is another method for IE which uses filters.
Is this method considered as W3C compliant ?
Question 2
Say I combine 20 1x1 png images into a single sprite.
How could I use this sprite to set an element's background color according to the 7th pixel in the sprite ?
As others have said, no IE filters are not W3C compliant. They also incur significant overhead and have performance ramifications. Unless I am mistaken when a filter is applied to an HTML element it will be applied to everything in that element including its text. So you'd end up with semi-transparent text too. There may be a way to keep that from happening but I haven't come across it. Also there are times when IE filters don't play well with semi-transparent PNGs as this article mentions.
Speaking of PNGs, the idea of using a sprite really only works if you have a specific height or width or both. So this really won't work for what you need, like Merianos Nikos said. Also tiling a 1x1 image is a really terrible idea. I say this because there are performance issues when you do that, especially with IE6. Though IE6 may not be a concern for this, tiling such a small image still causes a performance hit since the browser must draw and redraw each and every one. See this StackOverflow entry.
For this situation I would use something like Modernizr which will make rgba available to use in browsers that don't support rgba. After customizing a download for just rgba and a few other things (HTML5 shim, yepnope, and adding CSS classes) the download was 6.1kb. Not a huge hit to make development easier.
Update I misspoke when I said that Modernizr enables rgba. It doesn't do that but it will let you know that rgba is enabled in the browser. It will add classes to the html tag that tells you the abilities of the browser.
Answer #1
This method is not W3C compliant. The way that Internet Explorer uses Filters is not the regular one. Filters are not supported at all from the W3C specification. The filters are Internet Explorer plugins.
Answer #2
There is no way to use them. In sprites you can only use images that are not repeated in the background.
In example: Say that you have the following sprite
x y z
r t s
u v a
if you have now an area that you like to use as a background the image t from your sprite. You can set the very top left side of the div to display the t image, but then when you need to reapeat the background you will start again from x. That means that you will have repeated all the images from the sprite.
Question 1: CSS3please. The box-gradient shows how to use the MS-filter.
To check if valid: W3C CSS validator . I'm getting errors, so I guess it's not considered valid CSS