--- title: How Adobe Used CSS to Sweeten Cupcakes! in the Browser description: By C.J. Gammon, Creative Technologist at Adobe Recently, I got the chance to work with the Food Net... image: https://www.websitemagazine.com/hubfs/Imported_Blog_Media/adobe-logo-icon-Jan-23-2023-02-17-21-5907-PM-1-1-1.png --- [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) [![Website Magazine Logo](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x-1.png?width=586&height=145&name=gradient-regular@3x-1.png "Website Magazine Logo")](http://Website%20Services,%20Inc.) - [About](https://www.websitemagazine.com/about) - [FAQs](https://www.websitemagazine.com/about/faq) - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial Staff](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Resources](https://websitemagazine.tradepub.com) - [Newsletter](https://www.websitemagazine.com/newsletter-sign-up) - More - [Contact Us](https://www.websitemagazine.com/contact) [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) Search - [Latest](https://www.websitemagazine.com) - [Design](https://www.websitemagazine.com/web-design) - [Development](https://www.websitemagazine.com/web-development) - [SEO](https://www.websitemagazine.com/seo) - [Ecommerce](https://www.websitemagazine.com/ecommerce) - [Content](https://www.websitemagazine.com/content) - [Marketing](https://www.websitemagazine.com/marketing) - [Advertising](https://www.websitemagazine.com/advertising) - [Email](https://www.websitemagazine.com/email) - [Infographics](https://www.websitemagazine.com/infographics) - [View All Topics](https://www.websitemagazine.com/channels) # How Adobe Used CSS to Sweeten Cupcakes! in the Browser ![CJ Gammon](https://www.websitemagazine.com/hubfs/1516356489702.jpeg) [by CJ Gammon](https://www.websitemagazine.com/web-development/author/cj-gammon) 03 Apr, 2014 - - - [mailto:?Body=https://www.websitemagazine.com/web-development/how-adobe-used-css-to-sweeten-cupcakes-in-the-browser](mailto:?Body=https://www.websitemagazine.com/web-development/how-adobe-used-css-to-sweeten-cupcakes-in-the-browser) - Link Copied! ![How Adobe Used CSS to Sweeten Cupcakes! in the Browser](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/adobe-logo-icon-Jan-23-2023-02-17-21-5907-PM-1-1-1.png) Recently, I got the chance to work with the Food Network on [Cupcakes](https://www.youtube.com/watch?v=M2l56RmQAQE)! - an app that pulls together recipes, ideas, tips and photos featuring everyone's favorite chefs. But the team also wondered - what if we could create the same experience in a browser that shined a light on its visual, tasty content?     We got to it and focused on three main areas in the app: color, texture and shape - with a keen eye on how bakers would directly act with the experience.   ## **Playing with color - Canvas Blend Modes**   Though we often think of the Web as a blank canvas, code isn't exactly like paint - we can't simply mix one color with another to get a shade in between. However, we can get pretty close with Canvas Blend Modes, which define how layer colors mix with one another, just like the Photoshop function of the same name - adding some more subtle complexity to the color on the page.    Here, we're using the blend mode color-burn by setting the globalCompositeOperation property like this: context.globalCompositeOperation = 'color-burn';   ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/adobe-cupcake_1-3-1-1-1.png?width=600&height=485&name=adobe-cupcake_1-3-1-1-1.png)   ## **Adding Texture - CSS Masking**   If you're familiar with computer graphics, you've probably heard of clipping and masking, which hide visual portions of an element. This function, usually carried out in something like Photoshop, can now be made possible in CSS, allowing us to play with the texture of things like the navigation buttons.    ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/adobe-cupcake_2-3-1-1-1.png?width=388&height=315&name=adobe-cupcake_2-3-1-1-1.png)   ## **Beyond divs - crafting shapes**   Previously, text wrapping on the Web has always meant wrapping around boxes of content. With Shapes, which recently was [updated](https://drafts.csswg.org/css-shapes-1/), you can wrap text outside or inside any shape by using just a few simple CSS properties. By using this wrapping method, the text and visuals can naturally fall into place in a more interesting way. Look at Alton Brown's headshot - and how the text curves around it.    ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/adobe-cupcake_3-3-1-1-1.png?width=600&height=329&name=adobe-cupcake_3-3-1-1-1.png)   ## **Bottom line - increasing usability**   One other important thing was that we really wanted to make sure this experience could shine on any screen size. That's why we used Adobe Edge Reflow to set break points visually. When you open up the Web app and change the size of your browser, you'll notice that it's responsive.   What's also neat is that our teams tried to think beyond just the browser. By using the Web Speech API and [LeapMotion API](https://github.com/leapmotion/leapjs), we built in functionalities that allow cooks with batter-splattered hands to use speech and gesture to get to the next recipe step.    [Here](https://adobe-webplatform.github.io/Demo-for-Food-Network-Cupcakes/src/) is the demo of the full experience (it's available only on Chrome and Safari for now). And if you're interested in trying out the code for size, it's [available on GitHub](https://github.com/adobe-webplatform/Demo-for-Food-Network-Cupcakes). I look forward to seeing how you take the tips and tricks we used and expand on the code.  ![CJ Gammon](https://www.websitemagazine.com/hubfs/1516356489702.jpeg) [CJ Gammon](https://www.websitemagazine.com/web-development/author/cj-gammon) CJ Gammon is an experienced Senior Creative Technologist with a demonstrated history of working in the design and development industry. Skilled in WebGL, 2D Canvas, SVG, VR, AR, and Machine Learning. Professional, with a track record of innovation. Recognized in the industry with awards and speaking engagements at prominent conferences. - - #### Popular Post ### [How to Embed AI in your Enterprise App ![How to Embed AI in your Enterprise App](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash-41618c-2-1-1-1.gif)](https://www.websitemagazine.com/web-development/how-to-embed-ai-in-your-enterprise-app) ### [How to Use Plugins in WordPress ![How to Use Plugins in WordPress](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/WordPress-Logo-1.png)](https://www.websitemagazine.com/web-development/how-to-use-plugins-in-wordpress) ### [Top 10 Tips to Build a Google-Friendly Site ![Top 10 Tips to Build a Google-Friendly Site](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-1015568-1-1.jpg)](https://www.websitemagazine.com/web-development/top-10-tips-to-build-a-google-friendly-site) #### Subscribe to Our Newsletter! [![](https://a.impactradius-go.com/display-ad/13053-1438301)](https://semrush.sjv.io/c/3976891/1438301/13053)![](https://imp.pxf.io/i/3976891/1438301/13053) #### Latest in Web Development [![How to Use Plugins in WordPress](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/WordPress-Logo-1.png) How to Use Plugins in WordPress](https://www.websitemagazine.com/web-development/how-to-use-plugins-in-wordpress) [![Top 10 Tips to Build a Google-Friendly Site](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-1015568-1-1.jpg) Top 10 Tips to Build a Google-Friendly Site](https://www.websitemagazine.com/web-development/top-10-tips-to-build-a-google-friendly-site) [![STAT WATCH: The Shift to Cloud](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/cloud-icon-Jan-23-2023-02-15-00-5888-PM-3-2-2.png) STAT WATCH: The Shift to Cloud" is Nearly Complete"](https://www.websitemagazine.com/web-development/stat-watch-the-shift-to-cloud-is-nearly-complete) [![Amazon Enhances Alexa Skills Kit Developer Console](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/amazon_200x200-Jan-23-2023-02-23-45-6129-PM-1-1-1.png) Amazon Enhances Alexa Skills Kit Developer Console](https://www.websitemagazine.com/web-development/amazon-enhances-alexa-skills-kit-developer-console) [![How Serverless and ReactJS are Changing the Rules of Web Development](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash122117-Jan-23-2023-02-14-59-5570-PM-1-1-1.png) How Serverless and ReactJS are Changing the Rules of Web Development](https://www.websitemagazine.com/web-development/how-serverless-and-reactjs-are-changing-the-rules-of-modern-web-development) [![How to Embed AI in your Enterprise App](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash-41618c-2-1-1-1.gif) How to Embed AI in your Enterprise App](https://www.websitemagazine.com/web-development/how-to-embed-ai-in-your-enterprise-app) [![gradient-regular@3x](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x.png?width=128&height=128&name=gradient-regular@3x.png)](https://www.websitemagazine.com/) 999 E Touhy Ave, Des Plaines, IL 60018   [info@websitemagazine.com](mailto:info@websitemagazine.com) [(888) 7WEBMAG](tel:18887932624) [(312) 313-6576](tel:13123136576) About - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Contact Us](https://www.websitemagazine.com/contact) Resources Membership - Login - Subscribe Signup for our newsletter © 2026 Website Magazine. All Rights Reserved - [Privacy Policy](https://www.websitemagazine.com/about/privacy) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "CJ Gammon", "url" : "https://www.websitemagazine.com/web-development/author/cj-gammon" }, "dateModified" : "2023-05-01T22:21:21.535Z", "datePublished" : "2014-04-03T05:00:00.000Z", "headline" : "How Adobe Used CSS to Sweeten Cupcakes! in the Browser", "image" : [ "https://www.websitemagazine.com/hubfs/Imported_Blog_Media/adobe-logo-icon-Jan-23-2023-02-17-21-5907-PM-1-1-1.png" ], "mainEntityOfPage" : { "@id" : "https://www.websitemagazine.com/web-development/how-adobe-used-css-to-sweeten-cupcakes-in-the-browser", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.websitemagazine.com/hubfs/gradient-regular@3x-1.png" }, "name" : "Website Services, Inc." } } ``` ```json { "@context" : "https://schema.org", "@type" : "NewsArticle", "author" : [ { "@type" : "Person", "name" : "CJ Gammon" } ], "headline" : "How Adobe Used CSS to Sweeten Cupcakes! in the Browser", "publisher" : { "name" : "Website Magazine", "url" : "https://www.websitemagazine.com/" } } ```