A CSS take on the javascript LightBox using hover over thumbnail images

A click version of the Light Box for all browsers except Safari and Chrome

A CSS only version of the popular javascript dynamic menu.

A similar menu to the previous image version, but this time using expanding text on mouseover.

A very simple method of magnifying an image using just CSS

Another version of the CSS only fisheye menu, this time with expanding images and associated text.

Adding the use of png images for IE6 and giving a smoother zoom animation

Afer all this time there is finally a dropdown menu that doesn't use javascript, table, conditional comments, hacks, extra markup and works in all the major browsers including IE6.

A CSS dropdown menu using an image map for the top level items with a rollover state, using just two images.

A CSS slide show using numbers with a hover/click state but with the controls only visible when reqired.

CSS play's 'Clickbox' version of Lightbox that now works in Safari(PC) and Google Chrome.

A practical use of CSS play's 'Clickbox'. A CSS only version of Lightbox that now works in Safari(PC) and Google Chrome.

A revised and simplified 'Slideshow' that now eorks in Safari(PC) and Chrome.

Using CSS3 styles to produce an animated slide down/up menu identical to javascript versions.

Using CSS3 styles to produce an animated fade-in menu with curverd corners, drop shadows and gradient fills.

Using CSS3 styles to produce a sliding photo gallery.

Using CSS3 styles to produce a zoom/fade-in photo gallery.

Using CSS3 styles to produce buttons without graphics and no extra markup.

Using CSS3 styles to produce a sliding information panel over images.

Using CSS3 styles to produce a tabs menu with no graphics and no extra markup

Using CSS3 'general sibling' selector problems when using :hover in Safari and Chrome

Using CSS3 to produce a slide up/down multi column lists menu system

Using CSS3 selectors to animate a series of static images.

Using CSS3 selectors to animate two static images to give 3D effect.

The previous demo adapted to have a continuous left to right rolling can.

Using CSS3 to parallax scroll text.

Using CSS3 to produce a multi purpose dropdown menu system that can contain any information.

Using CSS3 to style different color square boxes into 3D spheres.

In collaboration with Javier Román Cortés I have produced an infinite zoom-in set of images animated with nothing more than Safari CSS webkit styling. To celebrate 20 years of Photoshop.

Using Webkit keyframes to produce an auto-run slideshow with pause facility using absolutely NO javascript. For Safari and Chrome at the moment.

Using Webkit keyframes to produce an auto-run digital time to show how long you have been on a page.

Using Webkit keyframes to produce an analogue clock. A small javascript routine is used to set the correct time on page entry.

Using webkit keyframes to continuously anumate a set of cubes.

Using CSS3 general sibling selector to produce a left/right click gallery.

Using CSS3 adjacent sibling selector to produce a Clickbox Gallery.

A CSS menu with current page override and graphic/information.

Using CSS3 adjacent sibling selector to produce a Click Slideshow.

How to fit images of unknown size into boxes of known size using just CSS.

Using CSS3 transitions to produce a smooth zoom on hover icon menu.

Two methods to indicate text-overflow. One using CSS3 and the other using a small graphic.

Using CSS3 transitions and delay to produce a sliced image rollover 'poster' change.

Using CSS3 transitions to produce a smooth image enlarger.

Using CSS3 to produce a smooth slidout action for the top level and sub menus.

Using CSS3 to produce a smooth slidout for a single level menu with siding icons.

A CSS answer to the javascrpt drill-down menus.

CSS playBOX - The Ultimate CSS Lightbox.

CSS playBOX v2 - The Ultimate CSS Lightbox - with additional features.

A menu using the float/drop technique using background images with hover change and breadcrumb trail.

Another menu using the float/drop technique using total background images with hover change and breadcrumb trail.

A CSS3 animated droplist menu with slide up/down and fade in/out for browsers that support transitions