Awesome CSS Tricks

Type a whole bunch of lorem ipsum here....

Support for shape-outside

You can create shapes for text (and other stuff) to contour-wrap using the CSS3 shape-outside property. This spec is only supported in newer Chrome, Opera, and Safari (iOS) based browsers. Unfortunately, neither Microsoft Edge nor Internet Explorer currently support this feature (boo-hiss!). And only very recent versions of Firefox support it. To see what which browsers do, in fact, currently support it at the time you read this article, check out caniuse.com.

Progressive Enhancement Approach

The best way to get other browsers to 'get with the program' is to USE stuff you want to see supported. You can easily use shape-outside in a progressive enhancement way because it is predicated on a supported property we use all the time: the 'float'.

You can design your content normally using floats and then add the shape-outside feature as an enhancement. Pretty simple. To see what this page would look like in a graceful degradation mode on non-supporting browsers, look at this page in Firefox or IE.

Progressive Enhancement Approach

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue dignissim tortor, a vestibulum orci blandit ac. Sed interdum nec sem sit amet consectetur. Vestibulum auctor, risus vitae lacinia elementum, nisi tellus porttitor arcu, vel porta leo felis in augue. Duis laoreet tortor at luctus porttitor. Nulla bibendum neque id est pharetra sagittis. Sed bibendum urna erat, vitae laoreet risus volutpat et. Nunc pharetra risus aliquam arcu pellentesque rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;>Donec ut convallis lacus. Vestibulum blandit sem leo, non tempus est fringilla ac. Nunc scelerisque maximus tortor, eu pulvinar neque placerat quis. Vestibulum fringilla scelerisque tristique. Nulla facilisi. Duis sed sapien id ligula interdum semper. Praesent auctor erat condimentum elit venenatis fringilla. Aliquam fermentum mattis massa, quis vulputate turpis convallis sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dignissim massa at leo dignissim, eget varius lacus finibus.

https://bennettfeely.com/clippy/

CSS Generators

A polygon() Illustration

Just for fun, this is an example of how the polygon() function can work with the shape-outside property.

Here's a Yoda quote to wrap the picture:

"Ready are you? What know you of ready? For eight hundred years have I trained Jedi. My own counsel will I keep on who is to be trained. A Jedi must have the deepest commitment, the most serious mind. This one a long time have I watched. All his life has he looked awayâ€¦ to the future, to the horizon. Never his mind on where he was. Hmm? What he was doing. Hmph. Adventure. Heh. Excitement. Heh. A Jedi craves not these things. You are reckless."

HTML

Type a whole bunch of lorem ipsum here....

How do I use “shape-outside: url()”?

The "url()" value allows you to place a transparent png 32 inside the url parameter, so that the browser will automatically wrap text in the transparent areas of the image. It is only supported as of early 2016 in the Safari/iOS and Chrome browsers. Opera, Firefox, and IE offer no support at this time. This is great when it works because you don't have to use complex polygons for complex shapes. Below is sample code you could try:

HTML
<img src="http://sandbox.leighcotnoir.com/lessons/css-shape-outside/images/hummingbird.png" alt="hummingbird"> <p>Type a whole bunch of lorem ipsum here....</p>
CSS
img { float: left; width: 40%; shape-outside: url(http://sandbox.leighcotnoir.com/lessons/css-shape-outside/images/hummingbird.png); }

An illustration of url() in use

Four loko chartreuse street art PBJ yuccie mumblecore 8-bit. Bespoke etsy bitters shabby chic, pop-up tote bag kinfolk williamsburg helvetica poutine readymade fap fixie. hummingbird Austin fap plaid hella pabst fingerstache offal, waistcoat beard gastropub lo-fi. Quinoa crucifix fingerstache tacos, portland swag semiotics cray knausgaard normcore green juice. Occupy taxidermy crucifix craft beer iPhone, aesthetic butcher banh mi. 90's williamsburg chillwave fashion axe, mustache next level chia affogato mumblecore. Fap photo booth squid flexitarian aesthetic, schlitz stumptown.

Master cleanse retro kitsch, migas food truck drinking vinegar 8-bit deep v schlitz banjo cray readymade mumblecore church-key. Lomo listicle banjo, freegan blue bottle cronut pinterest. Bespoke yuccie cardigan, mlkshk four loko kinfolk YOLO PBR normcore sustainable vice crucifix iPhone you probably haven't heard of them sartorial. Knausgaard tumblr photo booth, pour-over portland brunch squid waistcoat VHS food truck gluten-free vegan kale chips. Stumptown taxidermy scenester, hoodie williamsburg selfies bushwick post-ironic fixie portland butcher cornhole. Fixie truffaut helvetica swag ethical. YOLO man braid raw denim, cliche beard tofu 3 wolf moon iPhone bitters ramps messenger bag.

Bespoke yuccie cardigan, mlkshk four loko kinfolk YOLO PBR normcore sustainable vice crucifix iPhone you probably haven't heard of them sartorial. Knausgaard tumblr photo booth, pour-over portland brunch squid waistcoat VHS food truck gluten-free vegan kale chips. Stumptown taxidermy scenester, hoodie williamsburg selfies bushwick post-ironic fixie portland butcher cornhole. Fixie truffaut helvetica swag ethical. YOLO man braid raw denim, cliche beard tofu 3 wolf moon iPhone bitters ramps messenger bag.

Four loko chartreuse street art PBJ yuccie mumblecore 8-bit. Bespoke etsy bitters shabby chic, pop-up tote bag kinfolk williamsburg helvetica poutine readymade fap fixie. Austin fap plaid hella pabst fingerstache offal, waistcoat beard gastropub lo-fi. Quinoa crucifix fingerstache tacos, portland swag semiotics cray knausgaard normcore green juice. Occupy taxidermy crucifix craft beer iPhone, aesthetic butcher banh mi. 90's williamsburg chillwave fashion axe, mustache next level chia affogato mumblecore. Fap photo booth squid flexitarian aesthetic, schlitz stumptown.