Mobile Friendly Website

CSSPLAY

Doing it with style

CSS MENUSCSS3 and time:animate sliding information panels

Date : 8th September 2010

For all modern browsers


This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Paul Cézanne

(1839-1906)

painting

The French painter who exhibited little in his lifetime and pursued his interests increasingly in artistic isolation, is regarded today as one of the great forerunners of modern painting.

Henri Matisse

(1869-1954)

painting

Initially planned a career as a lawyer. However, he began to paint after an acute attack of appendicitis and then proceeded to become a leader in many art circles.

William Turner

(1775-1851)

painting

This English painter was one of the greatest romantic interpreters of nature in the history of Western art and is still unrivaled in the virtuosity of his painting of light.



Information

Just when you think that you have seen it all along comes another little know feature of Internet Explorer, 'time animation'. With this you have a little control over the animation of various element styles and in this demo I have used this method to animate the slide down/up of the information panels in the same way that transitions are used in CSS3.

So if you have IE5.5, IE6, IE7, IE8, Safari, Chrome or Opera you will see the panels slide down and up when hovering the top blue bar. Firefox users will have to wait until the release of v4 before thay see this smooth slide action.


You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


For more CSS demonstrations
I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page