Web Platform Team Blog

Adobe

decor

Making the web awesome

Using CSS Shapes to Enhance Visual Storytelling

Opening scene of Alice in Wonderland demo

Web designers have long been forced to create within the constraints of blocks. Since most daring ventures into non-rectangular layouts using regular CSS and HTML usually end in frustration, most of the content on the web is still trapped in simple boxes.

All that is about to change with the implementation of CSS Shapes, a new standard which allows web designers and developers to wrap content inside or around custom shapes. Shapes are defined in simple, practical, and reusable ways; most importantly, unlike most CSS hacks that just simulate shapes, they can affect the entire layout of a web page.

Building Alice in Wonderland

In order to demonstrate how custom shapes can enhance layout expressiveness on the web, we built a demo based on the story of Alice in Wonderland by Lewis Carroll. We teamed up with the French agency ultranoir which created stunning hand-drawn graphics for us which we integrated into a beautiful and evocative story.

On top of the carefully drawn landscapes and characters, we built an interactive HTML5 experience where CSS Shapes are used in key places to enhance the visual storytelling experience. We also employed a scroll-driven navigation model which keeps the reader engaged in a linear and gradual exploration of the content.

Text wraps inside and around custom shapes in unexpected ways for an HTML & CSS web page, enticing the reader to continue scrolling and discovering. Clever uses of custom shapes help support content at key points throughout the story.

Since our adaptation of Alice uses cutting edge web standards, it currently requires Google Chrome Canary with support for CSS Shapes enabled.

Expressive Layout

The first scene opens up with a curious Alice looking down into the famous rabbit hole. Using a shape-inside CSS property, the text wraps intricately between the outline of the girl and that of the tree. By varying the top margin of the content as the user scrolls, we achieved the effect of the text draining down the rabbit hole, enticing further exploration. This effect was simple to build with CSS Shapes, and it demonstrates how the browser can quickly update content layout within a shape-inside.

Opening scene of Alice in Wonderland demo

The experience is extremely fluid because no JavaScript is used to control the text layout. The browser’s native layout engine achieves much better performance when dealing with shapes for wrapping content.

Throughout the story, the content interacts with its surroundings in interesting ways. In some cases, the content wraps around the custom shapes of characters while also wrapping inside the layout of the rabbit hole. The scene with the Cheshire Cat falling is a good example: each instance of the cat uses the shape-outside property which makes the adjacent text wrap around the outline of the falling feline. Adjusting the position or size of the cat will automatically layout the content around it.

cat-falling

In the original story of Alice in Wonderland there is a scene where Alice has a conversation with the caterpillar smoking a hookah. The art direction we got suggested that the caterpillar’s words might appear as puffs of smoke. This was a great opportunity to use animated shape-inside. As the scroll-driven dialogue between the two unfolds, the shape of the text container gradually animates giving the impression of smoke clouds floating up in the air.

caterpillar

This again demonstrates naturally occurring wrapping within a shape-inside with no JavaScript at all to directly adjust the layout of the text. There are several other uses of sophisticated shapes throughout the demo; in fact, there are no rectangular boxes used within the app at all.

CSS Shapes are designed to work well with existing CSS features. At the very end of the demo, the cat’s head slowly appears in a carving between slanted blocks of text. These are actually two CSS Regions, each with their own shape-inside polygons. Editing or changing the font will not cause the text to overlap the cat’s head due to the custom shapes which the text must respect.

cat-head

Source and Support

The implementation of CSS Shapes is ongoing in WebKit and Blink. CSS Shapes is available in a few browsers, but it may not be turned on by default. To see which browsers support shapes — and to learn how to enable them — see Enabling Cutting-Edge Graphical & Layout Features.

The source code for the entire Alice in Wonderland demo is available on GitHub for you to peek at and explore. Simple examples, which are better suited for getting started with CSS Shapes, are available on CodePen.

Going Forward

Widespread support for CSS Shapes is coming soon. These are not one-off experiments or prototypes, but actual CSS features that passionate developers are working hard to implement in order to make sure the web keeps moving forward.

Shapes provides a whole new set of options for web designers to define content layout in creative, innovative, and expressive ways which enhance the reader’s experience. They are a giant leap forward in making the web browser a first-class design surface.

These features are long overdue on the open web, and we can’t wait to see what you will build with them.

8 Comments

  1. October 23, 2013 at 1:31 pm, Ben said:

    Work like this illustrates perfectly why we love doing what we do. Bravo.

  2. October 24, 2013 at 12:49 pm, Yves said:

    That sounds cool! I’d already searched for a way to make text flow around non-rectangular images, but there was no solution ready back then, and still isn’t today. I’ve created my own little PHP function to make text flow around an image by its transparency and used it in some places. It basically analyses the image and creates a bunch of div elements in the appropriate size. Maybe it’s helpful to somebody already.

  3. October 28, 2013 at 2:22 am, Meh said:

    Wonderful work, this is surely great

  4. October 28, 2013 at 9:23 am, Chiara Aliotta said:

    WOW! The effect I was looking for applied on my favourite novel… Thank you Ultanoir! I admire your work and your passion!

  5. November 01, 2013 at 5:13 am, O said:

    Polygon drawing in Chrome Dev Tools
    Amazing. Thanks for this.
    I saw your full presentation entitled Cutting Edge CSS Features and while going through this project you showed a really cool Chrome dev tools add-on that enables drawing of polygons for CSS shapes right in the browser. Is this available anywhere?

  6. November 01, 2013 at 5:31 am, Razvan Caliman said:

    Hi O,

    The shape editor tool is not yet public, but we are working on making it available in the near future. Follow @adobeweb on Twitter to get the news when that happens.

    • November 01, 2013 at 6:01 am, O said:

      Looking forward to it. Thanks.

  7. November 02, 2013 at 1:19 am, Matthew James Taylor said:

    I hope we get full browser support soon. This is long overdue.