December 12

posted Dec 12, 2011, 1:24 PM by Peter Knowles   [ updated Dec 12, 2011, 1:35 PM ]
Today's a day to WORK or PLAY. Which one do you get to do?

If for any reason, you did not turn in your Assignment 4 project (a web page about you with image gallery, two-column layout, drop-down menu and floating box) WORK on it today.

If you DID turn it in on Friday (or Thursday, or anytime before now) you get to PLAY with some crazy, snazzy, razzle-dazzle CSS features that you probably haven't tried before. You can add them to your latest assignment (just be sure to save the file you create by a different name -- so the good one doesn't get messed up).

Here's what you might want to try:

Flip your images on hover (See the code and examples to get you there)

Change your link styles on hover (See the code and examples to get you there)

Alter your box on hover (See the code and examples to get you there)

Or find something else in the CSS3 section of the W3Schools website to try out. 

As you can see, they all require you to get very comfortable with the hover coding. All you need to do is take an existing div element (for example, div.box) and repeat the div title with :hover at the end. 

So 

div.box {blah:blah;
etc.
}

will now look like this:

div.box {blah:blah;
etc.
}

div.box:hover {

}

and in between the curly brackets is where you put your razzle-dazzle style code. (Whatever you put in there only happens when you hover over the particular element.)


Comments