5

I think it would be great for div's/img's to get some of the functionality that "layers" have in photoshop.

Right now, using .png's, div's/img's/etc.'s have their RGB and alpha values. If you have a 50% transparent layer on top of an 100% opaque layer, the resulting color is a 50/50 blend. Similarly, if you have a 100% opaque layer on top of another 100% layer, the top layer is the only one that shows.

In photoshop, however, you have blending modes -- multiply, color dodge, screen, overlay, soft light, et al. -- all of which blend the layers using methods different from the method described above.

I made a web site that has a spotlight on the page, but I won't be able to light up the dynamic content that it's pointing at (unless I use JS to do so) because the only blending mode available to me is the "normal" RGB*A method. There is no option to blend a gobo (picture of the light) using a color dodge, overlay, or soft light method.

Is this a feature that will be coming out soon to any web browsers?

6

So far I don't think browsers intend to implement this as a standard browser behaviour, although it'd be great to see it as a CSS attribute for the background!

But you can use a very popular library to achieve the effect you're after.

The Photoshop Blend modes library from Pixastic.

Either you can use it "as is" or probably can modify it to suit your needs better :)

Hope it helps some :)

  • This is a great link. It works with canvas though, so it will require JavaScript and be rather resource intensive (so it's more for online image processing that for using it as a design element in everyday pages). Still, +1 – Pekka supports GoFundMonica Feb 17 '11 at 12:59
  • I read there that it can be applied to either img or canvas.. If this is true, it shouldn't take much to modify it to apply ti div backgrounds (but maybe it would) :D Thanks :) – Kyle Feb 17 '11 at 13:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.