cssplay.co.uk

A responsive autorun horizontal full screen stacked slideshow using CSS variables.

http://www.cssplay.co.uk/menu/cssplay-horizontal-stacked-slideshow-v2.html

A responsive full screen mp4 video with autoplay, muted, no controls and loop.

http://www.cssplay.co.uk/menu/cssplay-full-screen-video.html

A responsive transparent 'wait' spinner using system variables so that it can be easily resized.

http://www.cssplay.co.uk/menu/cssplay-spinner.html

A responsive autorun horizontal full screen stacked slideshow.

http://www.cssplay.co.uk/menu/cssplay-horizontal-stacked-slideshow.html

A simple responsive gallery using flex box.

http://www.cssplay.co.uk/boxes/flexbox-gallery.html

An update to a previous circular menu (July 2011) using the latest CSS techniques.

http://www.cssplay.co.uk/menus/cssplay-round-and-round-again.html

Using html5 to use four diferent images depending on browser window size. Suitable for all modern browsers.

http://www.cssplay.co.uk/menu/cssplay-responsive-autorun-picture-slideshow.html

A fifth CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-tree-v5.html

A fourth CSS only responsive multi-level menu with slide action suitable for all the latest browsers and OS.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-tree-v4.html

A jQuery plugin slideshow with many user parameters and customization v1.0.0

http://www.cssplay.co.uk/mi_slideshow/index.html

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

http://www.cssplay.co.uk/menu/responsive-thumbnail-swiper3.html

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

http://www.cssplay.co.uk/menu/responsive-thumbnail-swiper2.html

How to have thumbnail images on a single responsive 'Swiper' slideshow.

http://www.cssplay.co.uk/menu/responsive-thumbnail-swiper.html

Using 'Swiper' with html5 'picture' element to change the images depending on the browser window size, and update parameters.

http://www.cssplay.co.uk/menu/responsive-picture-swiper.html

A third CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-tree-v3.html

A CSS only responsive layout suitable for all the latest browsers and OS.

http://www.cssplay.co.uk/layouts/cssplay-flexbox-layout.html

A jQuery plugin gallery with many user parameters and customization v1.0.0

http://www.cssplay.co.uk/mi_gallery/mi_gallery.html

A second CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-tree-v2.html

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

http://www.cssplay.co.uk/menu/cssplay-responsive-slideshow-sn.html

A CSS responsive auto run slideshow with image selection and pause on hover

http://www.cssplay.co.uk/menu/cssplay-responsive-auto-run-selection.html

A CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-tree.html

A CSS only responsive multi-level concertina menu with bounce action suitable for all the latest browsers and OS.

http://www.cssplay.co.uk/menus/cssplay-responsive-concertina-bounce.html

A CSS only responsive multi-level slide in menu suitable for all the latest browsers and OS.

http://www.cssplay.co.uk/menus/cssplay-responsive-slide-multi.html

A CSS only menu using flexbox and order animation. Suitable for all the latest browsers, but only Firefox supports animation of the 'order' style.

http://www.cssplay.co.uk/menus/cssplay-flexbox-order.html

A CSS only 3x3 grid layout using 'scroll snap points to scroll the grid one screen at a time. For IE11 and Edge at the moment.

http://www.cssplay.co.uk/layouts/cssplay-snap-points-grid.html

A CSS only page layout using 'scroll snap points to scroll the page one screen at a time.

http://www.cssplay.co.uk/layouts/cssplay-scroll-snap-points.html

A CSS only circular menu with bounce animation using cubic-bezier timing.

http://www.cssplay.co.uk/menus/cssplay-bezier-curve-bounce-menu.html

A CSS responsive 3D 'slinky' animation for all the latest browsers, but buggy on iOS.

http://www.cssplay.co.uk/menu/cssplay-responsive-3d-slinky.html

A CSS only responsive full page gallery for all devices with no visible scrollbars.

http://www.cssplay.co.uk/menu/cssplay-full-page-gallery.html

A CSS and javascript responsive swipe action gallery with momentum scrolling. For touch screen, trackpad and mouse.

http://www.cssplay.co.uk/menu/cssplay-momentum-swipe-gallery-v2.html

A CSS responsive swipe action momentum menu for all the latest browsers, OS and devices using a little javascript.

http://www.cssplay.co.uk/menus/cssplay-responsive-swipe-momentum-menu.html

A CSS only responsive swipe action gallery with momentum scrolling. For touch screen and trackpad.

http://www.cssplay.co.uk/menu/cssplay-momentum-swipe-gallery.html

A javascript (no jQuery) responsive swipe action panel changer for mouse and touch screens. Works in all the latest browsers and operating systems.

http://www.cssplay.co.uk/menu/cssplay-hzswipe.html

A CSS ONLY responsive slideshow to rival jQuery/javascript with ability to show different images on PCs, tablets and mobiles

http://www.cssplay.co.uk/menu/cssplay-keyframe-slideshow.html

A CSS responsive slide down menu for all the latest browsers, OS and devices without using media queries.

http://www.cssplay.co.uk/menus/cssplay-responsive-slide-down.html

A simple CSS ONLY modal windows template, suitable for all the latest browsers.

http://www.cssplay.co.uk/layouts/cssplay-modal-template.html

A second demonstration showing how to animate CSS shapes using @keyframes to produce an autorun slideshow. For all modern browsers except IE and Firefox.

http://www.cssplay.co.uk/menu/cssplay-shape-slideshow-v2.html

A demonstration showing how to animate CSS shapes using @keyframes to produce an autorun slideshow. For all modern browsers except IE and Firefox.

http://www.cssplay.co.uk/menu/cssplay-shape-slideshow.html

A demonstration showing how to animate CSS shapes. For all modern browsers except IE and Firefox.

http://www.cssplay.co.uk/menu/cssplay-shape-hexagon.html

Using CSS shape-outside to emulate shape-inside with fixed positioning. For all modern browsers except IE and Firefox.

http://www.cssplay.co.uk/menu/cssplay-shape-inside-out.html

Using CSS shape to have text track the shape of images. For all modern browsers except IE and Firefox.

http://www.cssplay.co.uk/menu/cssplay-shapes.html

Another experimental CSS responsive single page website using 'viewport' with a 3 x 3 grid, suitable for all modern browsers and OS (fails in Safari PC)

http://www.cssplay.co.uk/layouts/cssplay-grid-viewport.html

A second experimental CSS responsive single page website using 'viewport', suitable for all modern browsers and OS (fails in Safari PC)

http://www.cssplay.co.uk/layouts/cssplay-experimental-viewport-layout.html

A CSS only responsive foreground image fullscreen slideshow with 'cover' and 'contain' images and no @media queries.

http://www.cssplay.co.uk/menu/cssplay-viewport-slideshow.html

A CSS only method of covering a responsive foreground image in a fullscreen browser window without @media queries.

http://www.cssplay.co.uk/menu/cssplay-image-cover.html

A CSS only method of containing a responsive foreground image in a fullscreen browser window without @media queries.

http://www.cssplay.co.uk/menu/cssplay-image-contain.html

