Ever wanted to create your own animated ghost using just HTML and CSS? Possibly you haven’t, but now you’ve seen it maybe you do! In any case, as web developers we love to experiment with code, especially when it involves working with constraints, and very often this is what drives innovation. In this case, we’re working with a ghost, made entirely out of CSS.
What makes this interesting? Well, this isn’t an image or video being used to display a ghost – it made out of pure code, and only 3KB of code at that. To put that into perspective, an animated GIF (an old type of web animation) showing a ghost of this nature would probably be around 500KB. Even a looping video would probably be 100KB+. How does CSS keep it so small? Well, it’s rendered in realtime – what this means is that the image of the ghost doesn’t exist anywhere until it’s viewed in a browser (a Schrödinger’s ghost?). Your browser (i.e. Chrome, Safari etc) takes the code, and uses this to generate (a.k.a. render) the ghost and display it.
The ghost also takes advantage of some relatively recent improvements in how browsers handle CSS – very old browsers wouldn’t be able to animate the ghost at all, but most browsers from Internet Explorer 10 onwards should be fine. If you’re using a browser older than this you should consider upgrading as soon as possible, as there will likely be unpatched security flaws that will only be fixed by upgrading to a new browser.
In any case, if you want to see how to make your own ghost, check out the tutorial below. Happy Halloween!