PMG Digital Made for Humans

Recreating Photoshop Effects in CSS

2 MINUTE READ | December 10, 2015

Recreating Photoshop Effects in CSS

Author's headshot

PMG

PMG is a global independent digital company that seeks to inspire people and brands that anything is possible. Driven by shared success, PMG uses business strategy and transformation, creative, media, and insights, along with our proprietary marketing intelligence platform Alli, to deliver Digital Made for Humans™. With offices in New York, London, Dallas/Fort Worth, Austin, Atlanta, and Cleveland, our team is made up of over 900+ employees globally, and our work for brands like Apple, Nike, Best Western Hotels & Resorts, Gap Inc., Kohler, Momentive, Sephora, and Shake Shack has received top industry recognitions including Cannes Lions and Adweek Media Plan of the Year.

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.

Stay in touch

Bringing news to you

Subscribe to our newsletter

By clicking and subscribing, you agree to our Terms of Service and Privacy Policy


Related Content

thumbnail image

PMG CultureCompany News

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

1 MINUTE READ | December 16, 2021

thumbnail image

Campaigns & Client WorkCompany NewsDigital MarketingStrategy

Kohler Co. Names PMG as Agency of Record

2 MINUTES READ | December 8, 2021

thumbnail image

Consumer TrendsStrategyPlatforms & MediaDigital Marketing

2021 Cyber Week Signals Shifts in Holiday Shopping Season, Purchase Behaviors, and Retailers’ Results

5 MINUTES READ | December 3, 2021

thumbnail image

PMG CultureCampaigns & Client WorkCompany NewsDigital Marketing

PMG Earns Spot on Chief Marketer’s Top Marketing Agencies List

1 MINUTE READ | December 2, 2021

thumbnail image

Company NewsDigital MarketingPMG CultureAlli

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

1 MINUTE READ | November 3, 2021

thumbnail image

AlliPMG CultureCampaigns & Client WorkCompany NewsDigital MarketingData & Technology

PMG Innovation Challenge Inspires New Alli Technology Solutions

4 MINUTES READ | November 2, 2021

thumbnail image

AlliPMG CultureCompany News

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

3 MINUTES READ | October 21, 2021

thumbnail image

PMG CultureCompany News

Shared Progress: Making an Impact Across DE&I Initiatives

7 MINUTES READ | October 18, 2021

thumbnail image

Consumer TrendsDigital MarketingStrategy

Supply Chain Slowdowns Move Up National Agenda

8 MINUTES READ | October 14, 2021

thumbnail image

PMG CultureCampaigns & Client WorkCompany NewsStrategyDigital MarketingB2B Marketing

PMG Named Among Adweek’s Fastest Growing for Third Consecutive Year

1 MINUTE READ | October 4, 2021

thumbnail image

PMG CultureAlliData & TechnologyDigital MarketingCompany News

10 Years a PMGer: Chris Alvares, Head of Technology

4 MINUTES READ | September 29, 2021

ALL POSTS