• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
December 10, 2015

Recreating Photoshop Effects in CSS

Posted by PMG Advertising Agency

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.

view of three panels that make up the iad

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%.

view of left panel overlapping with reduced opacity

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.

view of left panel overlapping 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.

view of final iad with all panels overlapping using blend mode multiply

Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020
  • A Closer Look at the Congressional Big Tech Market Power Report
  • What to Know About Reddit

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.