Adobe

decor

Web Platform Team Blog

Making the web awesome

CSS Shapes now available in Chrome 37 release

Support for CSS Shapes is now available in the latest Google Chrome 37 release.

chromelogo

What can I do with CSS Shapes?

CSS Shapes lets you think out of the box! It gives you the ability to wrap content outside any shape. Shapes can be defined by geometric shapes, images, and even gradients. Using Shapes as part of your website design takes a visitor’s visual and reading experience to the next level. If you want to start with some tutorials, please go visit Sarah Soueidan’s article about Shapes.

Demo

The following shapes use case is from the Good Looking Shapes Gallery blog post.

Without CSS Shapes
the_11_guesses_no_shapes
With CSS Shapes
the_11_guesses_shapes

In the first picture, we don’t use CSS Shapes. The text wraps around the rectangular image container, which leads to a lot of empty space between the text and the visible part of the image.

In the second picture, we use CSS Shapes. You can see the wrapping behavior around the image. In this case the white parts of the image are transparent, thus the browser can automatically wrap the content around the visible part, which leads to this nice and clean, visually more appealing wrapping behavior.

How do I get CSS Shapes?

Just update your Chrome browser to the latest version from the Chrome/About Google Chrome menu, or download the latest stable version from https://www.google.com/chrome/browser/.

I’d like to thank the collaboration of WebKit and Blink engineers, and everyone else in the community who has contributed to this feature. The fact that Shapes is shipping in two production browsers — Chrome 37 now and Safari 8 later this year — is the upshot of the open source collaboration between the people who believe in a better, more expressive web. Although Shapes will be available in these browsers, you’ll need another solution for the other browsers. The CSS Shapes Polyfill is one method of achieving consistent behavior across browsers.

Where should I start?

For more info about CSS Shapes, please check out the following links:

Let us know your thoughts or if you have nice demos, here or on Twitter: @AdobeWeb and @ZoltanWebKit.

5 Comments

  1. August 28, 2014 at 12:14 pm, Gareth James said:

    I started using CSS Shapes on my website recently (as a fun little bit of progressive enhancement), and wrote a post about it… You can check it out here

    • August 28, 2014 at 12:33 pm, Alan Stearns said:

      That’s an excellent subtle effect you’ve added.

  2. September 03, 2014 at 2:31 pm, Richard said:

    Does Chrome support shapes based on alpha channel?

    • September 25, 2014 at 3:16 pm, Zoltan Horvath said:

      Hi Richard,

      It support shapes based on:
      – alpha channel, e.g. shape-outside: url(‘img-with-alpha.png’);
      – defined shapes, e.g. shape-outside: circle(50%);

      …and you can also use gradients with alpha to define shapes.

      We’ve got a couple of examples and code snippets in our CodePen collection: http://codepen.io/collection/qFesk/

      Let me know if you have any more questions or if I can help with anything else.

      Also, don’t forget to share your creations with us, here or on @AdobeWeb Twitter. Thank you :)