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
- Image Vignettes
- Wrapping Text around a Circular Shape
- Wrapping Text around a Curved Shape
- Combining clip-path and Shapes
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.