Support for CSS Shapes is now available in the latest Google Chrome 37 release.
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.
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:
- CSS Shapes Level 1 – Specification
- Good looking shapes gallery – Demos using shapes by Hans Muller
- Moving Forward with CSS Shapes by Sara Soueidan
- CSS Shapes: Breaking the Rectangular Design Shackles by Patrick Catanzariti
- CSS Shapes polyfill – Blog post, explaining the Shapes polyfill by Bear Travis
- CSS Shapes Editor in Brackets – Creating and editing shapes in Brackets easily by Razvan Caliman
- CSS Shapes feature testing in Modernizr – Browser support testing with JavaScript by Zoltan Horvath
- Add shape and depth to your layout with Photoshop and CSS Shapes – Shapes workflow with Photoshop by Rebecca Hauck
- CSS Shapes syntax – Summary about the CSS Shapes syntax by Bem Jones-Bey
- CSS Shapes CodePen.io in our AdobeWeb CodePen.io
- Can I use CSS Shapes Level 1? by http://caniuse.com
Let us know your thoughts or if you have nice demos, here or on Twitter: @AdobeWeb and @ZoltanWebKit.
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.
August 28, 2014 at 2:50 pm, Gareth James said:
Cheers!