An experimental CSS responsive single page website using 'viewport', suitable for all modern browsers and OS (buggy in Opera and fails in Safari PC

http://www.cssplay.co.uk/layouts/cssplay-viewport-layout.html

A CSS responsive multi-level menu for all browsers and OS, PCs, tablets and smartphones using a little jQuery.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-menu-jquery.html

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

http://www.cssplay.co.uk/menu/cssplay-swipe-stacked-slideshow-multi.html

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

http://www.cssplay.co.uk/menu/cssplay-swipe-stacked-slideshow.html

Another CSS responsive multi-level menu for all the latest browsers and OS, PCs, tablets and smartphones.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-menu-three.html

A CSS responsive multi-level menu for all the latest browsers and OS, PCs, tablets and smartphones.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-menu.html

A CSS ONLY responsive click/tap fade in/out menu for all the latest browsers and OS, PCs, tablets and smartphones.

http://www.cssplay.co.uk/menus/cssplay-responsive-menu-panel.html

A second CSS ONLY responsive click/tap droplist menu for all the latest browsers and OS, PCs, tablets and smartphones.

http://www.cssplay.co.uk/menus/cssplay-responsive-click-droplist-menu-v2.html

A CSS only version of tic-tac-toe for Player v Computer demonstating the use of :matches pseudo-class.

http://www.cssplay.co.uk/menu/cssplay-tutorial-tic-tac-toe.html

A tutorial to replace the default controls on a Vimeo video with a Play / Pause button, and make responsive.

http://www.cssplay.co.uk/menu/cssplay-tutorial-vimeo-hide-controls.html

A tutorial for CSS only responsive video (iframe) aspect ratios.)

http://www.cssplay.co.uk/menu/cssplay-tutorial-aspect-ratios.html

A tutorial for a responsive video (iframe) aspect ratio converter using calc()

http://www.cssplay.co.uk/menu/cssplay-tutorial-aspect-ratio-conversion.html

A tutorial for a simple responsive autorun slideshow sutiable for all the latest browsers and OS.

http://www.cssplay.co.uk/menu/cssplay-tutorial-autorun-slideshow.html

A CSS ONLY responsive click/tap droplist menu for all the latest browsers and OS, PCs, tablets and smartphones.

http://www.cssplay.co.uk/menus/cssplay-responsive-click-droplist-menu.html

A CSS ONLY responsive click/tap multi level menu for all the latest browsers and OS, PCs, tablets and smartphones.

http://www.cssplay.co.uk/menus/cssplay-responsive-click-tap-multi-level-menu.html

A CSS ONLY click/tap multi level menu for all the latest browsers and OS with fallback for IE7 and IE8.

http://www.cssplay.co.uk/menus/cssplay-multi-click-v3.html

A responsive left/right slideshow with wrap around using the latest CSS selectors.

http://www.cssplay.co.uk/menu/cssplay-left-right-slideshow.html

A responsive left/right auto play slideshow using the latest CSS selectors.

http://www.cssplay.co.uk/menu/cssplay-f1-auto-play.html

A basic responsive auto play slideshow using the latest CSS selectors.

http://www.cssplay.co.uk/menu/cssplay-lego-auto-play.html

An update to the CSS only responsive slideshow with auto play option for all the latest browsers and operating systems, to simplify and add extra functionality.

http://www.cssplay.co.uk/menu/cssplay-auto-play-gallery.html

A CSS only responsive slideshow with auto play option for all the latest browsers and operating systems.

http://www.cssplay.co.uk/menu/cssplay-auto-play-slideshow.html

A CSS ONLY universal slide in/out menu suitable for all the latest browsers and operating systems with animation.

http://www.cssplay.co.uk/menus/cssplay-universal-slide-out.html

A CSS3 only game of Tic-Tac-Toe player vs PC using the latest CSS3 selector styles.

http://www.cssplay.co.uk/menu/cssplay-tictactoe-css-only.html

A CSS only hover effect on an html imagemap. For Firefox, Chrome, Safari and Opera with fallback for IE7+

http://www.cssplay.co.uk/menu/cssplay-imagemap-hover-v2.html

A CSS and jQuery responsive single page website with 'wavy' partitions, suitable for all modern browsers and OS

http://www.cssplay.co.uk/layouts/cssplay-wavy-layout.html

A CSS only method of producing percentage border widths and text sizing without using @media queries.

http://www.cssplay.co.uk/boxes/cssplay-percentage-borders-and-text.html

A CSS and jQuery responsive single page website with 'slanty' partitions, suitable for all modern browsers and OS

http://www.cssplay.co.uk/layouts/cssplay-slanty-layout.html

A CSS ONLY responsive multi-level droplist menu suitable for all the latest browsers and operating systems with animation.

http://www.cssplay.co.uk/menus/cssplay-responsive-droplist-touch-screens.html

A responsive full screen vertical scrolling slideshow using CSS and a little jQuery for all modern browsers and OS.

http://www.cssplay.co.uk/layouts/cssplay-full-screen-slideshow.html

A CSS ONLY vertical concertina menu suitable for all the latest browsers and operating systems with animation.

http://www.cssplay.co.uk/menus/cssplay-vertical-slide-concertina.html

A CSS ONLY responsive slide down/up full screen menu suitable for all the latest browsers and operating systems with animation.

http://www.cssplay.co.uk/menus/cssplay-responsive-universal-dropdown.html

A CSS ONLY responsive multi-level droplist menu suitable for all the latest browsers and operating systems with animation.

http://www.cssplay.co.uk/menus/cssplay-responsive-universal-droplist.html

A CSS ONLY responsive 'curtains' layout using NO javascript. Suitable all the latest browser versions and OS, including tablets, touch screens and smartphones

http://www.cssplay.co.uk/layouts/cssplay-horizontal-blinds-css.html

A second responsive 'curtains' layout using a litle javascript, this time working in the opposite direction. Suitable all browsers and OS including IE7+, Android and windows 8 smartphones

http://www.cssplay.co.uk/layouts/cssplay-vertical-blinds.html

A responsive 'curtains' layout using a litle javascript. Working in all browsers and OS including IE7+ and Android

http://www.cssplay.co.uk/layouts/cssplay-van-gogh-curtains.html

EasySlide - A responsive, easy to setup, CSS only Slideshow for images of different sizes

http://www.cssplay.co.uk/menu/cssplay-easyslide-remix.html

EasySlide - A responsive, easy to setup, CSS only Slideshow

http://www.cssplay.co.uk/menu/cssplay-easyslide.html

A CSS only method of hiding the control bar on Vimeo videos

http://www.cssplay.co.uk/menu/cssplay-vimeo-hide-control-bar.html

Vimeo video select list with external play/pause/rewind controls and fallback for iOS

http://www.cssplay.co.uk/menu/cssplay-vimeo-playlist-controls.html

Vimeo video autopause and off screen pause/continue for all browsers including IE8+

http://www.cssplay.co.uk/menu/cssplay-vimeo-autopause-ie.html

Using CSS to style 'Awesome Icons'

http://www.cssplay.co.uk/menu/cssplay-awesome-icons.html

The British Flag using just two divs.

http://www.cssplay.co.uk/menu/cssplay-union-flag.html

A photograph gallery using css filters and transitions.

http://www.cssplay.co.uk/menu/cssplay-filter-gallery.html

Two methods of implementing a change of image from grayscale to color.

http://www.cssplay.co.uk/menu/cssplay-filter-gray.html

Two methods of implementing 'drop shadows' instead of 'box shadows'.

http://www.cssplay.co.uk/menu/cssplay-drop-shadow.html

A 3D mega menu with animation, suitable for touch screen devices, with fallback for IE7/8/9.

http://www.cssplay.co.uk/menus/cssplay-mega-menu.html

3D Swan Lake animation with reflection and ripples.

http://www.cssplay.co.uk/menu/cssplay-swan-lake.html

3D Astro Boy animation using a flat graphic folded into shape.

http://www.cssplay.co.uk/menu/cssplay-astro-boy.html

3D 'eyeball' spherical animation.

http://www.cssplay.co.uk/menu/cssplay-eyeball.html

3D Stormtrooper animation using a flat graphic folded into shape.

http://www.cssplay.co.uk/menu/cssplay-stormtrooper.html

3D modelling with 360 º animation suitable for IE10 and IE11 without using 'transform-style: preserve-3d;'

