Today’s featured website:

http://www.watchyulelog.com/

Continued from Friday:

Let’s make sure we’ve created a new class and applied it

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

Here’s where you can get the code to copy and paste into a new Notepad++ file (or just right click on the webpage and select view source):

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

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?

Want to do more cool stuff with CSS?

Check out http://cssdeck.com/