While there are many ways to mask content with CSS, until very recently, there weren’t any standardized, reliable methods of wrapping content around images. Lately, that has completely changed: new techniques and CSS modules have pushed web page layouts to the cusp of a revolution in design.
This reading list - constantly edited and growing - attempts to cover all of the applicable methods with useful, practical examples.
Time: 2 hours
Prerequisites: HTML and basic CSS
Images with rounded corners
Image Vignettes
Radial Vignettes
Wrapping Text around a Circular Shape
Wrapping Text around a Curved Shape
Combining clip-path and Shapes
Text Masks with Blend Modes
Resources
Read up on general approaches on how to create non-rectangular web designs.
Photograph by Andreas Voigt, used under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 license.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
