This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

PMG Digital Made for Humans

Recreating Photoshop Effects in CSS

2 MINUTE READ | December 10, 2015

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.

Insights meet inbox

Sign up for weekly articles & resources.

Posted by PMG Advertising Agency

Related Content

thumbnail image

Get Informed

Applications for PMG’s 2022 Graduate Leadership Program Now Open!

1 MINUTE READ | December 16, 2021

Get Informed

Kohler Co. Names PMG as Agency of Record

2 MINUTES READ | December 8, 2021

thumbnail image

Get Informed

PMG Innovation Challenge Inspires New Alli Technology Solutions

4 MINUTES READ | November 2, 2021

Get Inspired

How PMG Uses Alli to Determine if It’s a Bones or No Bones Day

3 MINUTES READ | October 21, 2021

Get Inspired

Shared Progress: Making an Impact Across DE&I Initiatives

7 MINUTES READ | October 18, 2021

thumbnail image

Get Informed

Supply Chain Slowdowns Move Up National Agenda

8 MINUTES READ | October 14, 2021

Get Inspired

10 Years a PMGer: Chris Alvares, Head of Technology

4 MINUTES READ | September 29, 2021