It is now possible to use ttf fonts in your web pages. There are now 5 browsers that support @font-face

A dropdown menu with top level centered and sub menus dynamic widths to fit the longest text, and all in shades of grey and black.

A vertical sliding menu with current page styling and the ability to override the current page style when hovering other items.

A dropdown menu with current page styling and the ability to override the current page style when hovering other items.

A method of replacing menu link text with rollover png images that works in IE6 and also degrades well when images are of and/or CSS is off.

A method of creating irregular shaped image maps with ease exploiting an odd effect when using Microsofts AlphaImageLoader to render background PNG images. Only for IE though.

A simple method of replacing all text with images in a single level dropdown menu with rollover.

A more complex method of replacing all text with images in a single level dropdown menu using individual png images.

A click gallery using 'Previous' and 'Next' preview images to navigate, in which the large image is permanently on screen until another image is chosen EVEN when refreshing the page. With descriptive text and linking option.

A click gallery using a sliding set of thumbnail images to navigate. The large image is permanently on screen until another image is chosen EVEN when refreshing the page. With descriptive text and linking option.

The previous gallery but with the thumbnails arranged vertically instead of horizontal.

A dropdown menu using top level png images with the submenu used for image information.

A dropdown version of the previous multi-line flyout menu

A simple anywidth CSS flyout menu with an easy method of having a breadcrumb trail.

Using the no hacks dropdown system and a little extra styling to produce a dropdown button menu with highlight on hover.

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

The no hacks, no javascript, no tables and no conditional comments dropdown/flyout menu with png opacity background images.

Using the new multi-level menu system this has a better indication of the path taken through the menu structure.

A multi-level drop/fly menu using the new system and mouse clicks instead of hovers.

A multi-level drop/fly menu using the new system with manually adjusted widths for top and sub levels.

The previous menu with the ability to adjust the widths of all levels.

The previous menu with the ability to adjust the widths of all levels and center each level.

The multi level dropdown/flyout menu with the path through the menu highlighted.

A small restyle to make this menu system more robust and have an easy menu trail style.

Back to the very basic styling to produce this no hacks dropdown/flyout menu.

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

A dropline menu using a totally NEW method that requires NO hacks and works in all browsers. Also allows tabbing.

Using the latest no hack system to have top level images and dropdown boxes cntaing images and text

Using the same NEW method as the previous menu to have the sub line appear above the top level links. This one has simpler styling.

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

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

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

Using Microsoft filter to produce a dropdown menu with drop shadows and gradient fill overlays

The Tower of Hanoi puzzle in collaboration with Javier Román Cortés

A CSS only dropline menu with current page selection and override when hovering other tabs.

Using CSS3 adjacent sibling selector to produce a Click Slideshow.

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

A single level dropdown with top level rollover images.

A CSS answer to the javascrpt drill-down menus.

A droplist menu with 1, 2 3 or 4 columns and flyout sub menus.

A totally new method of producing a dropdown menu with variable width and NO hacks of any kind, just html and css.

A flyline / dropdown menu with CSS3 enhancements for browsers that support animation.

A slide out menu with CSS3 enhancements for browsers that support animation.

A dropline menu with an overrun area and CSS3 enhancements.

A dropdown menu with a twist and CSS3 enhancements.

Using the w3.org HTML+TIME to produce a dropdown menu that works in IE browsers from IE5.5 upwards (and all other browsers).

Using CSS3 to produce a social network circle of icons.

Using CSS3 to produce an animated sliding dropdown flyout menu.

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

This site has been set up to explore the possibilities of using HTML5 with CSS.