Adobe

decor

Web Platform Team Blog

Making the web awesome

Lean Experiment: Overlay Effects

A very popular design trend on the web in recent years has been various forms of overlay effects, e.g., using large visual media (images, video) as a background and overlaying text on top of it using different techniques to create contrast between the content and the graphics. We see this in the form common UI elements – menu dropdowns, popup windows, stylized web site design, and really, everywhere it can be. Perhaps its foundation came from some native OS aesthetics introduced some time ago and have more recently become more ubiquitous, if not controversially so. As we spoke to web professionals about these trends, one person thought this design paradigm is so popular because it is “just so visually seductive.”

MakersQuarter.com makes liberal use of several of these overlay effects, resulting in rich and visually stunning design.

MakersQuarter.com makes liberal use of several of these overlay effects across its site.

As the charter of the Adobe Web Platform team is to Make the Web Awesome—specifically, by making a more expressive web—we’ve been looking into these types of effects and how we might make them better, easier to create, and more beautiful. With the work that we do on this team, we’re in a unique position to listen to our customers, take what we learn from them, and improve the Web to better enable them to be expressive and creative.

The Lean Experiment

At Adobe, we’ve recently adopted the also very popular Lean Startup Methodology. Teams across the company from Engineering to Marketing have been using it to inform decisions on virtually all aspects of the business. When examining these overlay effects to determine if there was anything we at Adobe could do to help, my colleague Bear Travis and I conducted a Lean Experiment. We did not have a particular solution in mind, but rather were using this methodology to identify and/or define the problem.

We began our exploration looking at only the frosted glass effect made popular by iOS 7. We quickly discovered a cluster of similar overlay effects and expanded our experiment to include frosted glass, blurred backgrounds, gradient fades, image tinting, and transparency overlays.

Tinted image, Newton Running. Transparency overlay, Veer. Blurred background, Dego Interactive. Gradient fade, FMK Catering

During our research phase, Bear also wrote an article on CSS Tricks on how to achieve some of these effects using CSS filters. As we looked at many examples on the web of these effects, we noticed that people were creating them in many different ways. Some achieved the effects with web technologies such as CSS opacity, filters, and linear gradients. We noticed that many others were making edits directly to the images themselves. In an effort to understand why people used so many different methods, especially those who used non-web solutions, we formed our experiment around this.

The Hypothesis

After coming up with our list of assumptions about how people are using these effects, we came up with the following hypothesis to test:

“Web creative professionals do not use some overlay effects because they are difficult to reproduce on the web.”

We will know this is true when:

  • Respondents say they had to alter their visual / overlay effect designs to suit what was possible / easy to do on the web.
  • Respondents dismiss some effects for technical rather than aesthetic reasons.

The Method

The main method we used to test our hypothesis was a series of interviews with Web professionals, from designers to developers and everything in between. Each kindly agreed to give us an hour of their time. The interviews consisted of a set of open-ended questions, designed to allow responses to go in any direction that could lead to new learning. In addition to the questions, we had visual examples of each of these effects that we showed interviewees around which to ask more specific questions. For the visual examples, we used variations of the pelican demo in Bear’s article on CSS Tricks.

pelicans

The Results

The Lean Experiment measures results in two ways – quantitative and qualitative.

The quantitative results were unanimous: of all the people we interviewed, none responded that the web platform’s capabilities prevented them from creating the overlay effects they wanted.

The qualitative results could be summarized as follows:

  • Large visuals, including as backgrounds, were seen as a popular trend on the web. Some were attracted to the trend while some wanted to break away from it.
  • Web designers and developers were happy with the current set of overlay effects because they were familiar, easy to create, and known to work (performance, accessibility, and compatibility being the primary concerns).
  • It is unclear whether web creatives would use a different set of effects if they matched the same criteria, but it is clear that they are not actively searching or thinking about different effects.

Conclusion

Because we revealed no compelling information to pursue further in this area and since none of the people we interviewed seemed to express any difficulties in using these effects, we were able to prove our hypothesis false. This research shows that web professionals are able to do all the overlay effects they want to do. However, we believe that over time they’ll want to do other things that they may not be able to or may only be able to do using new emerging features. This is why we’ll remain interested in the issue, even though we see nothing actionable right now. We’d still certainly be interested in hearing more on this topic and could be willing to re-open the investigation, but for now we are satisfied that that there is not a current problem here that would require a more uniform solution.

If you have opinions or input on this topic, please let us know by taking a few minutes to complete our quick survey. If we gather more information to cause us to revisit this, we can then contact you to discuss your ideas further.

Fading effects using blend modes

