CSS Snowman

Today you’re going to edit a snowman that has been created entirely from CSS!

Here’s what he looks like now:

http://halls-of-valhalla.org/images/codes/snowman_css.html

Grab the code and copy and paste into a new Notepad++ file (or just right click on the webpage and select view source).

This snowman is created using the latest version of CSS, CSS3.  You will also notice pretty much everything in the CSS is a class, which we just learned how to do.  The classes are applied in the HTML to create the snowman.

Some advanced CSS is used- including transformations, keyframes, and gradients– to give the snowman its animated effect, to create the shapes, and to get the coloring just right.

What you are going to do:

Copy and paste the code into a blank Notepad++ file.  Save this as csssnowman.html.

Edit the code to change how the snowman looks.  Try changing colors and sizes and see what happens!

Don’t be afraid to tweak pieces of the code to see what happens.  Some stuff will look familiar and some won’t; that is totally OK!

Can you:

– Make the snowman’s head bigger?  Or flip it upside down?

– Change the color of the scarf or hat?

– Change the background color?

– Make the body parts larger or smaller?

– Make the body parts move differently?

– Change the colors of the body parts?