Extras effects with CSS 3.0

I want to use some of the more interesting aspects of css 3.0 to add some cool effects to my site.

First of all we have an required element to add, a roll over image. To do this i want to take advantage of the transition: element of css 3

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

This means that in supported brousers rather then flip between the top and bottom image it animates between the two. This will look much better then just flipping.

Box-shadow

I also came up with the idea of using the box-shadow that we were shown to create a dynamic vignette on the site. As after all vignettes rule!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s