http://www.cssplay.co.uk/menu/cssplay-supercube-ie.html

3D modelling with 360 º animation using 'transform-style: preserve-3d;' so NOT for IE10 or IE11

http://www.cssplay.co.uk/menu/cssplay-supercube2.html

Another look at 3D modelling suitable for IE10 and IE11 without using 'transform-style: preserve-3d;'

http://www.cssplay.co.uk/menu/cssplay-supercube.html

Using CSS 'border', box-shadow' and 'radial-gradient' together with ::before & ::after to produce graphics.

http://www.cssplay.co.uk/menu/cssplay-borders-shadows-gradients.html

A droplist menu using the latest flexbox syling which does not require size calculations.

http://www.cssplay.co.uk/menus/cssplay-flexbox-droplist.html

Back to the very basic code and style to produce a 'sticky holy grail' layout.

http://www.cssplay.co.uk/layouts/cssplay-flex-basic-layout.html

A vertical accordion menu using the latest flexbox syling which does not require size calculations.

http://www.cssplay.co.uk/menus/cssplay-flexbox-accordion-menu.html

An accordion gallery using the latest flexbox styling techniques.

http://www.cssplay.co.uk/menu/cssplay-flexbox-gallery.html

A CSS responsive layout using the latest 'Flexbox' styling with header, three columns and sticky footer.

http://www.cssplay.co.uk/layouts/cssplay-flexbox-sticky-footer.html

A CSS only method of adding form input prompts.

http://www.cssplay.co.uk/menu/cssplay-form-prompts.html

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

http://www.cssplay.co.uk/menu/cssplay-photo-info.html

A CSS only 'loading' animation with no extra markup for all modern browsers.

http://www.cssplay.co.uk/menu/cssplay-loading-animation.html

A CSS only click/tap action multi level menu suitable for touch-enabled devices.

http://www.cssplay.co.uk/menus/cssplay-multi-click.html

A method of displaying team photos and information panels.

http://www.cssplay.co.uk/menus/cssplay-team.html

A CSS ring menu with a toggle action to open and close and zoom animation.

http://www.cssplay.co.uk/menus/cssplay-circular-checkbox.html

A CSS only gallery with permanent image changes, zoom toggle and captions

http://www.cssplay.co.uk/menu/cssplay-checkbox-gallery.html

A CSS only method of toggling the answers to FAQ questions

http://www.cssplay.co.uk/menu/cssplay-faqs-checkbox.html

A CSS only drill down menu suitable for PCs, Tablets and Smartphones.

http://www.cssplay.co.uk/menus/cssplay-drill-down-checkbox-menu.html

A CSS only method of toggling the zoom state of images. Works in all modern browsers including the Android browser.

http://www.cssplay.co.uk/menu/cssplay-toggle-zoom.html

A second responsive multi-level menu suitable for PCs, Tablets and Smartphones.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-two.html

A responsive multi-level menu suitable for PCs, Tablets and Smartphones.

http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level.html

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

http://www.cssplay.co.uk/menus/cssplay-touchscreen-concertina.html

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

http://www.cssplay.co.uk/menus/cssplay-touchscreen-droplist.html

An update to the Swipe Me Inline slideshow to add extra fuctions and simplify usage.

http://www.cssplay.co.uk/menu/cssplay-swipe-inline-two.html

An update to the Swipe Me! slideshow to add extra fuctions and simplify usage.

http://www.cssplay.co.uk/menu/cssplay-swipe-me-three.html

A second multi level mini menu suitable for PCs, Tablets and Smartphones.

http://www.cssplay.co.uk/menus/cssplay-smartphone-menu-v2.html

A CSS only full screen auto run slideshow with zoom effect and captions.

http://www.cssplay.co.uk/menu/cssplay-auto-zoom-slideshow.html

Version 1.1 of my BIG! Slideshow with additional features for all modern browsers.

http://www.cssplay.co.uk/menu/cssplay-bigslide.html

A 3D flip card photo gallery for all the latest browsers.

http://www.cssplay.co.uk/menu/cssplay-flip-show.html

A CSS conversion of a form select list to a drop list.

http://www.cssplay.co.uk/menu/cssplay-select-list-to-drop-list.html

An alternative to a form select list which can be fully styled.

http://www.cssplay.co.uk/menu/cssplay-select-list-alternative.html

An html imagemap with hover effect for all browsers except IE which has fallback to a plain imagemap.

http://www.cssplay.co.uk/menu/cssplay-imagemap-hover.html

A multi level mini menu suitable for PCs, Tablets and Smartphones.

http://www.cssplay.co.uk/menus/cssplay-smartphone-menu.html

The previous multi level mini menu suitable for smartphones adapted to show how it might look on PCs.

http://www.cssplay.co.uk/menus/cssplay-universal-mini-menu.html

A method of centering images and information panels using margin:auto;.

http://www.cssplay.co.uk/menu/cssplay-auto-center.html

A multi level mini menu suitable for smartphones.

http://www.cssplay.co.uk/menus/cssplay-smartphone-mini-menu.html

A set of rotating panels using just CSS3.

http://www.cssplay.co.uk/menu/cssplay-rotating-panels.html

A responsive swipe action inline gallery with swipe action for all modern browsers and OS.

http://www.cssplay.co.uk/cssplay-swipe-me-inline.html

A couple of single level responsive menus that works in all modern browsers including touch screens and smart phones.

http://www.cssplay.co.uk/cssplay-responsive-menu3.html

A responsive droplist menu that works in all modern browsers including touch screens and smart phones.

http://www.cssplay.co.uk/menus/cssplay-responsive-droplist.html

A responsive swipe action full screen gallery with swipe action for Windows 8 and IE10/11. NO javascript.

http://www.cssplay.co.uk/ie/cssplay-ie10-swipe.html

A simple HTML5 responsive video player with playlists, skinning and IE6-8 fallback.

http://www.cssplay.co.uk/menu/cssplay-er.html

A simple method of adding a playlist to HTML5 video including support for IE7+.

http://www.cssplay.co.uk/menu/cssplay-video-playlist.html

A second minimal jQuery and css3 responsive 'swipe' action full screen slideshows.

http://www.cssplay.co.uk/menu/cssplay-swipe-me-too.html

Using minimal jQuery and css3 to create responsive 'swipe' action full screen slideshows.

http://www.cssplay.co.uk/menu/cssplay-swipe-me-mobile.html

Using minimal jQuery and css3 to create responsive videos with playlists, video play state and multi occurrences.

http://www.cssplay.co.uk/menu/cssplay-html5-video-plus.html

Another Pong game, player v computer. Fixing some issues.

http://www.cssplay.co.uk/menu/cssplay-pong2.html

A Windows 8 'Metro' style menu suitable for all modern browsers including touch screens.

http://www.cssplay.co.uk/menus/cssplay-metromenu.html

A Ping-pong game, player v computer. Just for fun.

http://www.cssplay.co.uk/menu/cssplay-ping-pong.html

A tennis animation using simple html code and CSS.

http://www.cssplay.co.uk/menu/cssplay-tennis.html

A simple iris/diaphragm open/close menu.

http://www.cssplay.co.uk/menus/cssplay-iris-menu.html

A simple mini menu suitable for smartphones as well as PC/Mac/Android OS.

http://www.cssplay.co.uk/menus/cssplay-mini-menu.html

A conversion of a jQuery/javascript driven slideshow into a CSS only version.

http://www.cssplay.co.uk/menu/cssplay-conversion-gallery.html

A simple method of displaying sets of photographs. Suitable for all modern browsers.

http://www.cssplay.co.uk/menu/cssplay-oh-so-simple-gallery.html

Another method of displaying sets of photographs. Suitable for all modern browsers.

