A CSS only method of hovering over text OR associated images to highlight both AND grey out other images.

After much searching of the web and with the arrival of IE8, I now have a method of positioning horizontal menus of unknown width left / center / right in the containing element.

A single level dropdown anywidth menu with dropdown that are centered beneath the top level links.

A dropline anywidth menu with droplines that are centered beneath the top level links which are also centered.

A multi level dropdown flyout anywidth menu with dropdown and flyouts that are centered beneath the top level links, with the ability to have a left or right flyout.

A mixed gallery using just html/css to switch the contents of an 'object'. The content can be text, images, shockwave/flash and quicktime movie.

A version of my mini tabbed pages with the ability to have a tab open on page entry.

A dropline with dropdown menu which has widths automatiaclly set to suit content, the top level centered and all sub levels centered beneath the parent item.

The no hacks, no javascript, no tables and no conditional comments dropdown/flyout menu restyled to work correctly in all browsers, with tabbing.

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

Using Microsoft filter to produce a drop shadow for all versions of IE to match the css3 shadows of Firefox etc.

Using webkit keyframes to continuously anumate a set of cubes.

Mapping of irregular shapes using just css. With hover effect and popup information panel.

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

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

Using CSS3 to produce an animated tabs menu with no images.

A simple photo gallery with CSS3 enhancements to rival javascript versions.

A simple picture gallery with CSS3 enhancements and pictures of various sizes.

Using CSS3 to animated a simple set of thumbnail images and their associated large image.

Using CSS to produce an animated stack of images.

Using CSS3 and the latest discoveries and techniques to update this demonstrations.

Using CSS3 to produce an animated drop down menu that look like jQuery.

A circular menu with CSS3 enhancements.

An image enlarger with animation, title and descriptive text (which can contain links)..

Using :target to create a permanent changing horizontal multi-media accordian menu with click action.

A 3D truncated icosahedron using CSS3 3D transforms and no images.

A method of closing an open dropdown menu by tapping anywhere in the screen

Using 3D transforms and transitions to animate an unfolding dropdown menu

A method of closing an open flyout menu by tapping anywhere in the screen

Using CSS to produce an animated stack of images, version 2.

CSS only tabbed pages with persist and several other features. For IE9+, Firefox, Opera, Safari and Chrome.

Using my latest techniques to produce and improved tabbed pages with persist

Using my latest techniques to produce a stacked slideshow with accessibility.

The tooltips demo updated to include CSS3 styles and to work on the iPad etc..

A CSS3 animated sprites using no images.

Using just CSS to produce a vertical menu with a stepped zoom action.

A CSS3 Stacking Slideshow with 3D animation for all modern browsers except Opera.

A CSS3 Animated 3D Cube Gallery that works in IE10.

A CSS3 Animated 3D Gallery with a challenge to get it working in IE10.

A responsive layout with animated repositioning of elements. For all the latest browsers.

A droplist animated menu suitable for PCs, Tablets and Smartphones.

A vertical concertina animated menu suitable for PCs, Tablets and Smartphones.

Using the latest CSS techniques to bring the previous Photo Infor demo up to date.

A responsive swipe action stacked slideshow for all browsers and OS, using a little jQuery.

A responsive swipe action stacked slideshow, with multiple instances and sizes, for all browsers and OS, using a little jQuery.

A CSS responsive slideshow with play, pause, previous, next, captions and image selection

Customizing a single responsive 'Swiper' slideshow to have thumbnails, animated captions, dynamic prev/next arrows and pause autorun.

Customizing a single responsive 'Swiper' slideshow to have background thumbnails and large images, animated captions, pause autorun.

The project is a collaboration between DensityDesign Lab and ISI... more

DensityDesign Research Lab took part in the Digital Methods Initiative... more