Creating a Christmas ecard using CSS3

I posted this in 2010 when at a previous company but its useful now and edited for personal use so I hope you like it.

Christmas eCard

For this year’s Christmas eCard I wanted to use some HTML5 and CSS3 after reading the very informative books from A List ApartHTML5 For Web Designers, by Jeremy Keith and CSS3 For Web Designers, by Dan Cederholm.

They are both very short overviews to the technologies and much like Andy Clarkes’ Hardboiled approach (on my reading list for next year!), encourage web designers to use the latest technology despite the fact that not all browsers support it, as you can code so the site ‘gracefully degrades’ and still looks good in older browsers. We used CSS transform to rotate the moon and to make the movements ease in and out and key-frame animation for both the snowman –who moves on mouse over, and the moon, then a rather nice snowflake script to sprinkle snow down the page. Lastly, multiple backgrounds were used to show the snow in different ways dependent upon the browser.

To view it click here. (NOTE: You may want to turn down your speakers!) **Link now unavailable unfortunately**

So how was it I created? Firstly, a graduated blue background was created and a layer of snow painted in the bottom. Next, I wanted to give the background a bit of depth so manipulated a photo I had taken with my iPhone of a party strobe light. All the colour was removed and it was blended into the blue gradient so it looked as though white rays were projecting from the bottom middle of the image.The shapes tool in Adobe Photoshop was used to create the trees and green gradient applied.

The Moon. Sketched then scanned

My colleague Ashley Evans [-at the time] drew the moon and snowman. The moon he drew freehand then scanned it. This gave a nice feel to it. Our ‘cool’ little snowman he drew straight into Adobe Illustrator. Both were exported as transparent png’s.

Backing up

Right, now for the coding. I’ll just put the relevant parts here. You can see the full coding from the web link. A wrapper was used to create the box of 800 by 600 pixels with some padding.

#wrap {
width: 800px;
height: 600px;
margin: 50px auto 0;
padding: 5px;
}

A white rounded border was added and with a box-shadow applied to it. All throughout, the –webkit and –moz prefixes were used for specific elements to work in webkit browsers (Safari, Chrome) and mozila (Firefox) and occasionally Opera (-o prefix).  

-webkit-box-shadow: 0 10px 50px rgba(10, 10, 10, 1);
-moz-box-shadow: 0 10px 50px rgba(10, 10, 10, 1);
box-shadow: 0 10px 50px rgba(10, 10, 10, 1);
border: 5px solid white;

Also the base code was added for when (and hopefully it will be when, not if!) the transform, animation and box-shadow functions get added to the official CSS3 specifications.

Adding the objects

All the objects were added in their own divs as follows.

<div id="moon">
<a href="#"><img src="img/moon.png" alt="Moon"/></a>
</div>


<div id="logo">
<a href="http://www.catchon.co.uk" target="_blank"> <img src="img/catchon-logo.png" alt="RMLalchan"/></a>
</div>


<div id="merryxmas">
<a href="#"> <img src="img/happyxmas.png" alt="RMLalchan wishes you a Merry Christmas and a Prosperous New Year"/></a>
</div>


<div id="trees">
<a href="#"> <img src="img/trees.png" alt="Trees"/></a>
</div>


<div id="snowman">
<a href="#"> <img src="img/snowman.png" alt="Snowman"/></a>
</div> 

Then the static objects were positioned, and padded as required.

#logo {
padding-top: 10px;
position: relative;
top: 100px;
right: -80px;
text-align: center;
}


#merryxmas {
text-align: center;
}


#trees {
float: left;
bottom: 35px;
}


#moon {
float: right;
display: block;
z-index: 1;
}


#snowman {
float: right;
position: relative;
bottom: -20px;
}

The far side of the moon

The subtle rotation of the moon was created by way of the webkit-animation element. This enables keyframes to be used to specify a transformation (–i.e. rotation 90deg) to happen from one position to another. This was used to rotate the moon from 0deg to 360deg.

@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}

to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}

Now we need to make the moon start its rotation, indicate how long we want it rotating for and at what speed. In this case we want it to do a full rotation over 50 seconds. This gives it a subtle feel which is what we’re after.We want it to spin and to continue infinitely. We have also given a z-index of 999 so it will remain on top should any other objects be added later.

z-index: 999;
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 50s;

Our SnowyFrosty the Snowman

Now for our snowman.  I love websites that add subtle animation which you may not immediately see. The snowman is such an element. Only when you mouse over it, do you see him move. We have him slowly swaying from side to side, 15 deg to be exact!

Similar to the moon you can see we have it set to sway from left to right over 4 seconds, and to do this infinitely. We apply this to the hover state as follows.

#snowman
a:hover img {
-webkit-animation-name: rotate-snowman;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
}

We also need to indicate at which point on the snowman we want him to rotate –the point of origin. For this we use the -webkit-transform-origin and express this as percentages. We want him to rotate on a central point on the bottom snow ball. This is exactly 50% along the X axis and around 80% down the Y axis. This should be placed on the hover state underneath the animation lines above so the full section reads:

#snowman a:hover img {
-webkit-animation-name: rotate-snowman;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-transform-origin: 50% 80%;
}

We haven’t as yet, told it to move the 15 degrees left to right. To do this we set up the key-frames to indicate how far we want the snowman to be rotated at a given percentage of the whole animation. For example, I wanted the snowman to sway far left 25% of the whole animation (-or at 1 second), then to be far right after 75% (-or at 3 seconds), then back to zero on 100% (-or at 4 seconds). This is set as follows.

@-webkit-keyframes rotate-snowman {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(-15deg); }
75% { -webkit-transform: rotate(15deg); }
100% { -webkit-transform: rotate(0deg); }
}

Snow is falling

Next the snow was added thanks to a brilliant little script by Natalie Downe and available at http://natbat.net/2010/Jan/15/css3snow/. This script enables random snowflakes to fall and spin at various angles disappearing at a specific point. It was edited to make the flakes fade as they reached the snow on the ground in the image and the number of flakes was increased. As good as it looks, it does not work in Internet Explorer (including version 9 beta), thus the multiple backgrounds function was used. A new background image (bg2.png) was created with static snow which is displayed on non webkit browsers. And should none of the background images be picked up, a background colour is used instead.

/* Fall back background for non-webkit / mozila browsers */

background: url(../img/bg2.png) no-repeat scroll -200px 0;

/* Simple background -non snow, for webkit / mozila browsers that works with the animated snowflakes */

background:
url(../img/bg3.png) no-repeat scroll -200px 0,
url(../img/bg2.png) no-repeat scroll -200px 0;
background-color: #1a1a1a;

Graceful Degradation

I hope you like it. Check out the books mentioned above for more info. Any comments you have, let me know.