http://www.cssplay.co.uk/menu/cssplay-holiday-slide-show.html

A responsive image map that works on touch screen devices including Android OS and IE10.

http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html

A responsive single level menu that works on touch screen devices including Android OS and IE10.

http://www.cssplay.co.uk/menus/cssplay-responsive-single-level-menu.html

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

http://www.cssplay.co.uk/layouts/cssplay-responsive-layout.html

A responsive dropdown/flyout menu that works on touch screen devices including Android OS and IE10.

http://www.cssplay.co.uk/menus/cssplay-responsive-dropdown-touch-screen.html

A method of getting IE7, IE8 and early version of other browsers to support 'background-size:cover'.

http://www.cssplay.co.uk/boxes/cssplay-responsive-background-images.html

A responsive droplist menu that works on touch screen devices including Android OS and IE10.

http://www.cssplay.co.uk/menus/cssplay-responsive-droplist-touch-screen.html

A vertical concertina menu that works on touch screen devices including Android OS and has animation.

http://www.cssplay.co.uk/menus/cssplay-touch-slide.html

A dropline menu that works on touch screen devices including Android OS and has animation.

http://www.cssplay.co.uk/menus/cssplay-touch-dropline.html

A flyout menu that works on touch screen devices including Android OS and has animation.

http://www.cssplay.co.uk/menus/cssplay-flyout-touch-screen.html

A droplist menu that works on touch screen devices including Android OS and has animation.

http://www.cssplay.co.uk/menus/cssplay-droplist-touch-screen.html

Another method of producing a multi-level menu that works on touch screen devices including Android OS.

http://www.cssplay.co.uk/menus/cssplay-touch-multi-level-two.html

A multi-level menu that works on touch screen devices including Android OS.

http://www.cssplay.co.uk/menus/cssplay-touch-multi-level-one.html

A set of information panels that work on touch screen devices such as iPads, IE10 tablets and Android OS tablets.

http://www.cssplay.co.uk/menus/cssplay-information-panels.html

A CSS gallery to display some of the photos taken during our 2013 visit to New Zealand, Australia and Singapore

http://www.cssplay.co.uk/menu/cssplay-holiday-2013-photos.html

A method of getting a droplist menu to work in IE10 on touch screen devices.

http://www.cssplay.co.uk/menus/cssplay-droplist-menu-ie10-touch-screen.html

A method of getting multi level dropdown/flyout menus to work in IE10 on touch screen devices.

http://www.cssplay.co.uk/menus/cssplay-dropdown-menu-ie10-touch-screen.html

IE10 grid layout with three columns a central exclusion zone and touch screen scrolling gallery

http://www.cssplay.co.uk/ie/cssplay-ie10-grid-columns-touch-scroll.html

A CSS only method of producing image reflections on solid background colors.

http://www.cssplay.co.uk/menu/cssplay-reflections.html

Several methods of applying a 'swipe' color change to text on hover and a gradient color fill.

http://www.cssplay.co.uk/menu/cssplay-text-swipe-color-change.html

A Gallery with fly-in and fly-out animation between iage changes. Suitable for all the latest browsers including IE10.

http://www.cssplay.co.uk/menu/cssplay-fly-in-out-gallery.html

A set of six 3D boxes tht spin on their own axis and around a central point, suitable for IE10.

http://www.cssplay.co.uk/menu/cssplay-3d-spinning-boxes-for-ie10.html

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

http://www.cssplay.co.uk/menu/cssplay-3d-rotate-challenge.html

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

http://www.cssplay.co.uk/menu/cssplay-animated-cube-gallery.html

A CSS 3D animated flip down menu suitable for IE10.

http://www.cssplay.co.uk/menus/cssplay-3d-flip-menu-ie10.html

A CSS slide down menu with concertina action sub menus. Suitable for the iPad Etc..

http://www.cssplay.co.uk/menus/cssplay-slide-down-concertina.html

A CSS3 Animated Dymaxion Map that works in IE10.

http://www.cssplay.co.uk/menu/cssplay-3d-dymaxion-map-animation-for-ie10.html

A CSS3 Animated Cube that demonstrates the difficulty in styling for IE10 without using 'preserve-3d'.

http://www.cssplay.co.uk/menu/cssplay-3d-cube-animation-for-ie10.html

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

http://www.cssplay.co.uk/menu/cssplay-stacking-slideshow.html

Using CSS3 and the page flip technique to produce a book in which you can flip forwards and backwards through the pages.

http://www.cssplay.co.uk/menu/cssplay-peter-rabbit.html

A CSS3 gallery for images of different sizes - version 2.

http://www.cssplay.co.uk/menu/cssplay-anysize-gallery-v2.html

A CSS3 gallery for images of different sizes.

http://www.cssplay.co.uk/menu/cssplay-anysize-gallery.html

A CSS3 thumbnail gallery with reflow of thumbnail images when viewing large images.

http://www.cssplay.co.uk/menu/cssplay-reflow-gallery.html

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

http://www.cssplay.co.uk/menus/cssplay-stepped-text.html

Using just CSS to produce a multi-level menu with a click to open/close action instead of the normal hover suitable for the iPad.

http://www.cssplay.co.uk/menus/cssplay-click-drop-fly-ipad-v2.html

A simpler version of the Anywidth #6 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch. NO need for a special 'close' button or page wide transparent image.

http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad7.html

A CSS3 Brick wall using no images.

http://www.cssplay.co.uk/menu/cssplay-brick-in-the-wall.html

A CSS3 Random Heroes game, animated sprites using no images.

http://www.cssplay.co.uk/menu/cssplay-random-heroes.html

A CSS3 animated sprites using no images.

http://www.cssplay.co.uk/menu/cssplay-sprites.html

A CSS3 animated space invader using two divs and linear-gradients, no images.

http://www.cssplay.co.uk/menu/cssplay-space-invader.html

A logic version of Connect Four using just CSS3 for two players.

http://www.cssplay.co.uk/menu/cssplay-connect-four.html

A logic version of Tic-Tac-Toe using just CSS3.

http://www.cssplay.co.uk/menu/cssplay-tic-tac-toe.html

A CSS3 hover / dropdown menu with sub menus staying open when moving the mouse off the menu.

http://www.cssplay.co.uk/menus/cssplay-hover-drop-persist.html

A gallery with permanent image changes and a zoom/fly animation.

http://www.cssplay.co.uk/menu/cssplay-click-zoom-fly.html

Enlarging a section of a smaller image by vertically scanning the smaller image.

http://www.cssplay.co.uk/menu/cssplay-scan-enlarge.html

A horizontal left/right sliding panels menu with animation and permanent panel changes.

http://www.cssplay.co.uk/menus/cssplay-menu-slide.html

A left/right slider to reveal/hide an 'after' image suitable for IE7+.

http://www.cssplay.co.uk/menu/cssplay-before-after-slider-v2.html

A left/right slider to reveal/hide an 'after' image with a hold feature.

http://www.cssplay.co.uk/menu/cssplay-before-after-slider.html

Centering an image between two columns of text with wrap around

http://www.cssplay.co.uk/menu/two-column-text-with-centered-image.html

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

http://www.cssplay.co.uk/menu/cssplay-tooltips.html

A circular corner menu with animation.

http://www.cssplay.co.uk/menus/cssplay-corner-menu.html

Version 2 of the multi function slide show with permanent image changes for all modern PC browsers and Safari Mobile browsers.

http://www.cssplay.co.uk/menu/cssplay-stuslide-v2.html

A dropdown menu with a fade-in and slide-up animation.

http://www.cssplay.co.uk/menus/cssplay-slide-up-dropdown.html

A vertical concertina menu with a click to open and close action and animation.