Fading effects are quite common on the Web today. They are used to display or hide an HTML element or to change an element into another element, gradually.

Fading transitions are pixel-by-pixel blends between an HTML element (the source element) and either the element behind it or the color in the background. A solution based on animating the opacity property is used to make the source element more or less transparent so that the background element becomes more or less visible, thus simulating the desired effect.

The Compositing and Blending spec describes a new way to blend an element with the content behind it by using the mix-blend-mode property, which can be enabled on stable versions of Chromium, Firefox and Opera, and will soon be officially supported in Firefox 31 and Safari 8.

A blend mode is a formula used for mixing source and background colors. This mix of source and background prevents animation using CSS animations or CSS transitions. However, when the content is generated by a CSS property such as color, background-color, or background-image: radial-gradient(...), we can animate the value of this property, and the animated content will be used in the blending operation.

Let’s assume we have an image we want to display or hide using a fade effect. If the initial background is white, we can use the screen or lighten blend mode. That’s because applying a screen or lighten blend mode on white produces white and applying a screen or lighten blend mode on black leaves the image unchanged. So if we animate the background color from white to black the image is displayed; and if we animate the background color from black to white the image disappears. Similarly, when starting from a black background, we can use the multiply or darken blend mode.

In the example below, I use the darken blend mode combined with a simple transition from white to black on the background-color to hide the image. For more interesting effects, you can generate arbitrary colors between the initial white and the final black by animating the background-color property using CSS animations. Move the mouse over the images to see the difference between the mix-blend-mode based effect (on the left) and the opacity-based effect (on the right). For the image on the left, notice the parts with bright colors start fading away sooner than the area with dark colors.

Check out this Pen!

We can use this technique as an alternative to creating grayed-out or inactive content. To accomplish this effect, we need to use a background color that acts as an identity operator and doesn’t change the result of the blend mode.

  • Black doesn’t change the result for screen, lighten, difference or exclusion.
  • White doesn’t change the result for multiply or darken.
  • Gray (#808080) doesn’t change the result for hard-light or overlay.
  • A transparent background doesn’t change the result for any blend mode.

The codepen below demonstrates the hard-light blend mode combined with a background transition from black to gray (the first row), compared to opacity based fading (the second row).

Check out this Pen!

Here is another example using the color-burn blend mode and a background-color transition from slategray to transparent:

Check out this Pen!

If the content you want to blend is a color and one or more images, you can get the same effects using background-color, background-image and background-blend-mode – all set on a single div. The background-blend-mode property is officially supported starting with Chrome 35, Firefox 30 and Opera 22.

My design skills don’t do Blend Modes justice, so I can’t wait to see more cool samples using this feature. Please share yours here or on Twitter.

Adobe Web Platform Round Up: coding, testing, tooling, and more

My team at Adobe exists to enhance the web platform. Adobe believes the web will become the ultimate platform for creative expression. We’re doing what we can to move the web towards that end. This takes several forms, including contributing open source code, contributing to web standards, and contributing to Adobe tools.

For the last few years, we have been fixing bugs and adding features to open source browsers – WebKit, Gecko and Blink. We’re aiming to increase browser compatibility and to increase the expressivity of the web platform. In addition to browser code, we work on open source projects that demo and polyfill new features for the web.

Along with sharing code, we work on web standards. We help edit the standards documents that say how a browser feature should behave. We write tests where needed and work on the test infrastructure at the W3C. And we help steward the Web Platform Docs effort to document the web platform.

Then we take the experience we’ve gained by diving deep into standards and browser code to move Adobe web tools forward. We offer advice on what new features to add, write code for internal and open source projects at Adobe, and have participated in an upcoming redesign of adobe.com.

Here are some quick highlights of our work from the first half of 2014. Follow any of the links for more in-depth information.

Shipping Code

Apple recently announced that Safari 8 will include both CSS Shapes and Compositing and Blending, two features our team worked on in WebKit. This is the second year in a row where the WWDC keynote mentioned our work. Last year, they shipped CSS Regions. Safari 8 will have an improved version of Regions as well (particularly in selection, thanks to a collaboration with a team at Igalia). But Safari isn’t the only browser where you can find our code.

CSS Shapes is also shipping in Chrome 37 (again, thanks to a collaboration, this time with a team at Samsung). Nearly all of Compositing and Blending is now present in current builds of Chrome and Firefox (with some finishing touches for Firefox hanging out in the beta channel, so they’ll be available soon). The clip-path implementations in WebKit and Blink have been updated to match the latest specification. And we’ve added a bunch of Canvas improvements (hit regions, Path2D, focus rings, etc.) to Firefox, Safari and Chrome.

We also fix bugs where we can. My favorite fixes from this year are a 10x improvement to compositing performance in WebKit, and a wide-ranging fix for viewport units in WebKit. We’ve been laying the groundwork for better filter support in Gecko, which has resulted in a number of bug fixes. Our engagement with the WebKit community resulted in two more reviewers from our team so far this year.

Polyfills and Demos

This year we have released a new CSS Regions polyfill that is more spec-compliant. We have also released a polyfill for CSS Shapes, so you don’t have to wait for every browser to catch up before trying it out. Our adobe-webplatform GitHub account has a lot of demos. Our CodePen has more examples and ideas we’ve shared.

Moving Standards Forward

We have been advancing W3C specifications both for the features where we work directly and other parts of the web platform we find interesting and useful. CSS Shapes and Compositing and Blending both made the Candidate Recommendation (CR) mark this year, which means the standards bodies think they’re ready to implement and test. CSS Masking is next up – it just went to Last Call, which is the step just before CR.

Our team has helped a few other specs move towards Last Call. Animations, Filter Effects, Canvas, Regions, and Baseline Grid all have been improved recently by our team members. A new Geometry Interfaces spec is in First Public Working Draft – its introduction to the standards process. We’re also working on adding better midpoints to gradient color stops, which was approved by the CSS and SVG Working Groups when we hosted their meetings at our Seattle office in January.

Testing

In the run-up towards shipping, we added a ton of tests to the W3C test suite for CSS Shapes. We added tests to several other suites as well (mainly around browser bug fixes we have been involved in). Rebecca Hauck (who now coordinates all of the CSS testing activities) recently checked in a massive refactoring of the entire CSS test suite structure. This will make it easier to integrate all of the CSS tests into the more general Web Platform Tests effort in the near future.

Tools

In addition to everything above, we also work with other teams in Adobe. We’re always looking for ways to improve the markup and CSS from all of our web tools. Brackets recently gained a shapes editor extension. SVG export from Illustrator CC has gone through a round of improvements. And we have a few more projects we’re currently working on that should be public soon.

What’s Next?

Expect more of the above over the next six months. We’ll continue to contribute to browsers and standards, and you’ll see more and more opened up in Adobe tools as features get widely implemented and interoperable. Keep up with this blog and our twitter account for news on what we’re currently working on (or considering leaping in to).

Background blending now available in Firefox 30

Last week, we announced that Chrome 35 was shipping background blend modes. This week, Firefox 30 was released with support for the background-blend-mode property. This makes it the second browser to add support.

Bennett Feely created some examples of gradients that have blending applied to them:

See the Pen Gradient with background blending by Adobe Web Platform (@adobe) on CodePen.


We’re excited that this feature is being adopted by more browsers! As always, let us know your thoughts or if you have interesting demos, here or on Twitter.

Improving Viewport Unit Support in WebKit

Viewport units are great for creating responsive designs. Unfortunately, issues with the WebKit implementation reduced their usefulness. A couple of months ago, I discovered that Timothy Loh had fixed many of the issues in Blink. Despite the size of the patch, it seemed like a prime opportunity to learn more about the CSS subsystem in WebKit and about viewport units in general. So, I took up the task to port the Blink fix over to WebKit. This turned out to be less than straightforward. In the year since Blink forked from WebKit there has been notable divergence in the structure of the CSS code. I ended up using the Blink patch as a guide and writing my own variant in WebKit. After a great number of revisions, the patch finally landed in WebKit about two weeks ago.

So, what works now?

The most obvious fix is that resizing now works. If you size an object with viewport units and then the user resizes the browser window, the object will resize as the window resizes. Prior to this patch, you would need to reload to get the resize to happen. This is an especially big boon for mobile web apps, since changing device orientation between landscape and portrait is simply a resize of the viewport. In addition, now getComputedStyle conforms to the spec and returns resolved pixel values for viewport units. This patch also makes it possible to use calc with viewport unit values. One of the demos from our shapes showcase clearly shows the resizing effect, as does our demo of positioning shapes with negative margins.

Animations and transitions with viewport units also didn’t work properly. In older versions of WebKit, the following example doesn’t animate, but in the latest WebKit nightly, it animates nicely.

See the Pen jpBxv by Adobe Web Platform (@adobe) on CodePen.

It is likely that other bugs have been fixed by this as well. Get the latest WebKit nightly and test it out for yourself. If you come across any more issues with viewport units that haven’t been fixed by this patch, please head over to bugs.webkit.org and file a bug! I would like to make the viewport unit support in WebKit as robust as it can be, and can only do that with your help.

CSS Shapes and CSS Compositing & Blending in Safari 8

Last week during his WWDC keynote, Craig Federighi’s slide announced that Safari 8 would include two features that the Adobe Web Platform team has been working on: CSS Shapes and CSS Compositing & Blending.

Both features have stable specs in the Candidate Recommendation phase, and implementations on track to ship in other browsers. CSS Shapes has been approved to ship in Chrome later this year, and Blend Modes have been approved for Firefox.

Apple’s support shows the growing momentum to empower designers on the web with the same palette they use in other media.

For more about the kind of elegant designs that these feature unlock, check out some of these articles and demos!

CSS Blend Modes could be the next big thing in Web Design by Bennett Feely

PhotoShop In The Browser: Understanding CSS Blend Modes by Dudley Storey

Add Shape and Depth to Your Layout with Photoshop and CSS Shapes by Rebecca Hauck

Getting to know CSS Blend Modes by Shwetank Dixit

CSS Shapes 101 by Sara Soueidan

Moving Forward with CSS Shapes by Sara Soueidan

CSS Shapes Polyfill by Bear Travis

If you see (or create) more awesome examples, please share them in the comments or on Twitter!

BBQ, Beer & Web Platform Docs FTW

It is already quite a tradition for us at Adobe to host WebPlatform.org Doc Sprints. But pushing forward a central go-to place to document web technologies—built by and to be used freely by everybody—seems not to be enough. Maybe we should also run these events because of the fun stuff that happens around the 1 or 2 days of documenting the web collaboratively? If so, I’d say: “of course!” :)

