CSS3 - The future now - Slide down / slide fly with animation

19th November 2010

Canon EOS500D

A digital camera (also digicam or camera for short) is a camera that takes video or still photographs, or both, digitally by recording images via an electronic image sensor.

Many compact digital still cameras can record sound and moving video as well as still photographs. Most 21st century cameras are digital.

Digital cameras can do things film cameras cannot: displaying images on a screen immediately after they are recorded, storing thousands of images on a single small memory device, recording video with sound, and deleting images to free storage space. Some can crop pictures and perform other elementary image editing. The optical system works the same as in film cameras, typically using a lens with a variable diaphragm to focus light onto an image pickup device. The diaphragm and shutter admit the correct amount of light to the imager, just as with film but the image pickup device is electronic rather than chemical.

Digital cameras are incorporated into many devices ranging from PDAs and mobile phones (called camera phones) to vehicles. The Hubble Space Telescope and other astronomical devices are essentially specialized digital cameras.

copyright © stu nicholls - CSS play


No javascript, no hacks, no expressions, just CSS, XHTML.

It has been a while since I posted any new demo because of our recent three week trip to New Zealand, Australia and Singapore and then catching up on all the work waiting for us when we returned to the UK, but now that we are up to date I can post our next demo which makes use of CSS3 enhancements which are support in all the latest versions of non-IE browsers.

So this is a dropdown and flyout menu with many CSS enhancements for browsers that support them. At the moment these are the latest versions of Opera, Safari, Chrome and Firefox v4b.

The enhancements are:

  • The dropdown submenu will slide down and up.
  • The flyout submenu will slide out and in.
  • When hovering the images they will fade to 50% opacity and display information text on top of the image.
  • Rounded corners on all levels.
  • Drop shadows on all levels and these merge together so there is no unsightly join.

Tested in IE6, IE7, IE7 emulation, IE8, Firefox, Opera, Safari, Chrome, Avant, SeaMonkey, Flock and Maxthon. It should also work in Mac browsers.


You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay 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 CSSPlay.

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.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

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

Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.

Follow CSS play

Facebook   Twitter   Facebook Fan Page