http://www.cssplay.co.uk/menus/cssplay-click-click-slide-v2.html

Using just a definition list to produce a horizontal sliding menu with diagonal lists suitable for the iPad etc..

http://www.cssplay.co.uk/menus/cssplay-diagonal-slide.html

A slide show with permanent image changes for all modern PC browsers, Mac browsers and Safari Mobile browsers.

http://www.cssplay.co.uk/menu/cssplay-radar-gallery.html

A multi function slide show with permanent image changes for all modern PC browsers and Safari Mobile browsers.

http://www.cssplay.co.uk/menu/cssplay-stuslide.html

A full screen slide show with permanent image changes for all modern PC browsers and Safari Mobile browsers.

http://www.cssplay.co.uk/menu/cssplay-the-big-slide.html

A Swipe Left/Right Slide Show with permanent image changes for all PC and Safari Mobile browsers.

http://www.cssplay.co.uk/menu/cssplay-ipad-swipe-slideshow.html

The CSS play 'GO Slide' Slide Show with permanent image changes.

http://www.cssplay.co.uk/menu/cssplay-go-slide.html

Using just a definition list to produce a dropdown menu suitable for the iPad etc..

http://www.cssplay.co.uk/menus/cssplay-definition-list-menu.html

A CSS ONLY Dragonfly Slide Show with permanent image changes.

http://www.cssplay.co.uk/menu/cssplay-dragonfly-slideshow.html

A CSS ONLY resizeable, normal, italic, slant and kerning font.

http://www.cssplay.co.uk/menu/cssplay-cssfont.html

A CSS ONLY Rotary Slide Show with permanent image changes.

http://www.cssplay.co.uk/menu/cssplay-rotary-slideshow.html

A CSS ONLY Slide Show with permanent image changes.

http://www.cssplay.co.uk/menu/cssplay-slideshow.html

Using just CSS to produce drill down menu with permanent sub menu changes.

http://www.cssplay.co.uk/menus/cssplay-drill-down-radio.html

A CSS ONLY Dartboard using no images.

http://www.cssplay.co.uk/menu/cssplay-dartboard.html

Using just CSS to produce a pie menu with individual sectors an animation.

http://www.cssplay.co.uk/menus/cssplay-pie-menu.html

Using just CSS to produce a circular ring menu for all modern browsers.

http://www.cssplay.co.uk/menus/cssplay-ring-v2.html

A CSS ONLY Pie Chart using no images and with links on each sector.

http://www.cssplay.co.uk/menu/cssplay-pie-chart.html

Using a new technique to enlarge a section of an image.

http://www.cssplay.co.uk/menu/cssplay-click-enlarge.html

A :hover gallery with permanent image changes, version 2.

http://www.cssplay.co.uk/menu/cssplay-hover-permanent-gallery-v2.html

A click action dropline menu with persist and accessibility.

http://www.cssplay.co.uk/menus/cssplay-radio-dropline.html

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

http://www.cssplay.co.uk/menu/cssplay-radio-stack.html

A click action Tree Menu using just CSS.

http://www.cssplay.co.uk/menus/cssplay-checkbox-treemenu.html

A :hover gallery with permanent image changes.

http://www.cssplay.co.uk/menu/cssplay-hover-permanent-gallery.html

An update to the previous version of the click action multi-level menu with persist.

http://www.cssplay.co.uk/menus/cssplay-radio-drop-fly-two.html

Using my latest techniques to produce a Lightbox type gallery.

http://www.cssplay.co.uk/menu/cssplay-radiobox.html

Using just CSS to produce a click action vertical concertina menu with persist and accessibility

http://www.cssplay.co.uk/menus/cssplay-radio-concertina.html

Using my latest techniques to produce a left/right click gallery with image persist.

http://www.cssplay.co.uk/menu/cssplay-radio-left-right-click.html

Using just CSS to produce a click action multi-level menu with persist.

http://www.cssplay.co.uk/menus/cssplay-radio-drop-fly.html

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

http://www.cssplay.co.uk/menu/cssplay-radio-tabs.html

CSS only gallery with permanent images, using no :target, iframes, objects or javascript, version 2.

http://www.cssplay.co.uk/menu/cssplay-click-radio-galleries.html

Using my latest techniques to produce and improved show/hide extra information.

http://www.cssplay.co.uk/menu/showme-more-radio-method.html

CSS only gallery with permanent images, using no :target, iframes, objects or javascript.

http://www.cssplay.co.uk/menu/cssplay-click-radio-gallery.html

CSS only game of 'Whack-a-Rat' with on screen scoring and timer.

http://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html

Using just CSS to produce a circular set of icons with enlarge on hover.

http://www.cssplay.co.uk/menus/cssplay-circular-icons.html

Using just CSS to produce a circular radial animated menu.

http://www.cssplay.co.uk/menus/cssplay-radial.html

Using just CSS to produce a circular menu divided into quadrants.

http://www.cssplay.co.uk/menus/cssplay-quadrant.html

Using just CSS to produce a circular ring menu.

http://www.cssplay.co.uk/menus/cssplay-ring.html

Using just CSS to produce a hexagonal shape menu with no extra markup and no images.

http://www.cssplay.co.uk/menus/cssplay-hexagon.html

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

http://www.cssplay.co.uk/menu/cssplay-tabbed-pages.html

Using CSS3 transitions, transforms and keyframes to produce a 3D Dymaxion Map of the Earth's surface.

http://www.cssplay.co.uk/menu/cssplay-dymaxion-map.html

Using CSS3 transitions, transforms and keyframes to produce a 3D animation of the Earth, Mars, Jupiter and the Moon.

http://www.cssplay.co.uk/menu/cssplay-planets-moon.html

A second version of the marquee demo using CSS3 and keyframes to produce an interactive marquee for any length of text.

http://www.cssplay.co.uk/menu/css3-marquee-two.html

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

http://www.cssplay.co.uk/menu/content-gallery.html

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

http://www.cssplay.co.uk/menus/cssplay-click-drop-fly-ipad.html

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

http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow-v2.html

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.

http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad6.html

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

http://www.cssplay.co.uk/menus/cssplay-ipad-flyout-menu-fixed.html

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

http://www.cssplay.co.uk/menus/cssplay-3d-unfolding-menu.html

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

http://www.cssplay.co.uk/menus/cssplay-ipad-dropdown-menu-fixed.html

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

http://www.cssplay.co.uk/menu/cssplay-3d-runners.html

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

http://www.cssplay.co.uk/menu/cssplay-3D-sphere.html

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

http://www.cssplay.co.uk/menu/cssplay-truncatedicosahedron.html

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

http://www.cssplay.co.uk/boxes/jack-in-the-box.html

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

http://www.cssplay.co.uk/menus/cssplay-3d-flip-down.html

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

http://www.cssplay.co.uk/menu/cssplay-3d-box-slide.html

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

http://www.cssplay.co.uk/menu/cssplay-target-rotary.html

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

http://www.cssplay.co.uk/menu/cssplay-3d-box.html

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

http://www.cssplay.co.uk/menus/cssplay-media-accordian.html

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

http://www.cssplay.co.uk/menus/cssplay-horizontal-accordian.html

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

http://www.cssplay.co.uk/menu/cssplay-grid-zoom.html

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

http://www.cssplay.co.uk/menus/cssplay-dropline-dropdown.html

A puzzle using :target.

http://www.cssplay.co.uk/menu/cssplay-right-move.html

A simple image magnifier with a bounce animation.

http://www.cssplay.co.uk/menu/image-bounce.html

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

http://www.cssplay.co.uk/menus/cssplay-image-bounce-dropdown.html

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

http://www.cssplay.co.uk/menu/cssplay-no-left-turn.html

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

