Adobe

decor

Web Platform Team Blog

Making the web awesome

Making the Web Sweeter with Food Network and Cupcakes

Note: CSS Shapes syntax has changed. For the latest information, see CSS Shapes Module Level 1.

There are two things we know for sure that almost everyone loves: mobile applications and cupcakes. Food Network brought the two together in a beautiful tablet application called, appropriately enough, Cupcakes!. Cupcakes! is kind of a cupcake encyclopedia, full of recipes, ideas, tips, and of course, inspirational cupcake photography.

When we saw the Cupcakes! app, we wanted to see if we could use some of the newer web platform features to bring the same type of experience to the open web. Food Network is always looking for more ways to engage their audience, so they agreed, and we teamed up.


Canvas Blend Modes

The first thing you see when you open the Cupcakes! demo is a giant cupcake. Watch carefully and you’ll see that the frosting changes colors using the power of canvas blend modes. Blend modes allow us to define how layer colors interact with each other. It works the same way layer blend modes work in Photoshop, creating more complex color combinations than opacity provides. In this case we’re using the blend mode color-burn by setting the globalCompositeOperation property like this:

context.globalCompositeOperation = 'color-burn';

blending

You might have also noticed that the color conforms to the shape of the frosting. That’s because we’re masking the color with another image that represents the shape of the frosting. We’re able to achieve this effect with compositing, which allows us to define the visibility of one layer based on another. This is also achieved with the globalCompositeOperation property, but with the value destination-atop, which tells it to mask, or “cut out,” the bottom layer based on the top layer’s alpha channel.

context.globalCompositeOperation = 'destination-atop';

compositing

There are a variety of values that can be used with globalCompositeOperation. These can be applied in very creative ways to make a huge number of interesting visual effects.

Learn more about blend modes and compositing.

CSS Masks

We’ve seen how we can mask content in Canvas, but sometimes it is useful to mask semantic markup like images or other HTML content. This can be achieved with CSS Masks. CSS Masks are alpha masks: images whose alpha values are transferred to the underlying content. The syntax is identical to that used with the background-image property, which means we can size, position, repeat, and even apply multiple masks to the same element. We use masks throughout the demo to add a subtle texture to content like the navigation buttons.

mask

Learn more about CSS Masking.

CSS Clip Paths

If you’re familiar with Photoshop, you probably know there are two kinds of masks: layer masks (which in Photoshop is a luma, or black & white, mask), and vector masks (composed of a vector shape that cuts out your layer). While CSS Masks are more akin to layer masks, CSS Clip Paths are the web’s version of vector masks.

We can use Clip Paths to mask parts of our content with CSS or SVG shapes. This allows us to reuse a frame for content throughout the site simply by applying a class without the need for images. It also gives us the ability to shape user-submitted photos without having to perform server side image manipulation. Clip Paths support CSS Transitions and Animations as well so we can animate the path of the mask from one shape to another (assuming the vertices of the vector shape match up). This technique is used throughout the site on the starburst buttons as well as the timer and menu.

Learn more about CSS Clip Paths.

clippath

Dynamic Masks

CSS Masks and Clip Paths are extremely powerful, as are the different ways we can animate them. But sometimes it’s useful to be able to draw masks dynamically with code. The easiest way to do this would be to draw and animate a canvas and use that as a mask. There is a way to do this in WebKit browsers (or formerly WebKit browsers like Chrome), though it is currently not standardized. Using the getCSSCanvasContext method, we can get a Canvas context that can be referenced from CSS. As parameters, the method takes:

  1. The context type.
  2. An identifier to be referenced from your CSS.
  3. The width and height of the canvas.

document.getCSSCanvasContext(‘2d’, ‘myCanvasId’, 100, 100);

You can then use it just like any CSS image and apply it as a mask:
-webkit-mask: -webkit-canvas(myCanvasId);

We are using this technique to create masked transitions between sections of the site.

dynamicmasks

Regions

