An image float stack unlike any other! CutOut uses the new CSS ‘shape-outside’ property to apply attractive text wrapping effects around left or right floating images. Wrapping shapes can include circles (default), ellipses, insets and more complex polygons. This is a special effect, growing in popularity, which many web designers are deploying in more and more websites. A perfect finishing-touch for product photography and personal profile images.
You can use images dragged and dropped into RW, warehoused images, or content edited remotely with WebYep CMS. It is possible to set the image as a link, so this stack is both pretty and functional.
This is provided as a free stack, but as always if you find it useful (or need support) please make a contribution to support ongoing development.
This is great - many thanks Will. I’ve often wished I could do more than just float an image (without adding a bunch of CSS - which I’ve done before). After downloading, I donated a small token - and I hope others will follow my lead.
Is the text on the stacks for stacks page supposed to wrap around the round profile pics? Or is the stack more about turning a square pic round? I ask because on the stacks for stacks page the photos are round but the text is just standard text, not wrapping at all (at least that’s how I’m seeing it).
The screen grab you have here is lovely though :-).
Per the documentation already on the product page, this is a progressive enhancement. That is to mean, the effect only works in web browsers that support CSS shape-outside. Does it work in your web browser? Probably not if you are not seeing the same effect as pictured above. The sure way to tell is to lookup what browser / version you are using and then compare that information to the list of supported browsers on a website like Can I Use, from where you can use the search function and query CSS shape-outside.
There you can see if your browser is one of the ones that support this CSS property. Currently about 80% of internet users can see the effect. Those who cannot see the effect will just see a square wrap of text, as is explained already on the product page. No hard loss really, because those users will still be able to see both the image and the text perfectly fine - they just won’t get the more fanciful circular wrap effect happening.
If you do some more research about it online, you will see that progressive enhancement is a favored strategy by a lot of web designers and developers nowadays. CutOut is a prime example. It is a means of getting fresh, new techniques and technologies available to the wider population; while allowing things to gracefully degrade in older web browsers. The opposite of what used to happen in the bad days of Internet Explorer 6; when we often had to bend over backwards and sacrifice a lot of lovely site functionality, just to satisfy a small band of die-hard IE fans! Progressive enhancement takes a more futuristic and optimistic approach to design and development; enhancing the experience only where things are supported.
Of course I contributed…