http://www.cssplay.co.uk/menus/cssplay-revolver.html

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

http://www.cssplay.co.uk/menus/cssplay-target-dropline.html

Using CSS3 to animate a stretch/droplist menu.

http://www.cssplay.co.uk/menus/cssplay-stretch-drop.html

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

http://www.cssplay.co.uk/menu/cssplay-zoombox-slideshow.html#s2p

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

http://www.cssplay.co.uk/menu/cssplay-target-gallery-no-history.html#t1

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

http://www.cssplay.co.uk/menu/cssplay-starlight-lightbox.html

Using CSS3 to produce a gallery for any size images.

http://www.cssplay.co.uk/menu/cssplay-any-size-gallery.html#target1

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

http://www.cssplay.co.uk/menu/cssplay-mickey-mouse.html

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

http://www.cssplay.co.uk/menus/cssplay-drill-down.html

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.

http://www.cssplay.co.uk/menu/cssplay-grid-accordian-target.html

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

http://www.cssplay.co.uk/menu/cssplay-grid-accordian.html

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

http://www.cssplay.co.uk/menu/cssplay-circle-slideshow.html

Using CSS3 to rotate a set of images.

http://www.cssplay.co.uk/menu/cssplay-image-rotation.html

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

http://www.cssplay.co.uk/menu/cssplay-zoooom.html

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

http://www.cssplay.co.uk/menu/cssplay-left-right-click-v3.html

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

http://www.cssplay.co.uk/menu/cssplay-left-right-click-v2.html

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

http://www.cssplay.co.uk/menu/cssplay-left-right-click.html

A CSS3 animation to stretch a search box on focus.

http://www.cssplay.co.uk/menus/cssplaymenu-search-stretch.html

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

http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad.html

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

http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad5.html

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

http://www.cssplay.co.uk/menu/html5-oneBox.html

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

http://www.cssplay.co.uk/menus/iPad-Anywidth3.html

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

http://www.cssplay.co.uk/menus/cssplay-ie-ipad-active-sibling-fix.html

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

http://www.cssplay.co.uk/menus/cssplay-click-click-slide.html

A CSS3 animated slide out menu

http://www.cssplay.co.uk/menus/css3-slide-out.html

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

http://www.cssplay.co.uk/menu/css3-radius-tabs.html

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

http://www.cssplay.co.uk/menu/cssplay-auto-run-slideshows.html

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

http://www.cssplay.co.uk/menus/cssplay-click-click.html

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

http://www.cssplay.co.uk/menu/cssplay-click-information.html

A method of applying :focus to images.

http://www.cssplay.co.uk/menu/cssplay-focus.html

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

http://www.cssplay.co.uk/menu/cssplay-popbox.html

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

http://www.cssplay.co.uk/menus/css3-headline-changer.html

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

http://www.cssplay.co.uk/menu/solid-text-shadow.html

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

http://www.cssplay.co.uk/menus/cssplay-drop-everything.html

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

http://www.cssplay.co.uk/menu/css3-left-right-slide.html

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

http://www.cssplay.co.uk/menus/dropslide-pushdown.html

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

http://www.cssplay.co.uk/menus/cssplay-round-and-round.html

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

http://www.cssplay.co.uk/menus/cssplay-click-droplist.html

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

http://www.cssplay.co.uk/menus/css3-lightbox-menu.html

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

http://www.cssplay.co.uk/menu/css3-reflections.html

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

http://www.cssplay.co.uk/menu/css3-meowww.html

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

http://www.cssplay.co.uk/menu/css3-keyframe-lightbox.html

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

http://www.cssplay.co.uk/menus/css3-zoom-icon.html

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

http://www.cssplay.co.uk/menus/css3-zoom-text.html

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

http://www.cssplay.co.uk/menu/keyframe-gallery.html

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

http://www.cssplay.co.uk/menus/iPad-slide-hide.html

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

http://www.cssplay.co.uk/menus/iPad-slidedown.html

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

http://www.cssplay.co.uk/menus/iPad-Anywidth2.html

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

http://www.cssplay.co.uk/menus/iPad-Anywidth.html

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.

http://www.cssplay.co.uk/menu/content100.html

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

http://www.cssplay.co.uk/menu/oneBox.html

Demonstrations for the use of the 'resize' style.

http://www.cssplay.co.uk/menu/resize.html

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

http://www.cssplay.co.uk/menu/peter-rabbit.html

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

http://www.cssplay.co.uk/menu/cssplay-flip.html

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

http://www.cssplay.co.uk/menu/cssplay-flip-gallery.html

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

http://www.cssplay.co.uk/menu/cssplay36.html

Using CSS3 to produce a playing card animated menu.

http://www.cssplay.co.uk/menus/css3-cssplay34.html

Using CSS to cycle though a set of images.

http://www.cssplay.co.uk/menu/image-rotation.html

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

http://www.cssplay.co.uk/menus/css3-cssplay32.html

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

http://www.cssplay.co.uk/menu/css3-photo-curl.html

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

http://www.cssplay.co.uk/menu/cssplay31.html

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

http://www.cssplay.co.uk/menus/css3-cssplay30.html

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

http://www.cssplay.co.uk/menus/css3-cssplay29.html

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

http://www.cssplay.co.uk/menus/css3-cssplay28.html

A circular menu with CSS3 enhancements.

http://www.cssplay.co.uk/menus/cssplay27.html

Using the latest techniques to update the previous lightbox demos.

http://www.cssplay.co.uk/menu/cssplayBox.html

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

http://www.cssplay.co.uk/menus/iPad-iMage.html

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.

http://www.cssplay.co.uk/menus/cssplay-click-vertical-concertina.html

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

http://www.cssplay.co.uk/menus/cssplay23.html

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

http://www.cssplay.co.uk/menu/cssplay-information-panels.html

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

http://www.cssplay.co.uk/menus/ipad-droplist.html

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

http://www.cssplay.co.uk/menu/showme-more.html

Using CSS to produce an animated stack of images.

http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow.html

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

http://www.cssplay.co.uk/menus/ipad-flylist.html

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

http://www.cssplay.co.uk/menu/cssplay-hover-click-slideshow.html

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

http://www.cssplay.co.uk/menus/cssplay-click-slide.html

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

http://www.cssplay.co.uk/menus/cssplay-click-flyout.html

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

http://www.cssplay.co.uk/menus/cssplay-click-dropline.html

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

http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html

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

http://www.cssplay.co.uk/menu/css3-carousel-click.html

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

http://www.cssplay.co.uk/menus/css3-cssplay16.html

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

http://www.cssplay.co.uk/menu/css3-3d-book.html

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

http://www.cssplay.co.uk/menu/css3-3d-billboard.html

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

http://www.cssplay.co.uk/menu/css3-3d-carousel.html

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

http://www.cssplay.co.uk/menus/css3-cssplay12.html

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

http://www.cssplay.co.uk/menu/enlarge-v2.html

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

http://www.cssplay.co.uk/menu/css3-carousel.html

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

http://www.cssplay.co.uk/menus/css3-image-slide-vertical.html

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

http://www.cssplay.co.uk/menu/css3-3d-card.html

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

http://www.cssplay.co.uk/menus/css3-cssplay6.html

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

http://www.cssplay.co.uk/menus/css3-cssplay5.html

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

http://www.cssplay.co.uk/menus/ipad-cssplay4.html

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

http://www.cssplay.co.uk/menus/css3-cssplay3.html

Using CSS3 to animate a set of thumbnail images.

http://www.cssplay.co.uk/menu/image-manipulation.html

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

http://www.cssplay.co.uk/menus/css3-photo-info.html

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

http://www.cssplay.co.uk/menus/ipad-social-network.html

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

