Publ: Development Blog

Entries tagged demo

The shape of the float (v0.3.1)

Posted Thursday, September 20 at 10:58 PM (6 years ago)

woo-ghost.png

Did you know that CSS3 has a style called shape-outline? It’s pretty neat, it makes it so that a floated object gets a shape based on the alpha channel of its specified image. But it’s kind of a pain to set up; in plain HTML it looks something like this:

<img src="/path/to/image.png" width="320" height="320"
    style="shape-outline:url('/path/to/image.png');float: left">

and if you want a different shape mask for your image than its own alpha channel, you have to do a bunch of stuff like making sure that the image sizes are the same and whatever.