After a very successful first European Doc Sprint in Berlin back in 2013, it was time for another event in Germany. I am a friend of synergy. So, just as before every other of Marc Thiele‘s events of the past we sat down together and made plans on what could be useful takeaways added to this years edition of the famous beyond tellerrand conference. 500 highly skilled and motivated attendees come to Düsseldorf. They could use a nice warm-up event prior to the conference. Meanwhile, in another quadrant of the web, WebPlatform.org could still use help from web professionals. So why not add some beer and BBQ to glue those two together? Synergy!

Beach bar with a roof

Our initial plan was a beach bar setting. Due to the lack of proper beach bars in Düsseldorf, we ended up building our own summer setting at a decorative old gas station from the 1950s. Out of 70 registrations more than 50 contributors joined the comfy and sunny location and spent a day full of interesting and productive work together.

Location of WPDS @btconf

Our sunny workplace for the day

WPDS btconf hard at work

Hard at work…

WPDS-btconf-paul-work-

Cheers Paul! :) (Picture by Francesco Iovine)

Focus groups and work results

Six community experts led focused groups that made over 800 edits to the Wiki and on-boarded a dozen new contributors that day:

Work results included:

  • removal of all vendor-prefixed example code in every single CSS property
  • revision of fundamental web concepts, as well as beginner docs and tutorials
  • the addition of five JavaScript API pages and docs for the JavaScript Number object
  • docs and examples for 33 HTML elements
  • a special review, focused on responsive images, editing img and picture, and updating a number of SVG elements and attributes

There is a blog post on WebPlatform.org that sums up our work results in much more detail.

Hans Christian Reinl following the wrap up (Picture by Andreas Dantz)

Hans Christian Reinl following the wrap up (Picture by Andreas Dantz)

Delicious burgers and sausages

To keep our contributors happy, Pascal Szewczyk handcrafted some awesome burgers as well as delicious vegetarian BBQ. Teaming up at the grill was Sven Wolfermann, who prepared the award-winning sausages, Sven, and myself had brought with us from Berlin. (I can still remember the stewardess saying “boarding completed with 156 passengers and 40 sausages”… yes that DID happen!)

Profound research on the history of BBQ sauce

Right before lunch, Aaron Gustafson gave a fun speech with “A brief history of BBQ sauce.” (Yes, of course, you can find his slides online.) His profound research was well presented and led to a public tasting of a selection of those fine sauces, together with a bottle of Chattanooga Whiskey Aaron flew over for the event. Thanks again for that tasty and fun addition, Aaron.

Aaron Gustafson with his fun speech about the history of BBQ sauce

Aaron Gustafson with his fun speech about the history of BBQ sauce

Oh, the deck chairs!

At the end of the Doc Sprint, the focus group leads presented the day’s results. We had some swag to give away, including famous WPD stickers (as well as some rare PhoneGap and ODL ones), WPD T-Shirts and the 20 special made WebPlatform.org deck chairs we used over the day that went out to our top contributors. Since at night more than 20 awesome contributors walked away with deck chairs I believe Justin Avery of responsivedesign.is fame and Horia Dragomir must be the ones that share a chair now? :)