http://www.cssplay.co.uk/menu/css3-hover-to-run.html

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

http://www.cssplay.co.uk/menus/ipad-flyout-slide.html

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

http://www.cssplay.co.uk/menus/ipad-droplist-delay.html

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

http://www.cssplay.co.uk/menu/css3-rotate.html

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

http://www.cssplay.co.uk/menus/ipad-flyout.html

Using CSS3 to animate an icon menu with associated text.

http://www.cssplay.co.uk/menus/css3-icon-slide.html

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

http://www.cssplay.co.uk/menu/css3-click-slide.html

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

http://www.cssplay.co.uk/menus/ipad-slide-down.html

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

http://www.cssplay.co.uk/menus/ipad-dropdown-single.html

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

http://www.cssplay.co.uk/menus/css-time-flyout.html

Using CSS3 to produce a slide down menu.

http://www.cssplay.co.uk/menus/css3-slide-arrow.html

A Drop List Menu with curved corners and drop shadows.

http://www.cssplay.co.uk/menus/drop-list-columns.html

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

http://www.cssplay.co.uk/menus/pull-down-info-panel.html

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

http://www.cssplay.co.uk/menus/pull-down.html

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

http://www.cssplay.co.uk/menus/float-drop-multi-column.html

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

http://www.cssplay.co.uk/menus/image-dropdown-v5.html

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

http://www.cssplay.biz/

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

http://www.cssplay.co.uk/menus/css3-left-right-slide.html

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

http://www.cssplay.co.uk/menu/css3-animated-slideshow.html

Using CSS3 to produce an animated sliding dropdown flyout menu.

http://www.cssplay.co.uk/menus/css3-slide-down-fly.html

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

http://www.cssplay.co.uk/ie/ie6-pngfix.html

Using CSS3 to produce a social network circle of icons.

http://www.cssplay.co.uk/menus/css3-social-network.html

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

http://www.cssplay.co.uk/menus/css3-rising-tabs.html

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

http://www.cssplay.co.uk/menus/css3-image-slide.html

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

http://www.cssplay.co.uk/menus/html-plus-time-flylist-menu.html

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

http://www.cssplay.co.uk/menu/html-plus-time-background-color-change.html

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

http://www.cssplay.co.uk/menus/html-plus-time-dropdown-menu.html

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

http://www.cssplay.co.uk/ie/time-action.html

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

http://www.cssplay.co.uk/menus/slide-tabs.html

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

http://www.cssplay.co.uk/menu/css3-picture-gallery.html

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

http://www.cssplay.co.uk/menu/css3-slide-show.html

A dropdown menu with a twist and CSS3 enhancements.

http://www.cssplay.co.uk/menus/css3-dropdown-all.html

A dropline menu with an overrun area and CSS3 enhancements.

http://www.cssplay.co.uk/menus/css3-dropline-overrun.html

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

http://www.cssplay.co.uk/menus/css3-tabs.html

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

http://www.cssplay.co.uk/boxes/css3-background.html

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

http://www.cssplay.co.uk/menus/css3-flyline-drop.html

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

http://www.cssplay.co.uk/menus/css3-slideline.html

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

http://www.cssplay.co.uk/menu/fast-enlarge.html

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.

http://www.cssplay.co.uk/menus/inline-flyout.html

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

http://www.cssplay.co.uk/menus/inline-dropdown.html

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.

http://www.cssplay.co.uk/menus/inline-dropline.html

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

http://www.cssplay.co.uk/menus/basic-float-drop.html

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

http://www.cssplay.co.uk/menus/css3-slide-list.html

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

http://www.cssplay.co.uk/menus/droplist-flyout.html

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

http://www.cssplay.co.uk/menus/menu-cssm150610.html

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

http://www.cssplay.co.uk/menus/menu-cssm120610.html

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

http://www.cssplay.co.uk/menu/playboxv2.html

CSS playBOX - The Ultimate CSS Lightbox.

http://www.cssplay.co.uk/menu/playbox.html

A CSS answer to the javascrpt drill-down menus.

http://www.cssplay.co.uk/menus/drill-down.html

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

http://www.cssplay.co.uk/menus/css3-single-slide.html

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

http://www.cssplay.co.uk/menus/css3-slideout.html

Using CSS3 transitions to produce a smooth image enlarger.

http://www.cssplay.co.uk/menu/css3-image-enlarger.html

A single level dropdown with top level rollover images.

http://www.cssplay.co.uk/menus/image-dropdown-v4.html

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

http://www.cssplay.co.uk/menu/css3-sliced-rollover.html

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

http://www.cssplay.co.uk/menu/text-overflow.html

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

http://www.cssplay.co.uk/menus/css3-zoom.html

Using FaST to create a gallery for any size images.

http://www.cssplay.co.uk/menu/fast-gallery.html

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

http://www.cssplay.co.uk/menu/fast.html

Using CSS3 adjacent sibling selector to produce a Click Slideshow.

http://www.cssplay.co.uk/menu/css3-clickslideshow.html

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

http://www.cssplay.co.uk/menus/dropline-current-override.html

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

http://www.cssplay.co.uk/menus/hover-select.html

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

http://www.cssplay.co.uk/menu/imagemap-revisited.html

Using CSS3 adjacent sibling selector to produce a Clickbox Gallery.

http://www.cssplay.co.uk/menu/css3-clickbox-gallery.html

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

http://www.cssplay.co.uk/menu/css3-click-gallery.html

Using webkit keyframes to continuously anumate a set of cubes.

http://www.cssplay.co.uk/menu/css3-cubes.html

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

http://www.cssplay.co.uk/menu/hanoi.html

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

http://www.cssplay.co.uk/menus/css3-ie-dropdown.html

Using CSS3 and keyframes to produce an interactive marquee

http://www.cssplay.co.uk/menu/css3-marquee.html

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

http://www.cssplay.co.uk/menu/css3-shadows.html

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

http://www.cssplay.co.uk/menu/css3-digital-timer.html

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

http://www.cssplay.co.uk/menu/css3-clock.html

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

http://www.cssplay.co.uk/menu/css3-auto-run.html

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.

http://www.cssplay.co.uk/menu/css3-zoom.html

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

http://www.cssplay.co.uk/menu/css3-spheres.html

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

http://www.cssplay.co.uk/menus/css3-drop-everything.html

Using CSS3 to parallax scroll text.

http://www.cssplay.co.uk/menu/css3-parallax.html

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

http://www.cssplay.co.uk/menu/css3-duff-roll.html

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

http://www.cssplay.co.uk/menu/css3-can-roll.html

Using CSS3 selectors to animate a series of static images.

http://www.cssplay.co.uk/menu/css3-animation.html

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

http://www.cssplay.co.uk/menus/css3-hover-tilde-problem.html

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

http://www.cssplay.co.uk/menus/css3-multi-slide.html

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

http://www.cssplay.co.uk/menus/css3-fitted-tabs.html

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

http://www.cssplay.co.uk/menu/enlarge.html

Using CSS3 styles to produce a sliding photo gallery.

http://www.cssplay.co.uk/menu/css3-photo-slide.html

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

http://www.cssplay.co.uk/menu/css3-zoom-gallery.html

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

http://www.cssplay.co.uk/menu/css3-buttons.html

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

http://www.cssplay.co.uk/menu/css3-photo-info.html

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

http://www.cssplay.co.uk/menus/css3-fade-menu.html

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

http://www.cssplay.co.uk/menus/css3-slide-menu.html

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.

http://www.cssplay.co.uk/menus/cssplay-showup.html

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

http://www.cssplay.co.uk/menus/ul-image-dropdown.html

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

http://www.cssplay.co.uk/menus/cssplay-pullover.html

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

