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
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.
- CSS shape-outside example to wrap text around image - January 7, 2021
- Behind the sun! Pure CSS Animation - January 5, 2021
- Unable to format code in VSCode on MacOS using shortcut (solved) - January 4, 2021