Picture by Andreas Dantz (@dantz)

Picture by Andreas Dantz

A hell of a party!

After having wrapped up the results of the day, our Doc Sprint smoothly transitioned over to the official beyond tellerrand pre-conference warm-up, when in the meantime the crowd at our gas station had grown to a cozy party of 150. Tom Arnold took care for a fantastic soundtrack with his “btconf boogie”, also dubbed “songs for the dev”… :) Thanks a bunch, Tom!

To sum things up: we had fun. A lot! If you didn’t join for this epic “Web Platform Doc Sprint + MeatUp + VGQ” you definitely missed out.

WPDS btconf burger

Thanks to all the contributors and volunteers!

This successful Doc Sprint would not have been possible without all the attendees that contributed to WebPlatform.org, the help of our community experts and our lovely volunteers: Tomas Caspers, Kenneth Shinabery, Daniel Connerth, David Kirstein and my partner in crime in organizing the event, Marc Thiele. Thank you all!

CSS Regions no longer available in Chrome 35

The latest stable version of Chrome (v. 35), released last week, removed support for CSS Regions. To accurately reflect this change, we updated the list of supported browsers and published a new set of results in the browser support matrix.

For those of you who love the powerful responsive designs made possible by CSS Regions, you can still experiment with this technology in Chrome by means of Francois Remy’s excellent polyfill. This article, published on our team blog, provides a nice overview of the CSS Regions features made available by the polyfill.

It goes without saying that CSS Regions fans can still enjoy the high performance native support provided by Safari 7 on both mobile and desktop versions!

background-blend-mode now available on Chrome

The Adobe web platform team has been working on the CSS Blending specification. On February 20, the spec progressed to the “release candidate” stage which signals that it is ready for implementation. At the same time, we’ve been implementing the CSS properties in Chrome, Firefox and WebKit.

The first CSS property of this specification to ship to the general public is background-blend-mode.
This property allows a user to blend background images with both one another as well as the background color. The background images and color will not blend with the background of the element itself. Instead, the blending is isolated to the content within the background.

The latest release of Chrome (version 35) on desktop and mobile now comes with support for the background-blend-mode property. If you’re using Chrome, this means that this feature is available for you today.

This new property will also be released in Firefox 30 which is currently scheduled for early June and in Opera 22.
We updated caniuse.com so you know what browser version supports this new feature.

We gathered a collection of CodePens that show how you can use this new property.
The following example was created by Bennett Feely:

Check out this Pen!

In addition to background blending, the more powerful mix-blend-mode property is also on its way. Firefox 31 will be the first browser to ship this new feature.
If you want to experiment with element blending today, the current Opera, Chrome and Firefox builds have experimental support.

To enable in Chrome or Opera:

  1. Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
  2. Click the ‘Enable’ link within that section.
  3. Click the ‘Relaunch Now’ button at the bottom of the browser window.

Turning on the experimental features flag in Opera will also enable support for background-blend-mode, which will be enabled by default in Opera 22.

To enable in Firefox:

  1. Copy and paste about:config into the address bar, then press enter.
  2. Click on ‘I’ll be carefull, I promise!’.
  3. Enter ‘Blend’ in the search field, then press enter.
  4. Set the value of ‘layout.css.mix-blend-mode’ to ‘true’.
  5. Restart Firefox.

The WebKit nightly builds also have complete support for background-blend-mode and mix-blend-mode.

Here is a small example that shows element blending in combination with CSS animations:

Check out this Pen!

If you need some inspiration, check out some of our previous posts on blend modes.
Our friends from Opera also just released a great article on blending. Check it out here for a tutorial and some awesome examples. They even provided a feature detection extension to Modernizr!

Let us know if you run into any issues. You can contact us on the comment section or Twitter at ‘@adobeweb’!
Also, demos are always welcome :-)

Start making (great) infographics

Sarah Hunt shares 3 ways to design an infographic that stands out from the crowd. With the growth of data-driven news sites, infographics are becoming easier to create. That doesn’t necessarily translate into good design. We won’t shame anyone here, because everyone has the right to experiment. But just do a web search for “worst infographics ever.” The results will give you a sense of how infographics — which, by their nature, should clarify data — go terribly, terribly wrong.

Sarah’s “FIRED” method helps avert disaster by assessing the quality of the design as a first step. She then points to tools like Edge Animate, features like CSS Shapes, and infographic services that collect and evaluate the underlying data.

3 ways to design an infographic that stands out from the crowd is a quick read, a little rocket to get you started. And if the article inspires you to do an infographic, share it with us here or on Twitter.