This week, I have decided to do something special for Christmas.
Adding some Jingle Bells to your website is nothing that hasn't been done before,
but what about pure CSS jingle bells? Now that's something!

So how was this done? Santa Claus!
Ok Ok let's go through the steps:

Bells
Probably the most difficult part was the fact that while border radius is
very helpful for curved lines, they go inward whereas I wanted them to go outward for the bells.
After some experimenting with skew and rotate I figured I can just swap the left border with the right border, perfect!

Little did I know, however, that it would make it impossible to add a background color.
So with another floating element I added a background color to everything

As you can see, this looks silly, so I had to use the pseudo classes :before and :after to have a white background

Great, now we have a small white block covering the other bell, quick solution? gradient background!
I basically made the part that is near the bell transparent, and so the background only covers what it needs to cover, with as little overlap as possible.

The red balls
Just some border radius and some brightness function for animation, nothing big.

The leaves
Playing with border radius, it's pretty easy to see how one could accomplish such a shape.

The snow
OK I was a bit tired at the end so I borrowed the snow effect from GitHub, works great and most importantly, it's done without images!

I know that there's not much description given, mainly because using
Console/Firebug (more info here) could reveal most of how I did it.

At the end of the day, while it's most likely better to draw with canvas,
CSS alone gives you some good tools to handle medium complexity drawings pretty well.

Happy holidays everyone!