Recreating Photoshop Effects in CSS

While working on an iAd recently I was tasked with reproducing some Photoshop effects in CSS. Normally any image manipulation would be saved and exported as part of the image itself. However, in this instance that was not possible because several of the elements had to be animated separately.

Here is an example of the three main components I was working with. On the left is a colored rectangle, in the middle a background image, and on the right a portrait. During the animation process the portrait moves left evenly covering the background image and the blue panel moves right partially covering both the portrait and background image.

In the original design I could see through the blue panel to the portrait and background image. The usual way I would accomplish this with CSS is to reduce the opacity of the blue panel.

Here is an example of what it looks like when the opacity of the blue panel is reduced to 75%.

Doing this revealed the portrait and background panels but didn’t look very good. The colors became very muted and dull with a distinct loss of contrast. This was not what the original design looked like. I needed to do some investigation.

Going back to the Photoshop document I was able to find the effect that was being used. The blue rectangle was applied as a layer mask and it had it’s Blend Mode set to Multiply.

Then I remembered that CSS3 has a blend-mode property. When I looked up the spec, sure enough, there was a multiply option as well. Since iAds run on WebKit I just needed to add the appropriate vendor prefixing for it to work.

Here is what it looked like using blend-mode: multiply.

Sometimes different graphic design software implements the same feature in different ways and I was worried that the W3C blend-mode spec would not match up with Photoshop’s version. Fortunately, my worries were unfounded and the end result was spot on.

Here is the final result.