Level up your design with this CSS property

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: https://developer.mozilla.org/en-US/d...
Unused CSS clip path tool: https://unused-css.com/tools/clip-pat...

Follow me:
Twitter:   / aarondfrancis  
LinkedIn:   / aarondfrancis  
Website: https://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