Adobe

decor

Web Platform Team Blog

Making the web awesome

Archive for the Shapes Category

Create shapes with CSS box properties demo

Hans Muller reviews the box shape geometry involved in specifying CSS Shapes as a CSS box. You can generate many shapes by referring to edges in the CSS Box Model. But, as Hans put it in an early post, “You must remember that the CSS Box Model is a set of four rectangular Russian dolls.” In... Continue reading →

Making the Web Sweeter with Food Network and Cupcakes

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,... Continue reading →

CSS Shapes in Last Call

The CSS Working Group published a Last Call Working Draft of CSS Shapes Module Level 1 yesterday. This specification describes how to assign an arbitrary shape such as a circle or polygon to a float and to have inline content wrap around the shape’s contour, rather than the boring old float rectangle. A Last Call draft... Continue reading →

Cutting Edge CSS Features at CSSConf.eu 2013

This year, on September 13, front-end web developers and web designers gathered in Berlin for the first edition of CSSConf held in Europe. It was an awesome event packed with highly informative and entertaining talks about features, tools, techniques and upcoming technology that super-charge CSS productivity. I was happy to be on stage and share... Continue reading →

First Fit Location for Image Shapes

Upon his return from sabbatical, Hans Muller dove right back into working on the algorithms that make CSS Shapes possible. Before he left, he was working on adding support for CSS Shapes from images. Hans’s latest blog post is an explanation of the algorithm for determining the first fit location for an image shape. As... Continue reading →

HTML Alchemy – Combining CSS Shapes with CSS Regions

Note: Support for shape-inside is only available until the following nightly builds: WebKit r166290 (2014-03-26); Chromium 260092 (2014-03-28). I have been working on rendering for almost a year now. Since I landed the initial implementation of Shapes on Regions in both Blink and WebKit, I’m incredibly excited to talk a little bit about these features and... Continue reading →

CSS Shapes and Float Positioning: What’s Old is New Again

The Adobe Web Platform Team has been working on CSS Shapes (fka CSS Exclusions and Shapes) for some time now. The CSS Shapes spec has been divided into two levels. CSS Shapes Level 1 allows authors to specify a shape-outside value for floats. The shape-outside value is a shape that defines the boundary that inline... Continue reading →

How to Make a Chocolate Peanut Butter Cup

Sometimes when you add two foods together, you get something exceptionally delicious. And sometimes when you add two CSS features together, you get something exceptionally useful. CSS Exclusions and Shapes will be one of those exceptionally useful combinations, particularly with new layout systems being designed like CSS Grid Layout. But while recipes can start from... Continue reading →

Creating an Installed Application Experience on Mobile With Web Technologies

Adobe’s Web Platform team recently showcased a prototype demonstrating the future of digital layout on the web using content provided to us by National Geographic. Although the experience is fully responsive (meaning it adapts to screens of all sizes), we decided to push things a little further by creating an entirely new — and much... Continue reading →