Uploaded July 2025 | Updated September 2026, 9 hours ago
I’m redesigning my personal website with a bold, print-inspired layout and using a powerful but rarely used CSS property to pull it off. I walk through how to use shape-outside with floated images to wrap text around custom polygons for a truly standout design.
Learn how to make videos like me at https://screencasting.com! Use the code YOUTUBE to get 20% off.
shape-outside: developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
Unused CSS clip path tool: unused-css.com/tools/clip-path-generator
Follow me:
Twitter: twitter.com/aarondfrancis
LinkedIn: linkedin.com/in/aarondfrancis
Website: aaronfrancis.com - find articles, podcasts, courses, and more.
Chapters
00:00 - Redesigning my site with a magazine layout
01:19 - The CSS property you’ve never used: shape-outside
02:20 - Why shape-outside needs floats
02:56 - Laying out the initial images and content
04:51 - The problem with box-shaped margins
05:00 - Creating a polygon visually with a clip-path tool
06:52 - Why percent-based coordinates are important
08:48 - Applying the effect to the second image
09:58 - Hiding the second image on small screens
10:55 - Pulling inspiration from print design
I’m redesigning my personal website with a bold, print-inspired layout and using a powerful but rarely used CSS property to pull it off. I walk through how to use shape-outside with floated images to wrap text around custom polygons for a truly standout design.
Learn how to make videos like me at https://screencasting.com! Use the code YOUTUBE to get 20% off.
shape-outside: developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
Unused CSS clip path tool: unused-css.com/tools/clip-path-generator
Follow me:
Twitter: twitter.com/aarondfrancis
LinkedIn: linkedin.com/in/aarondfrancis
Website: aaronfrancis.com - find articles, podcasts, courses, and more.
Chapters
00:00 - Redesigning my site with a magazine layout
01:19 - The CSS property you’ve never used: shape-outside
02:20 - Why shape-outside needs floats
02:56 - Laying out the initial images and content
04:51 - The problem with box-shaped margins
05:00 - Creating a polygon visually with a clip-path tool
06:52 - Why percent-based coordinates are important
08:48 - Applying the effect to the second image
09:58 - Hiding the second image on small screens
10:55 - Pulling inspiration from print design
