CSS Examples

Using box shadow, text shadow, and hover to give the button depth.

Using transition of 2 seconds ease out to change colors of image.

Using box shadow, text shadow, and hover from the example used during class to give the button depth.

Using "animation-iteration-count:infinite" to make the movemenet loop and "animation-direction: alternate" to make it bounce back and forth with a duration of 1 second.

Using border-radius and transition all to change red circle to a black square with a 1 second delay on click.

Used "transform:rotate" to spin the image.

Using 2 second ease to transition in shaded border and zoom in.

This crap is pissing me off and won't align to the bottom!!!!!!!!

This isn't very impressive at all but I am really running out of ideas.

Using rotate and % margins to roll the spinning image to one side.

Oh shit finally got this one to work. Using keyframes and a repeating animation made her fall from the sky.

You guessed it ... it's a triangle. Used transparent left and right borders with a solid bottom to create the triangle and to make it less boring added a transition to a colored background behind the triangle.

Hover to stretch him side to side then click him to stretch him down!

Ahhhhhh....using opacity and animation with transition to make the image flash white. Click to send him speeding away in a flash.

Hover to change filter to greyscale or click to activate blur filter.

This is absolutely NUTS!!!!!! Broke out each letter into a seperate DIV and set a delay for the animation and transition so that it appears as though the font color change scrolls through the words letter by letter. There HAS to be a faster way to do this.

Click the words to send them sliding. Transition using margin left and top to push the image in a diagnal direction.

Click the rocket to make it blast off into outerspace!!!! Using margins and keyframes to push the rocket from the left margin off the screen speeding up after take off.

Give the frog a click to send him jumping across the screen. Using keyframes and margins to push the frog the right and up and down.

Zoom to the center of the image with a hover.

Using margins to push Dhalsim up and down to look as he is floating!

Yup a circle with a shadow on hover... fancy stuff here!

Descrip

More than meets the eye.

Hover to make the chair rock by rotating degrees with keyframes.

Getting later...yes it's a shrinking picture.

Sample email and password signin form.

Click here for fun!

I'm sleepy...this is just an image swap.

It's bedtime...fuck this shit!