Bert Bos & Eva Kasal | CSS3 in Style
Two kinds of shapes:
shape-inside
shape-outside
img {float: left; shape-outside: attr(src url)}
Note: no shapes yet that grow with the content
<img id="panorama" src="panorama.jpg" alt="">
Demo: Adobe's prototype
#panorama { position: absolute; wrap-flow: both; shape-outside: polygon(0px, 440px 62px, 481px...) }
The wrap-flow
property:
auto
– level-2 behavior
both
– text both left and right of exclusions
start
– text stays left of exclusions
end
– text stays right of exclusions
maximum
– left or right, whichever is bigger
clear
– neither left nor right
Exclusions:
Shapes: