A simpler version of the Anywidth v5 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch. NO need for a special 'close' button or tab.

CSSplay Safari Mobile Flyout Menu Fixed

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

CSSplay 3D animated unfolding menu

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

CSSplay Safari Mobile Dropdown Menu Fixed

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

CSSplay 3D Runners

A group of three 3D 'stick men' runners using CSS3 3D transforms and keyframe anmation.

CSSplay 3D Sphere

A 3D Beach Ball using CSS3 3D transforms and no images.

CSSplay 3D Truncated Icosahedron

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

CSS3 3D jack-in-the-Box

Using CSS3 3D transforms to produce a Jck-in-the-Box with music.

CSSplay 3D Flip-down Menu

Using CSS3 3D transforms to produce a 'flip-down' animated menu.

CSSplay Sliding Boxes

A set of six 3D boxes sliding in a never ending pattern.

CSSplay Rotating Box

A spinning box with rotating faces using CSS3 3D transforms.

CSSplay Rotary Photo Gallery

A rotary gallery of images with click to view and permanent image changes.

CSSplay Horizontal Multi-media Accordian

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

CSSplay Horizontal Accordian

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

CSSplay Image Grid Zoom

A gallery of images on a grid with hover to zoom the images and partially zoom adjacent images.

CSSplay Dropline/Dropdown Menu

Using css3 transitons to animate a dropline/dropdown menu with 'current' page options.

The Right Move - Puzzle

A puzzle using :target.

Image Magnifier with Bounce

A simple image magnifier with a bounce animation.

CSSplay Slide/Fly menu with Image 'Bounce'

Using css3 transitions to animate a slide/fly menu with image 'bounce'.

CSSplay No Left Turn Maze Puzzle

Using :target to produce a click maze puzzle. Get to the end without turnng left.

CSSplay :target dropline menu

Using :target to produce a click open/close dropline menu.

CSSplay simple rollover menu

Using :before and :after pseudo-elements to produce a rollover menu.

CSSplay Stretch/Droplist Menu

Using CSS3 to animate a stretch/droplist menu.

CSSplay zoomBox Slideshow

A permanent image slideshow using switchable sets of thumbnail images and large images with captions.

CSSplay :target gallery with no 'back' button history problems

A :target gallery with no browser window jump and no cycling through the images when using the browser 'back' button.

CSSplay starLIGHT lightbox

A CSS only lightbox with PREVIOUS/NEXT/CLOSE buttons and captions with links.

CSSplay Any Size Gallery

Using CSS3 to produce a gallery for any size images.

CSSplay Mickey Mouse and Friends

Using CSS3 to produce click gallery with permanent images to rival jQuery/javascript.

CSSplay Grid Accordian version 2

Using CSS3 to produce a set of thumbnail images that enlarge on click. Using :target with the general sibling selector and the 'no jump' technique.

CSSplay Drill Down Menu v2

Using CSS3 :target with general sibling selector to produce a 'non-jumping' drill-down menu.

CSSplay Grid Accordian

Using CSS3 to produce a set of thumbnail images that enlarge on hover.

CSSplay Circle Slideshow

Using CSS3 to rotate a set of thumbnail images and display a large images, all with a cick of a button.

CSSplay Image Rotation

Using CSS3 to rotate a set of images.

CSS3 Image Zoooom

Using CSS3 to 'animate zoom' a set of thumbnail images.

CSS3 left/right click panels #3

Using CSS3 to animate a left/right click set of information panels with 'jump to panel number' option.

CSS3 left/right click gallery #2

Using CSS3 to animate a left/right click gallery with sliding large images

CSS3 left/right click gallery

Using CSS3 to animate a left/right click gallery with sliding thumbnail images

A search box stretch feature

A CSS3 animation to stretch a search box on focus.

An Anywidth Menu version 5 for the iPad, iPhone and iPod Touch

A simpler version of the Anywidth v4 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch.

An Anywidth Menu version 4 for the iPad, iPhone and iPod Touch

A simpler version of the Anywidth v3 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch.

html5 oneBox lightbox

Re-coding and styling the 'oneBox' to make use of the html5 support for tabindex and :focus on any element.

An Anywidth Menu version 3 for the iPad, iPhone and iPod Touch

A simpler version of the Anywidth v2 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch.

Click action vertical slide menu with bug fixes for IE and iPad

A single level dropdown menu with clck action incorporating the latest bug fixes for IE and the iPad, iPhone and iPod Touch.

Click action concertina slide menu

A CSS3 vertical concertina menu with click to open/close and slide action. Suitable for the iPad, iPhone and iPod Touch.

Slide out menu

A CSS3 animated slide out menu

CSS3 Tabs

Using CSS3 to style unordered list with iner/outer radius tabs.

Three auto-run slideshows

Using transitions and keyframes with step() to prodcue three auto-run slideshows.

Click action dropdown menu

A dropdown menu with click to open/close, suitable for the iPad etc..

Image click information panels

A show/hide information panels using click to open and close.

Focus on images

A method of applying :focus to images.

Animated image enlarger

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

CSS3 Headline Changer

Using CSS3 keyframes to animate a headline changer. Degrades well in browsers that do not support keyframes

CSS solid text with shadow

Using CSS3 to style text to make it look solid with a realistic shadow and no extra markup.

A drop panel menu with multi-configurations

A drop panel menu with multiple configurations, rows, column, galleries flyout/dropdown sub menus, forms, suitable for the iPad, iPhone etc..

CSS3 Left/Right Slide Gallery

Using CSS3 transitions to produce a left/right sliding gallery.

A droplist menu with slide action

A droplist menu with slidedown action and pushdown of the content beneath.

CSS Round and Round circular menu

A circular icon menu with circular icon sub menus and animation.

CSS click droplist menu

A droplist menu with click action and click to close feature.

CSS3 LightBox Menu

Using only CSS to animate a 'LightBox' style droplist menu.

CSS3 Reflections

Using CSS3 and SVG to produce 'reflections' for Firefox 4 and 5 (as well as Safari and Chrome).

CSS3 Meowww!

Using CSS3 to draw and animate a cat meowing, for Safari, Chrome and the New Firefox 5.

CSS3 Keyframe 'Lightbox' Gallery

Using CSS3 Keyframes to produce an animated 'lightbox' type gallery, for Safari, Chrome and the New Firefox 5.

CSS3 Text Zoom Menu

Using only CSS to animate (zoom) a vertical menu list.

CSS3 Icon Zoom Menu

Using only CSS to animate (zoom/fade/skew) a set of icon images.

CSS3 Keyframe Gallery

Using CSS3 Keyframes to produce an animated gallery, for Safari, Chrome and the New Firefox v5.

A drop/fly menu for the iPad, iPhone and iPod Touch

A multi level dropdown/flyout animated menu with a 'close' tab for the iPad, iPhone and iPod Touch.

A slide down menu for the iPad, iPhone and iPod Touch

A single level slide down menu with a 'close' tab for the iPad, iPhone and iPod Touch.

An Anywidth Menu version 2 for the iPad, iPhone and iPod Touch

The previous menu modified to give a clearer indication of the 'CLOSE' tab for the iPad etc..

An Anywidth Menu for the iPad, iPhone and iPod Touch

Adapting the Anywidth dropdown/flyout menu to work on the iPad, iPhone and iPod Touch.

Content: 100 image gallery

Using :before/:after and content: together with the general sibling selector to produce a CSS only gallery of 100 images with all the image information in the stylesheet.

oneBox lightbox

Using :before/:after and content: together with the general sibling selector to produce a CSS only lightbox with minimal code.

CSS3 Resize

Demonstrations for the use of the 'resize' style.

CSS3 Page Flip Book

Using the CSS3 page flip routine to produce a page flip book.

CSS3 Page Flip Gallery

Using the CSS3 page flip routine to produce a page flip gallery.

CSS3 Page Flip Animation with a twist

Using CSS3 to animate a page flip to show two inner pages with a little twist.

CSS3 Page Flip Animation

Using CSS3 to animate a page flip to show two inner pages.

CSS3 Playing Cards

Using CSS3 to produce a playing card animated menu.

CSS Image Rotation

Using CSS to cycle though a set of images.

CSS3 Flower Power

Using CSS3 to produce a circular menu with petals on a flower.

CSS3 Photo Corner Curls

Using CSS3 to give the impresssion of curled corner on images of any size.

CSS3 Sliding Panels

Using CSS3 to animated a set of information panels of varying sizes.

A CSS3 gradient fill menu

Using CSS3 to produce a set of horizontal menus using gradient fills and inner/outer shadows.

A CSS3 click multi-dropline menu

Using CSS3 to produce a click action dropline menu with multiple levels.

A Circular menu squared

A circular menu with CSS3 enhancements.

A CSS3 animated drop down menu

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

Another update to the css only lightbox style

Using the latest techniques to update the previous lightbox demos.

An image fix for stay open sub menus on the iPad, iPhve and iPod Touch

Using an image to close any open sub menus on the iPad, iPhone and iPod Touch.

CSS click action vertical concertina menu

Another menu in the 'click' series to demonstrate a vertical concertina menu with a click action instead of the normal hover and working in IE6.

A pulldown panel with droplist menu suitable for use on the iPad, iPhone and iPod Touch

A pulldown panel containing a droplist menu using just CSS and suitable for the iPad, iPhone and iPod Touch.

Image Information Panels

Using CSS3 and the latest discoveries and techniques to have a click action image information panels.

A Droplist menu suitable for use on the iPad, iPhone and iPod Touch

A droplist menu with top level links and a close menu tab for the iPad, iPhone and iPod Touch.

Show me more/less revisited

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

CSS Stacked Slideshow

Using CSS to produce an animated stack of images.

A Flylist menu suitable for use on the iPad, iPhve and iPod Touch

A flyout list menu with top level links and a close menu icon for the iPad, iPhone and iPod Touch.

CSS3 'Hover/Click' Slideshow

Using CSS3 to produce a slideshow with a hover/click action and animation.

CSS ONLY click action vertical slide menu

The next in the 'click' series to demonstrate a vertical slide menu with a click action instead of the normal hover.

CSS ONLY click action flyout menu

The next in the 'click' series to demonstrate a flyout menu with a click action instead of the normal hover.

CSS ONLY click action dropline menu

Continuing with the 'click' series to demonstrate a dropline menu with a click action instead of the normal hover.

CSS ONLY click action multi-level menu

Using just CSS to produce a multi-level menu with a click action instead of the normal hover.

CSS3 Carousel Slideshow - 'Click version'

Using CSS3 to produce a Carousel Slideshow. Animation for Safari, Chrome, Opera and Safari v4 beta ONLY at the moment. Now with a click action

CSS3 3D Social Network Ring

Using CSS3 to produce a Rotating set of Social Network Icons - for Safari ONLY at the moment.

CSS3 3D Book

Using CSS3 with perspective to produce a book which has an open/close cover and 360 degree rotation. For Safari ONLY at the moment

CSS3 3D Carousel

Using CSS3 with perspective to animate carousel of slides with auto-run and slide enlarge. For Safari ONLY at the moment

CSS3 3D Billboard

Using CSS3 with perspective to animate a three image billboard. For Safari ONLY at the moment

CSS3 3D Rollover Menu

Using CSS3 to produce a 3D Rollover Menu - for Safari ONLY at the moment.

Image enlarger

Using the gerneral sibling selector to show enlarged sections of an image on hover.

CSS3 Carousel Slideshow

Using CSS3 to produce a Carousel Slideshow. For Safari, Chrome, Opera and Safari v4 beta ONLY at the moment

CSS3 Vertical Image Slide Menu.

Using CSS3 to produce a vertical sliding set of panels with menus.

CSS3 3D Rotating Card

Using CSS3 to rotate a card to see the reverse using 'perspective'. For Safari ONLY at the moment

CSS3 Book Shelf Menu.

Using CSS3 to produce a Book Shelf menu with animated books.

CSS3 Expanding Slide Down Menu.

Using CSS3 to produce a set of expanding panels with slide down sub menus.

Safari Mobile browser 'exploding' image links.

Using CSS3 to produce an expanding stack of image links, suitable for the iPad etc.

CSS3 Slide/Animation Pullup Menu

Using CSS3 to produce a sequence of image animations and a slide down sub menu system.

CSS3 Photo Information panels

Using CSS3 to produce a set of sliding information panels for photo links.

CSS3 Image Manipulation

Using CSS3 to animate a set of thumbnail images.

Safari Mobile browser flyout icons

A flyout set of social network icons with slide action aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).

CSS3 Hover-to-Run slideshow

Using CSS3 to produce an animated slideshow run by hovering an icon.

Safari Mobile browser flyout list

A flyout list menu with slide action aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).

CSS3 Rotate/Enlarge Gallery

Using CSS3 to rotate, slide and enlarge a set of images.

Safari Mobile browser droplist menu with delay

A droplist menu with delay action aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).

Safari Mobile browser flyout menu

A multi-level flyout menu aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).

CSS3 Icon Slide Menu

Using CSS3 to animate an icon menu with associated text.

CSS3 Slide Up/Down Gallery

A simple gallery which uses CSS3 to produce an up/down image slide animation.

Safari Mobile browser slide down menu

A single level slide down menu aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).

Safari Mobile browser dropdown menu

A single level dropdown menu aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).

CSS + TIME flyout menu

Using Microsoft timeaction (TIME) instead of tables and conditional comments for IE6.

CSS3 slide down menu

Using CSS3 to produce a slide down menu.

Drop List Menu

A Drop List Menu with curved corners and drop shadows.

Pull-down information panel

A CSS only answer to javascript/jQuery pull-down information panels (version 2).

Pull-down droplist menu

A CSS only answer to javascript/jQuery pull-down information panels.

Multi-column float/drop menu

Using the no hacks float drop technique to produce a multi-column dropdown menu.

Image dropdown with tooltips

Using the no hacks float drop technique to produce an image dropdown menu with popup tooltips.

A new venture into HTML5 and CSS3

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

CSS3 Left/Right Slide Menu

Using CSS3 to produce an animated left/right slide action.

CSS3 Animated Slideshow

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

CSS3 Slide down / Slide fly animation

Using CSS3 to produce an animated sliding dropdown flyout menu.

IE6 png fix for foreground images

Using just html and css with no extra markup to produce foreground png images

CSS3 Social Network Menu

Using CSS3 to produce a social network circle of icons.

CSS3 + TIME Sliding Panels Menu

Using CSS3, and a little TIME for Internet Explorer, to produce a vertical sliding menu to rival javascritp/jQuery.

CSS3 Image Slide Menu

Using CSS3 to produce a horizontal image slide menu to rival any javascript version.

HTML+TIME Flylist Menu

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

HTML+TIME background color change

Using HTML+TIME to get IE5.5 and IE6 to have a background color change on hover.

HTML+TIME Dropdown Menu

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

timeAction Galleries for IE7 and IE8

A series of three galleries using timeAction for IE7 and IE8 only.

CSS3 and time:animate sliding panels

A sliding panel demo using CSS3 and IE time:animate for smooth sliding action.

CSS3 Enhanced Picture Gallery

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

CSS3 Enhanced Photo Gallery

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

Dropdown with a twist

A dropdown menu with a twist and CSS3 enhancements.

Dropline with Overrun

A dropline menu with an overrun area and CSS3 enhancements.

CSS3 Animated Tabs

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

100% background Images using CSS3

How to style the background image using CSS3 to make it fit the container size.

Slide Line Menu with CSS3 animation

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

Flyline/Dropdown Menu with CSS3 animation

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

F.a.S.T Image Enlarger

Using the Fit and Shrink Technique to produce an image enlarger which does not need the image sizes to be defined.

Inline/Flyout menu

To complete the set of inline menus this is the flyout version with variable width and NO hacks of any kind, just html and css.

Inline/Dropline menu

A follow on from the dropdown menu this one is a dropline with variable width and NO hacks of any kind, just html and css.

NEW! Inline/Dropdown menu system

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

Float/Drop Menu Tutorial

A tutorial to explain how the float.drop menu system works.

CSS3 animated droplist menu

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

Droplist Menu with flyout sub menus

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

CSS Float/Drop image menu version 2

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

CSS Float/Drop image menu

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

CSS playBOX v2

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

CSS playBOX

CSS playBOX - The Ultimate CSS Lightbox.

CSS only drill-down menu

A CSS answer to the javascrpt drill-down menus.

CSS3 Single Level Slideout Menu

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

CSS3 Slideout Menu

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

CSS3 Image Enlarger

Using CSS3 transitions to produce a smooth image enlarger.

CSS3 Sliced Rollover

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

Image dropdown with rollovers

A single level dropdown with top level rollover images.

CSS3 Text Overflow

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

CSS3 Smooth Zoom Icon Menu

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

FaST Gallery.

Using FaST to create a gallery for any size images.

CSS play - F.a.S.T.

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

CSS3 Click Slideshow

Using CSS3 adjacent sibling selector to produce a Click Slideshow.

Dropline menu with current page override

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

CSS Select List Menu

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

ImageMap Revisited

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

CSS3 Clickbox Gallery

Using CSS3 adjacent sibling selector to produce a Clickbox Gallery.

CSS3 Click Gallery

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

CSS3 Animated cubes

Using webkit keyframes to continuously anumate a set of cubes.

Tower of Hanoi

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

Interactive Marquee for Safari and Chrome

Using CSS3 and keyframes to produce an interactive marquee

Dropshadow/gradient fill menu for IE

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

Shadows revisited

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

CSS3 Analogue Clock

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

CSS3 Digital Timer

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

CSS3 Auto-run Slideshow

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

CSS3 Infinite Zoom-In

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.

CSS3 3D Spheres

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

CSS3 'Drop Everything'

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

CSS3 Parallax Scrolling

Using CSS3 to parallax scroll text.

CSS3 Duff Roll

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

CSS3 Can Roll

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

CSS3 Animation

Using CSS3 selectors to animate a series of static images.

CSS3 slide up/down lists

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

CSS3 general sibling selector problem

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

CSS3 fitted tabs

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

Image Magnifier

The Image Magnifier of 2005 revisited to improve quality and make simpler and smoother.

CSS3 Photo Info

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

CSS3 Buttons

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

CSS3 Zoom Gallery

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

CSS3 Photo Slide

Using CSS3 styles to produce a sliding photo gallery.

CSS3 fade menu

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

CSS3 slide menu

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

'Showup' sub line menu

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.

Image dropdown menu - no hacks

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

'Pullover' sub line menu

Using the same NEW method as the previous menu to have the sub line appear above the top level links.

Totally NEW 'Push-Pull' sub line menu system

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

CSS play's 'Slideshow'

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

Using CSS play's 'Clickbox'

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

No hacks dropdown/flyout - 'Snowstorm'

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

CSS play's 'Clickbox'

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

No hacks dropdown/flyout menu v9

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

No hacks dropdown/flyout menu v8

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

No hacks flyout menu v2

A skeleton flyout menu with the path taken through the menu highlighted..

No hacks dropdown/flyout menu v7

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

No hacks dropdown/flyout menu v6

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

No hacks dropdown/flyout menu v5

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

No hacks dropdown/flyout menu v4

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

No hacks dropdown/flyout menu v3

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

No hacks dropdown/flyout menu v2

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

No hacks multi level flyout menu

The no hacks, no javascript, no tables and no conditional comments flyout menu with tabbing.

Re-styled no hacks dropdown/flyout menu

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

Multi-column flyout menu

A vertical flyout menu with multi column lists ans opacity.

Single level dropdown button menu

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

Simple anywidth flyout menu with breadcrumb trail

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

Multi-level, multi-line dropdown menu

A dropdown version of the previous multi-line flyout menu

Multi-level, multi-line flyout menu

A simple multi-level flyout menu with fixed widths and multi-line text.

Image information dropdown menu

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

Gallery with vertical sliding thumbnail images

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

Gallery with sliding thumbnail images

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.

Previous/Next preview click gallery

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.

Previous/Next click gallery

A click gallery using 'Previous' and 'Next' buttons 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 more complex image dropdown menu

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

A simple image dropdown menu

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

A peculiar IE bug that allows irregular image maps with PNG images

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.

Menu link text, png image replacement with rollover that degrades well with images off etc..

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 CSS gallery by numbers.

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

A dropdown menu with current page override.

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

A CSS image map menu.

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

A vertical slide with current page override.

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

A dropdown menu in shades of grey and black.

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.

TTF fonts for web pages

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

Zoom icon with speech bubble

A zoom icon with a popup sub menu in a speech bubble.

'max-width' for IE6

A CSS ONLY answer for 'max-width' in IE6. No javascript or Microsoft expressions.

UPDATE to new click to slide vertical menu

Added a click to open and also a reclick to close feature.

New click to slide vertical menu

A variation of the hover slide menu in which the top level links have two options.

Permanent image click gallery

A click gallery in which the large image is permanently on screen until another image is chosen EVEN when refreshing the page.

New horizontal multi level menu

..and finally a multi level version using the new system, again with no hacks, table, conditional comments or javascript.

New horizontal dropdown menu

For those who prefer nested unordered lists for their menus, again with no hacks, table, conditional comments or javascript.

New horizontal pullup menu

A horizontal pullup menu to continue with this series, again with no hacks, table, conditional comments or javascript.

New vertical fly left menu

A fly left version of the previous menu, again with no hacks, table, conditional comments or javascript.

New vertical flyout menu

Using the latest techniques for no hacks menus this is a vertical flyout version with all the features of the slide menu including tabbing, and the sub list stays open when clicking the top level.

New vertical slide menu

Using the latest techniques for no hacks menus this is a vertical slide version with all the features of the dropdown menu including tabbing, and the sub list stays open when clicking the top level.

New definition list menu

A definition list menu using the new menu system to simplify the styling

FINALLY a new CSS only dropdwon meu

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 vertical flyout list menu

A vertical menu with a 2 tier flyout and the last tier can contain any information you like including images, text and further links.

A single image zoom

Zooming a single image on hover.

A zoom gallery

A simple hover over thumbnail gallery with a zoom feature.

An image sliding menu

An experimental menu to explore the possibility of having sliding images on hover

A CSS Fisheye png menu

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

A CSS Fisheye Image Menu version 2

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

A dynamic CSS image magnifier

A very simple method of magnifying an image using just CSS

A CSS Fisheye Text Menu

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

A CSS Fisheye Image Menu

A CSS only version of the popular javascript dynamic menu.

A fix for a problem with divide lines and sliding doors hover graphics

Fixing a problem when having vertical divide lines between horizontal link and using rollover images.

A droplist menu with top level images and text/links

A droplist menu using top level blocks containing images with text and links.

A droplist menu with a sublist feature

A previous professional droplist menu with the additional feature of a dropline heading with droplists giving extra lists within the same dropdown.

A basic anywidth flyout menu

Back to basics to show how to use the latest techniques to produce a flyout menu with the widths of the sub levels automatically sized to fit the longest text.

Latest centering technique

There have been many methods of centering unordered lists of unknown width, but this is the one I have found to be most robust.

A film strip gallery version 2

As promised, the previous filmstrip gallery rotated into a vertical format with a few enhancements.

A film strip gallery

A gallery using a horizontal scrolling filmstrip containing negative/positive thumbnails and landscape/portrait large images with show/hide descriptive text.

Anywidth dropline/dropdown centered

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.

Mini tabbed pages version 2

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

A Professional droplist menu

A droplist menu with method of setting the number of columns in each list and the option of a full width bottom bar for extra linking.

An anywidth pullup, flyout menu

An anywidth menu with the top level centered and the sub menus as wide as required with pullup and flyout left/right.

A Dropline, Dropdown and two level Flyout menu

A version 2 of the dropline, dropdown and flyout hybrid menu.

A mixed gallery using the 'object' element

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.

Triple Link block with rollover effect.

A three link block of information with rollover effect.

Vertical scrolling photo gallery

A conversion of the horizontal scrolling gallery into a vertical version.

Professional anywidth centered dropdown/flyout menu

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.

Professional anywidth centered dropline menu

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

Professional anywidth centered dropdown menu

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

Photograph gallery using the 'object' element

A photograph gallery using just html/css to switch the contents of an 'object' for browsers that understand and an iframe alternative for IE.

Professional multi-column dropdown

A single level dropdown menu with multi-columns, headings and curved corners using sliding doors techniques for the dropdowns.

Professional dropdown flyout left/right menu

A dropdown menu with any width sub menus and the option of left or right dropdown/flyouts.

Centering unknown width horizontal menus - revisited

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.

Professional drop table menu

A dropdown menu that uses a table to hold the dropdown information.

Professional Any Width flyout menu with over run

A second 'any width' flyout menu, this time with an over run area and gapping between menu items.

IE6 select box bug - iframe shim fix

Applying the iframe shim fix to the variable width dropdown/flyout menu system. Using expressions to add the iframe and styling.

Skeleton menu version 4

The fourth in the skeleton menu series restyled to use recent developments to make it work in all versions if IE from IE5.5 to IE8.

Professional Any Width top and sub levels v2

A restyled version that allows dropdowns and flyouts to the left and right. Centered top level list and different color sub levels. Even works in IE5.5.

Professional Any Width flyout menu

A flyout version of the 'any width' dropdown menu.

Professional Any Width top and sub levels

A simplified method of producing a centered dropdown and flyout menu with variable widths depending on text content.

Total background image change on hover

A CSS only method of hovering over a horizontal menu link to change the whole menu background image.

Text OR associated image hover

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

Dropline menu with horizontal scrolling images

A dropline menu which uses sliding doors tabs for the top level and a horizontal scrolling dropline which has images and caption.

CSS Light Box - click version

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

CSS Light Box

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

Photo gallery with links to larger images

A photograph gallery with hover to show large images with linking to full size images or another page.

Cross browser tabbed pages version 2

A second version of the tabbed pages with a default page open on entry.

Cross browser tabbed pages with embedded links - revisited and updated

An update to one of my early 'one page' demonstrations to bring it up to date using the latest CSS techniques.

A Photograph Gallery - revisited and updated

An update to one of my early gallery demonstrations to bring it up to date using the latest CSS techniques.

Centered sliding doors dropline, dropdown, flyout

A centered dropline, dropdown, flyout menu, using the latest centering technique, with current selection option

Professional centered dropdown with flyout images

A centered dropdown menu, using the latest centering technique, with flyout images

3 column layout with 7 variations

A set of 7 variations on the 3 column equal height theme. All full width with header and footer, a mixture of fixed and percentage column widths and no images.

Fluid layout with all columns reaching footer

A fluid layout with max/min width, header/footer and multiple percentage columns ALL reaching the footer using NO images.

Vertical concertina with scrolling sub menus

Tree Frog menu revised to have scrolling sub menu lists to save space.

Centering single level menus - revisited

Applying a simple method of centering single level variable width, float left menus.

Float left variable width dropdown menus - CENTERED!!

At last a stable cross browser method of centering a variable width float left dropdown menu.

The IE6 3px bug fix

Just revisiting an old bug in IE6 for those who are still strugglimg for an answer.

A new CSS project

Not strictly CSSplay news but a new project for 2009. A new site for CSS only menus.

Semi-fluid, semi-fixed footer, layout

A new layout for a change. This one is semi-fluid 100% height with a semi-fixed footer.

Professional dropline menu #9

Another in the dropline series. This one has a simplified method of adding a 'current' selection.

Elegant dropdown menu with sliding sub menu titles

A simple dropdown, flyout menu with the sub links sliding over the flyout menu lists.

Circular icon menu with sub menus

The previous menu expanded to have sub menu icons with descriptive text.

Circular icon menu

A simple single level circular menu using icons with mouseover descriptions.

Bookshelf concertina menu

A horizontal concertina menu that takes on the appearance of a bookshelf with lever arch files.

Simple, elegant dropdown menu with Style.

A simple dropdown menu with no graphics but plenty of 'style'.

Concertina Vertical Slide Menu.

A CSS only version of the vertical sliding menu published on stunicholls.com.

Inline block links take 3 - a sliding doors version.

A sliding doors version of inline blocks to fit any text width.

Inline block links take 2 - the semantically correct version.

A version of the previous demo that uses sematically correct markup to achive the same results but fails in Safari(PC) and Google Chrome which do not undestand the styling.

How to style inline links as blocks.

An easy, validating method, to apply block styling to inline links.

Another variable width menu now including the select box bug fix for IE6.

A follow on from #4 but using another single line expression to place the iframe shim and work out the size required.

A variable widths dropdown menu without having to specify the widths or use conditional comments in the html

A follow on from #3 but using a single line expression to do what suckerfish does with javascript.

A variable widths dropdown menu without having to specify the widths

The answer to the problem of having variable width for each dropdown and flyout submneu without the need to style each width.

Professional fly-line menu #1

The first in a series of fly line menus, this one using icons and image replacement techniques

Professional dropline menu #8

Image replacement techniques to have top level icons and a simple method of displaying the meaning of each icon.

Professional dropline menu #7

The 7th professional dropline menu which can have as many droplines as you wish. The demo goes up to 5 lines.

Professional dropdown #13 - png series.

The thirteenth in the professional dropdown menu series. This one has full png transparency to give a translucent appearance to the menu with a single level dropdown menu.

Professional dropdown #12 - 3D series.

The fourth in the professional dropdown menu 3D series. This one has full png transparency to give a translucent appearance to the menu, variable width sub menus and incorporates an IE6 fix for select boxes.

IE6 iframe shim fix #3.

A third method of fixing the IE6 bug when dropdown menus are transparent and dropping under select boxes.

IE6 iframe shim fix #2.

A second method of fixing the IE6 bug when dropdown menus are dropping under select boxes.

Professional dropline menu #6

The 6th professional dropline menu with ability to have a current selection and dropline highlighted.

CSS version of tic-tac-toe

Another CSS game, just for fun and to show that it can be done. Uses small javascript routine to read mouse clicks and hovers. The logic, however, is all CSS.

Safari webkit transitions

A demonstration for Safari users only to show how this browser is expanding its webkit repertoire.

Vertical concertina menu

A vertical example of a concertina menu with the first level open as default.

Horizontal images scroller

An experimental menu using horizontal scrolling images.

Flyout with breadcrumbs

A flyout menu with the facility to add a breadcrumb trail to the current page.

Concertina menu

A horizontal concertina menu for displaying further information including list, images and text.

IE6 iframe shim fix.

An easy method of fixing the IE6 bug when dropdown menus are dropping under select boxes.

Professional dropdown #11 - 3D series.

The third in the professional dropdown menu 3D series. This one has full png transparency to give a translucent appearance to the menu.

IE6 AlphaImageLoader and unselectable links

Solving the problem of having unselectable links when placed over AlphaImageLoader pngs.

Not so simple photograph gallery.

The gallery that many visitors have been asking for. The simplest gallery with three extra features.

Professional dropdown #10 - 3D series.

The second in the professional dropdown menu 3D series. This one has greater flexibility in size and color.

Professional dropdown #9 - 3D series.

A professional dropdown menu with a 3D look using png shadows.

A flyout menu over a flash object

A fix to get flyout (and dropdown) menus to show over a flash object.

Professional dropdown #8 - IE6 select box bug fix

Finally an easy fix for the IE5.x and IE6 bug where a select box will always appear on top of a dropdown menu list. All done with CSS and an iframe shim.

Professional dropline / dropdown / flyout hybrid menu

Another version of the dropline dropdown hybrid menu to add a flyout stage.

Sliding list photo click gallery

A follow on from the sliding gallery but this time using clicks to open each set. Also has additional features allowing the use of landscape and portrait images and descriptive text.

Image dropdown menu

A menu that many visitors have asked for. Using images in place of text.

Professional drop down menu #7

The seventh in the professional drop down series. This one has a current drop-line feature.

Image map with circular hot-spots

A method of producing CSS only circular hot-spots on an image map.

Vertical slide and flyout menu

A vertical sliding menu with flyout sub levels based on my javascript 'tree frog' series.

Sliding list photo gallery

A photo gallery in which the photos can be split into various category lists which appear in a sliding menu system.

Pro left/right dropline

A dropline menu split into two parts with left aligned and right aligned top level items.

Pro dropline/dropdown

A hybrid menu using a dropline and dropdown sub menu system

Skeleton dropdown menu #2

The second in the skeleton series, this time for use on dark backgrounds.

Professional horizontal menu #17

Continuing the Professional horizontal series with menu #17.

Professional dropdown menu #6

Continuing the Professional dropdown series with one that allows section headings and dividers in the submenus.

Skeleton menu

A simple menu with variable width drop-down and flyout sub levels in which the widths are as large as necessary to contain the text.

Photo Scroll Gallery

The second in a series of galleries using just a little javascript to control the styling and produce a left/right thumbnail selector.

Photo Click Gallery

A Photograph Click Gallery using a little javascript to give more control over the presentation.

Show me some more...again

A revised 'show me some more' demonstration using a small javascript 'toggle' routine to alter stylesheet class names.

Tree Frog Menu take two

The previous 'Tree Frog' menu revisited and restyled into a vertical slide menu with sub level flyouts.

Pull down tabs menu

Back to a more 'normal' menu which has a 'pull down' action with the top level list item dropping down to reveal the sub menu.

Experimental Tree Frog Menu

An experimental menu using javascript 'click' to open the top level drop down list and 'hover' to open sub levels. Uses a small javascript routine that styles 'li:click' and li:hover.

Experimental Click Menu

An experimental menu using 'click' to open the top level drop down list. Uses a small javascript routine that styles 'li:click' in a simailar way to the suckerfish 'li:hover'.

Pro drop menu #5

Another drop down menu in the professional series, this time with top level image replacement and variable width sub levels.

Scrolling Image Map

A scrolling Image Map with fixed information panes.

Professional drop-down menu #4

Professional drop down menu with variable widths for the drop down.

Professional drop-down menu #3

Convertion of one of the simple horizontal professional series into a drop down menu.

Professional drop-down menu #2

Professional looking drop-down menu using text over background images.

Professional drop-line menus

Professional looking drop-line menus in four different colors.

Isometric pixel art maze puzzle

A 3D look maze puzzle made entirely with CSS.

Transparent border error in IE7.

Highlighting a transparent border styling error in IE7.

Transparent borders for IE5.x and IE6.

How to style transparent borders in IE5.x and IE6 using just CSS border styling and a couple of extra divs.

Cops and Robbers Puzzle.

A bit of lighthearted fun using just CSS.

Pro image centered drop tab.

A professional quality sliding doors drop tab centered with text links and description option.

Pro image centered drop-line.

A professional quality sliding doors drop-line centered with text links.

Pro image drop-down.

A professional quality sliding doors drop-down with text links.

Professional drop-down.

A professional quality drop-down menu with top level image rollovers.

Professional horizontal series.

A series of professional quality horizontal menus using the 'sliding doors' techniques.

A 5 level flyout with a twist.

Back to the 'traditional' menus using conditional comments, this is a vertical menu with up to five levels of flyout. The flyouts have alterante pull-up and drop-downs to save vertical space. Also has overlap and overrun for ease of use.

Experimental menus #7

Probably the menu in the 'Magic Menu' series for a while. This one is a vertical flyout menu with a difference. Again it uses no javascript, no conditional comments, no behaviors and no .htc file, just css and html.

One more experimental menus #6

Another menu in the 'Magic Menu' series. This one uses no javascript, no conditional comments, no behaviors and no .htc file, just css and html.

Two more experimental menus #4 and #5

Two new experimental dropdown menus added. Both using a small javascript routine, no conditional comments or hack, and both with multiple flyouts.. Look under 'Recent Pages' > 'Menus'.

Three experimental menus

Three new experimental dropdown menus added. One with no conditional comments or javascript but does not support one browser, one with a small javascript file for all browsers and a final one without any javascript or conditional comments for all browsers. Look under 'Recent Pages' > 'Menus'.

Three new menus

Three new menus added, a hexagon shaped, a 'shutter' dropdown and an enlarging with shadow effect.

Another new menu

Based on the ziggy menu this one is lozenge shaped and has transparent borders which work in IE5.5 and IE6 using just CSS.

Four new demonstrations

Four new demonstrations including a zig-zag dropdown menu, tool links and transparent borders in IE5.5 and IE6 using just CSS.

Two new menus

Two new menus showing paged information with a default page when initially displayed.

Six new demonstrations

One new experiments under 'Demos' showing image mapping maps, and FIVE new menus under 'Menus'

Two new demonstrations

Two new experiments under 'Demos' showing tooltips and background color change on hover

Four new centered menus and a Menu Builder

