CSS shape-outside is that CSS property that helps in wrapping text around a picture or a shape etc.
Text in news papers wrapped around the pictures is a good example of what can be achieved using css shape-outside.
We can also find similar functionality in Microsoft word – Wrap text around the picture – Wrap text around a picture in Word
Here’s a simple yet clean example of how to use css shape-outside property
See the Pen CSS shape-outside ✨ by Joshua Comeau (@joshwcomeau) on CodePen.23550
Things to note about css shape-aside property
- Supports wrapping around both images and shapes
- It can wrap text only around elements which have float property set
shape-image-thresholdproperty can be used to set transparency threshold. values between
1are supported. For example: If we set it to 0.5, then all the pixels of the given image with transparency of 50% or more will be considered for creating the shape.
Latest posts by Ranjith kumar (see all)
- Curved button using Flutter | Can it be done with Flutter? | Custom shapes Flutter | Custom painter - September 21, 2022
- Dynamic Island using Flutter | iPhone 14 Pro | Can it be done with Flutter? - September 14, 2022
- Best practices of scraping website data for beginners (Updated 2022) - September 12, 2022