A simple interaction can go a long way. The first time
 I experimented with HTML was in 2001 on neopets.com. On neopets.com, users had the option
 of customizing their profiles with custom HTML. One of the first things I remember was wanting colorful links, funky cursors and a matching scroll bar. Second only to the elusive faerie paint brush.

Since then, my interests have changed. I still enjoy exploring experimenting with programming and design (and writing, too, though I’d like to think I’ve become more eloquent than then). One of my favorite design exercises is to add restrictions to a project. On this page, I use one interaction: hovering, in many different ways. Most of the time you hover over a link, but you can add a hover effect to anything you want.
palm drawing

Take a look at some fancy CSS selectors. palm tree palm tree One of my
 favs is the even or odd pseudo selector. You can get pretty creative with that. palm tree Check out those palms!

SVGs and CSS shapes are fun to play with, too. You can animate them and bring them to life with just a few lines of code. They’re used frequently as icons, but you can use them however you want. Here I’m using a CSS shape and changing it a few ways.

roses Images have a lot of CSS options, too. Though not way as sophisticated as photoshop, images have an array of filters you can use. This can be used as an easy way to systemize an archive of found images. superstudio

Animations can be used for
Lots of fun stuff!

Fin.

Now it’s your turn to try a few things...

1. In the first paragraph, make the long way hover effect happen quicker.

2. In the first paragraph, create a new gradient fill hover for the first two links. Hint

3. Rotate the palm in a different direction and increase its size on hover.

4. Turn the blue shape into a pink circle on hover.

5. Blur the images (the black and white ones) on hover.

6. Create your own composition exploring the hover property. Consider creating a metaphor for an existing object, or an interactive text composition. Work on this for the rest of class, and post it to your class homepage once you’re finished.

Remember, you will spend a lot of time googling. favicon smiley