Four new horizontal centered menus and a Menu Builder for the simplified flyout menu. Make building the html and css a whole lot easier.

A new simplified dropdown menu

A new six level dropdown menu with overrun and overlap and simplified CSS styling

A new simplified flyout menu

A new five level flyout menu with overrun and overlap and simplified CSS styling

An up to date image map demonstration

A new slant on the original image map technique showing speech bubbles with embeded links

Three new demonstrations at CSS play

Three new demonstrations, 'CSS only speech bubbles', 'Overlap and overrun menu' and 'Chunky borders'

A couple of new galleries

Two new gallery slideshows showing the power of CSS

Overlapping tabs menus

Two experimantal overlapping tab menus using small images and plenty of CSS.

Mini tabbed pages

A method of compressing six mini information pages into one.

A menu with sloping sides

A tabbed menu with 45 degree side slopes

Dynamic fade-in image

How to make an image gradually appear using just CSS

Centering sliding doors menus

How to center a float left sliding doors 100% clickable menu.

One final sliding doors drop line menu

The last one in this series to show how compact this type of menu can be.

Another sliding doors drop line menu

A menu based on the sliding doors tab method with a drop line for each tab. Also demonstratets how to style a 'selected' link'.

Sliding doors the CSS play way

How to make A List Apart's Sliding doors clickable over the whole tab. No extra markup, just a small style change.

A new look for CSS play, with easier navigation

CSS play has redesigned to take on board all the comments over the last year and improve the look and navigation of the site.

Four NEW drop down menus

Four totally new drop down menus using definition lists. CSS only and compatible with all the latest browsers.

A host of new demonstrations

Twelve or more demonstrations, menus and examples have been added to the list at CSSplay

A new flyout menu with THREE sub levels.

A much simplified CSS solution to CSS only flyout menus now with three sub levels.

One final makeover for CSSplay and a new demonstration.

CSSplay goes through a major update and adds a method of adding pop-up images to your inline links.

CSS PLaY redesigns yet again.

CSS PLaY has another small redesign of the menu system (to stop visitors getting tired of the same old look ;o)

A new fly-out menu examples page

A page for fly-out examples showing what is possible with the 'CSS PLaY only' technique. Uses a much simplified single style sheet.

A new drop-down examples page and more animation

A page of dropdown/flyout examples showing what is possible with this 'CSS PLaY only' technique. Also a further animation based on the 'streaker' at http://www.cssplay.co.uk/menu/streaker_two.html which is best viewed in Firefox v1.5x and Opera v8.54

A new demonstration and another drop-down variation

A new demonstration to show that css can be dynamic in Firefox and Opera. Also a new page for drop-down examples shwn web ready ideas.

A small redesign of the menu system and a couple of new demonstrations

A redesign of the sub menu system to make pages easier to find, a demonstration of true css animation for Firefox and a gradient image magnifier can be found in this latest site update

Three more demonstrations added including a new slide show and a pop-up information bubble..

A variation on the photo gallery theme that will accomodate both landscape and portrait photos and a pop-up bubble for further information which can contain further link(s).

Conditional Comments - one step beyond.

How Internet Explorer's conditional comments can be used to target non-IE browsers and a combination of specific IE browsers with non-IE browsers.

The Ultimate CSS only drop down menu

A re-write of the CSS PLaY's previous examples has produced a multi line, drop down menu that can be resized yet stay in working order.

Multi-page photo gallery MK.2

A follow on from the multi-page photo gallery with an additional feature.

New multi-page photo gallery

A new css only photo gallery system modelled around the Suckerfish HoverLightbox.

More NEW menus

Four new menu ideas based on the recent method of producing validating cross browser fly-out and drop-down menus.

A NEW DROP-LINE menu system

Based on the cross browser fly-out and drop-down menus, this is the drop-line version which again works without javascript or behaviors and is compatible with Internet Explorer.

Favicon advertising

Why not try advertising by using your favicon. This favicon page offers an inexpensive way of promoting your web site.

A validating cross-browser drop-down css only menu

CSS PLaY finally comes up with a w3c cross-browser drop-down cascading menu system.

A validating cross-browser link calendar

CSS PLaY solves the problem of nesting links within links and passing w3c validation in Internet Explorer with this nested link calendar.

The ultimate image map - maybe

A new demonstration showing how to produce an irregular shape image map with a hover effect..

4 new and modified demos on CSS PLaY

CSS PLaY has three new demonstrations including a new CSS ONLY flyout menu that works in Internet Explorer and an update to the click gallery to add options to place the thumbnails to the left, right and bottom of the images.

5 new and modified demos on CSS PLaY

CSS PLaY boasts four new demonstrations including a new magnifying menu and an update to the cross browser drop domn menu to add a second level cascade in all browsers.

Another CSS puzzle.

Stu produces another pure css puzzle for you to solve.

A demonstration of circular links.

And finally a method of creating circular links without the normal square selection area.

How to create links that are not rectangular

A method of creating links that are not rectangular (the example is an interlinking cross array) and with no overlapping of link areas.

Four methods of partial opacity.

Four methods of applying text over an image by making the area beneath the text opaque. Several of the methods also work in Opera.

Shadow and Two Tone headings.

For Firefox, Safari, Opera (in fact all browsers but IE) a method of creating two color headers and drop shadow text without having to duplicate html information. IE sees only plain text.