Web Platform Team Blog

Adobe

decor

Making the web awesome

Archive for the Shapes Category

HTML Alchemy – Combining CSS Shapes with CSS Regions

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 how you can combine them together. Don’t know what CSS Regions and Shapes are? Start here! The first... 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 →

Adobe Explores the Future of Responsive Digital Layout with National Geographic Content

Update (5/21/13): To see the mobile prototype, check out Creating an Installed Application Experience on Mobile With Web Technologies. National Geographic partnered with Adobe, sharing select content for Adobe’s use to experiment with digital layout. The results mark the beginning of a technical and design collaboration that will look at innovating around layout while responding... Continue reading →

Growing and Shrinking Polygons

Hans Muller recently added another fascinating blog post to his running series on the implementation of shape-inside from the CSS Shapes Level 2 specification.  In this post Hans describes the initial support he recently added for applying shape-inside and shape-padding to polygonal shapes. While this first round of support in limited in scope, it is another step down... Continue reading →

CSS Regions and Exclusions on Mobile

It’s very cool to see contributions from Adobe’s Web Platform team land in the release version of Chrome (CSS Regions and CSS Exclusions are both available behind the generic “Enable experimental WebKit features” runtime flag), but I have to say, there’s something extra cool about them showing up in the Chrome Beta for Android. Now... Continue reading →

Penetrating Polygons Explained

Hans Muller has another great blog post focusing on his work implementing the shape-inside feature from the CSS Shapes Level 2 specification. In this installment, Hans explains how he calculates the shape-inside that corresponds to a polygon penetrating an HTML element’s content box. Read all about how the algorithm works and play with Hans’s interactive... Continue reading →

Freeing the Floats of the Future From the Tyranny of the Rectangle

With modern web layout you can have your content laid out in whatever shape you want as long as it’s a rectangle. Designers in other media have long been able to have text and other content lay out inside and around arbitrarily complex shapes. The CSS Exclusions, CSS Shapes Level 1, and CSS Shapes Level... Continue reading →

Shape-padding is on its way for CSS Exclusions

Hans Muller has been working hard on the implementation of the shape-inside feature in CSS Exclusions and Shapes, most recently focusing on adding shape-padding functionality for rounded rectangle shapes (ellipses, circles, rectangles). Shape-padding provides a user the ability to specify how much space exists between their content and the shape-inside. For more detail on how shape-padding... Continue reading →