If you’ve tried cooking from a recipe on your computer, you probably know it can be difficult to read the small type. It can also be easy to lose your spot when going back and forth from cooking to the screen. To solve this problem, we created a full-screen view you can access from the recipe page. We use regions to dynamically generate large slides that make it easy to both navigate the content, and to read it from a distance.

For obvious reasons, we didn’t want individual paragraphs (typically separate steps in the recipe) to get broken up across multiple slides. To achieve this, we’re defining how the paragraphs break within regions through CSS. By setting the break-after property to “always” on our paragraphs, it will always break our content into a new region after a paragraph tag.

-webkit-region-break-after: always;

Because the content can be variable length, and because we generate the slides dynamically from the content, we need to determine how many slides are required to display the entire recipe. We can do this by getting access to our flow from JavaScript, and generating regions until our overset property is false:

var myFlow = document.webkitGetNamedFlows().namedItem('recipeFlow');

if (myFlow.overset == true;) {
	//add another region
} else {
	//no more regions needed
}

regions

CSS Shapes

Cupcakes! makes subtle but important use of CSS Shapes (for a more conspicuous demonstration of CSS Shapes, see Using CSS Shapes to Enhance Visual Storytelling). CSS Shapes allow us to have text wrap either inside or around both standard shapes and custom polygons. It can make the layout of text look more polished and better integrated with its surrounding content as in this paragraph that flows around Alton Brown’s headshot:

Screen Shot 2014-01-09 at 3.01.30 PM

We also use CSS Shapes to make sure captions don’t overlap with background images as in this example:

Screen Shot 2014-01-09 at 3.01.38 PM

Learn more about CSS Shapes.

Web Speech API

Another common annoyance when combining cooking with technology is having to touch your laptop or tablet when you’re hands are messy. In order to allow you to navigate the application without touching it, we incorporated the Web Speech API. The Web Speech API allows us to receive voice commands from the user’s microphone as text. In order to make the interaction more user-friendly, we map several appropriate phrases to individual pages, which means any number of voice commands will work as the user expects. There are also some built-in commands, like “forward,” “back,” and “recipe,” that allow you to perform various functions on the site. This means you can browse through the entire application without ever touching your mouse or your screen.

Leap Motion

As we continue to demand more from our technology, it makes sense for us to create new ways of interacting with it. Multi-touch and voice input have dramatically changed the way we use our devices, and now thanks to technologies like the Leap Motion Controller, we can also use the space above and around our computers to interact with them, as well. As we were looking for ways to allow users to flip through recipes without getting ingredients all over their laptops, the Leap Motion Controller seemed like a perfect fit.

 Fortunately, Leap Motion provides an excellent javascript API that makes integrating motion control into your website extremely straightforward. If you have a Leap Motion Controller connected to your computer, you can navigate through recipe cards simply by swiping forward and back. (See the video above for a demo.)

Tooling

Most of the cutting edge features we used for the Cupcakes! demo are so new that they haven’t been tooled yet, but there is one notable exception. We wanted the site to look great at any size screen — particularly on tablets — so we’re utilizing media queries to make adjustments at various breakpoints. Designing multiple layouts for all necessary breakpoints can be difficult and tedious, but Edge Reflow simplifies the process by letting us lay out our pages and add breakpoints visually. Reflow allowed us to quickly conceptualize and communicate how elements should adapt and respond to all our target screen sizes.

Dessert

We had a fantastic time both working with Food Network, and bringing their vision of Cupcakes! to the open web. Collaborating with partners and experimenting with real-world use cases and content helps us to refine our contributions to web standards, and helps guide the development of tools to help more people bring these types of experiences to life.

If you want to experience the Cupcakes! demo for yourself, you can check it out here (Chrome and Safari only, for now). Additionally, the entire codebase is open source and available on GitHub. If you have questions or comments, feel free to leave them below.

One Comment

  1. January 20, 2014 at 10:49 am, Stacey said:

    Thanks for the wonderful tutorial. Its definitely going to help me a lot in my current project.