CutOut uses pure CSS and HTML to achieve this effect. Zero Javascript is used. Because the 'shape-outside' property is new in the CSS specification, it's currently only supported by some newer web browsers. Rest assured, older web browsers will continue to render the image float and text in the normal 'square' way. This is a progressive enhancement for newer web browsers. To combat the problems of floats on smaller screens (like mobile) a custom breakpoint setting lets you safely disable the float on smaller screens; where the image will get rendered above the content and centred.
You can use images dragged and dropped into RapidWeaver, warehoused images stored online already or login and upload images using the WebYep CMS. Images are automatically resized and can have a border radius applied, to make things simpler. Your image can be floated either left or right. Both the image and content can have their placement fine-tuned using padding and margin controls. In terms of written content, you can toggle between using styled text, HTML, markdown or content edited online with the WebYep CMS.
If you want to cut images to conform to simple shapes, the CookieCutter stack might be a better alternative to use.
You can use images dragged and dropped into RapidWeaver, warehoused images stored online already or login and upload images using the WebYep CMS. Images are automatically resized and can have a border radius applied, to make things simpler. Your image can be floated either left or right. Both the image and content can have their placement fine-tuned using padding and margin controls. In terms of written content, you can toggle between using styled text, HTML, markdown or content edited online with the WebYep CMS.
If you want to cut images to conform to simple shapes, the CookieCutter stack might be a better alternative to use.
Examples
These are two examples of the CutOut stack, one with the image floated left and a second with the image floated right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.
Setup
This stack requires Stacks 3.5 or greater. Follow these instructions for setting up a CutOut stack.- Once installed into Stacks and RapidWeaver, open your Stacks Library and search for 'cutout'
- Drag and drop a copy of the stack into your webpage
- Adjust any of the settings required in the Stacks side panel for CutOut; like the image source, float, size, spacing and content type
- Apply a link to the image, if you prefer. Custom attributes are supported, so you can apply effects like a lightbox or tooltips
- Preview the page to see the result. Export or publish when finished.
As always, hovering your mouse over settings displays an informational tooltip about what each setting does. It is possible to put the page in preview mode and continue adjusting the settings, to see the changes take effect live on the page. You can use multiple CutOut stacks on the same webpage. CutOut stacks can be nested within other stack types, like grids and columns.
Web browsers that do not support the CSS 'shape-outside' property will treat CutOut as a regular image float. Additionally the image will loose its float characteristics on screen widths narrower than the specified breakpoint. Browser support for 'shape-outside' is rapidly improving. See Can I Use for the latest information on browser support.
Inset and polygon shapes are highly experimental. If you are interested in using these, search the internet for details / tutorials on how to generate the point coordinates with special browser extensions (in the web inspector) and to read which web browsers currently support these shape types.