http://www.cssplay.co.uk/menus/cssplay-pushpull.html

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

http://www.cssplay.co.uk/menu/slideshow.html

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

http://www.cssplay.co.uk/menus/snowstorm.html

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

http://www.cssplay.co.uk/menu/using-clickbox.html

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

http://www.cssplay.co.uk/menu/cssplay-clickbox.html

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

http://www.cssplay.co.uk/menus/ul-multi-nine.html

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

http://www.cssplay.co.uk/menus/ul-multi-eight.html

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

http://www.cssplay.co.uk/menus/ul-flyout-two.html

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

http://www.cssplay.co.uk/menus/ul-multi-seven.html

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

http://www.cssplay.co.uk/menus/ul-multi-five.html

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

http://www.cssplay.co.uk/menus/ul-multi-six.html

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

http://www.cssplay.co.uk/menus/ul-multi-four.html

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

http://www.cssplay.co.uk/menus/ul-multi-three.html

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

http://www.cssplay.co.uk/menus/ul-multi-two.html

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

http://www.cssplay.co.uk/menus/ul-multi.html

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

http://www.cssplay.co.uk/menus/ul-flyout.html

A vertical flyout menu with multi column lists ans opacity.

http://www.cssplay.co.uk/menus/pro-flyout-list.html

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

http://www.cssplay.co.uk/menus/dl-dropdown-buttons.html

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

http://www.cssplay.co.uk/menus/latest-flyout-breadcrumb.html

A dropdown version of the previous multi-line flyout menu

http://www.cssplay.co.uk/menus/multi-line-dropdown.html

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

http://www.cssplay.co.uk/menus/multi-line-flyout.html

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

http://www.cssplay.co.uk/menus/bags-dropdown.html

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

http://www.cssplay.co.uk/menu/double-click-gallery-vertical.html

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 an...

http://www.cssplay.co.uk/menu/double-click-gallery.html

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 descrip...

http://www.cssplay.co.uk/menu/click-gallery-preview.html

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

http://www.cssplay.co.uk/menus/image-dropdown-v3.html

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 te...

http://www.cssplay.co.uk/menu/click-gallery-previous-next.html

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

http://www.cssplay.co.uk/menus/image-dropdown-v2.html

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.

http://www.cssplay.co.uk/ie/png-imagemap.html

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.

http://www.cssplay.co.uk/menus/png-image-replacement.html

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

http://www.cssplay.co.uk/menu/numbergallery.html

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

http://www.cssplay.co.uk/menus/current-dropdown.html

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

http://www.cssplay.co.uk/menus/image-map-menu.html

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

http://www.cssplay.co.uk/menus/current-slide.html

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.

http://www.cssplay.co.uk/menus/black-anywidth-centered.html

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

http://www.cssplay.co.uk/menu/fonts.html

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

http://www.cssplay.co.uk/menus/speech-bubble.html

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

http://www.cssplay.co.uk/boxes/maxwidth.html

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

http://www.cssplay.co.uk/menus/dl-clickslide.html

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

http://www.cssplay.co.uk/menus/dl-clickslide.html

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

http://www.cssplay.co.uk/menu/clickgallery.html

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

http://www.cssplay.co.uk/menus/ul-dropdown.html

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

http://www.cssplay.co.uk/menus/ul-multi.html

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

http://www.cssplay.co.uk/menus/dl-pullup.html

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

http://www.cssplay.co.uk/menus/dl-flyleft.html

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...

http://www.cssplay.co.uk/menus/dl-flyout.html

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 lev...

http://www.cssplay.co.uk/menus/dl-slide.html

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

http://www.cssplay.co.uk/menus/dl-dropdown.html

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.

http://www.cssplay.co.uk/menus/new-dropdown.html

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

http://www.cssplay.co.uk/menus/vertical-list.html

Zooming a single image on hover.

http://www.cssplay.co.uk/menu/zoom.html

A simple hover over thumbnail gallery with a zoom feature.

http://www.cssplay.co.uk/menu/zoom-gallery.html

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

http://www.cssplay.co.uk/menus/slide-up-down.html

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

http://www.cssplay.co.uk/menus/fisheye8.html

A very simple method of magnifying an image using just CSS

http://www.cssplay.co.uk/menu/fisheye3.html

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

http://www.cssplay.co.uk/menus/fisheye6.html

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

http://www.cssplay.co.uk/menus/divide-and-conquer.html

A CSS only version of the popular javascript dynamic menu.

http://www.cssplay.co.uk/menus/fisheye.html

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

http://www.cssplay.co.uk/menus/fisheye2.html

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

http://www.cssplay.co.uk/menus/droplist-image.html

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

http://www.cssplay.co.uk/menus/pro-droplistv2.html

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.

http://www.cssplay.co.uk/menus/latest-flyout.html

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

http://www.cssplay.co.uk/menus/centering.html

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

http://www.cssplay.co.uk/menu/filmstrip-v2.html

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

http://www.cssplay.co.uk/menu/filmstrip.html

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.

http://www.cssplay.co.uk/menus/anywidth-dropline-all-center.html

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

http://www.cssplay.co.uk/menus/mini-pages-v2.html

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.

http://www.cssplay.co.uk/menus/pro-droplist.html

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

http://www.cssplay.co.uk/menus/anywidth-pullup.html

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

http://www.cssplay.co.uk/menus/pro_line_down_fly_v2.html

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.

http://www.cssplay.co.uk/menu/object-object.html

A three link block of information with rollover effect.

http://www.cssplay.co.uk/menus/triple-block-hover.html

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

http://www.cssplay.co.uk/menu/vertical-slide.html

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.

http://www.cssplay.co.uk/menus/anywidth-center-fly.html

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

http://www.cssplay.co.uk/menus/anywidth-dropline-center.html

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

http://www.cssplay.co.uk/menus/anywidth-center-center.html

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

http://www.cssplay.co.uk/menu/object-gallery.html

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

http://www.cssplay.co.uk/menus/multi-column.html

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

http://www.cssplay.co.uk/menus/stamp-collecting.html

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.

http://www.cssplay.co.uk/menus/centered2.html

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

http://www.cssplay.co.uk/menus/drop-table.html

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

http://www.cssplay.co.uk/menus/anywidth-flyout2.html

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

http://www.cssplay.co.uk/menus/iframe-shim.html

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.

http://www.cssplay.co.uk/menus/anywidth2.html

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.

http://www.cssplay.co.uk/menus/skeleton4.html

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

http://www.cssplay.co.uk/menus/anywidth-flyout.html

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

http://www.cssplay.co.uk/menus/anywidth.html

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

http://www.cssplay.co.uk/menus/total_background.html

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

http://www.cssplay.co.uk/menus/image-text-hover.html

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

http://www.cssplay.co.uk/menus/pro-dropline-images.html

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

http://www.cssplay.co.uk/menu/lightbox-hover.html

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

http://www.cssplay.co.uk/menu/lightbox-click.html

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

http://www.cssplay.co.uk/menu/gallery-large.html

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

http://www.cssplay.co.uk/menu/gallery.html

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

http://www.cssplay.co.uk/menu/one_page.html

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

http://www.cssplay.co.uk/menu/one_pagev2.html

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

http://www.cssplay.co.uk/menus/multi-ski.html

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

http://www.cssplay.co.uk/menus/pro-drop-image.html

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.

http://www.cssplay.co.uk/layouts/three-column-layouts.html

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

http://www.cssplay.co.uk/layouts/flexible-equal-height.html

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

http://www.cssplay.co.uk/menus/concertina-scroll.html

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

http://www.cssplay.co.uk/menus/centered.html

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

http://www.cssplay.co.uk/menus/skeleton3.html

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

http://www.cssplay.co.uk/ie/3pxbug.html