http://www.cssplay.co.uk/ www.cssplay.co.uk documents my attempts at understanding and exploring the possibilities of CSS. en-gb http://www.cssplay.co.uk http://www.cssplay.co.uk/graphic/cssplay_button.gif 88 31 http://www.cssplay.co.uk/menus/cssplay-responsive-single-level-menu.html A responsive single level menu that works on touch screen devices including Android OS and IE10. Stu Nicholls 2013-05-07 http://www.cssplay.co.uk/layouts/cssplay-responsive-layout.html A responsive layout with animated repositioning of elements. For all the latest browsers. Stu Nicholls 2013-05-01 http://www.cssplay.co.uk/menus/cssplay-responsive-dropdown-touch-screen.html A responsive dropdown/flyout menu that works on touch screen devices including Android OS and IE10. Stu Nicholls 2013-04-26 http://www.cssplay.co.uk/boxes/cssplay-responsive-background-images.html A method of getting IE7, IE8 and early version of other browsers to support 'background-size:cover'. Stu Nicholls 2013-04-24 http://www.cssplay.co.uk/menus/cssplay-responsive-droplist-touch-screen.html A responsive droplist menu that works on touch screen devices including Android OS and IE10. Stu Nicholls 2013-04-23 http://www.cssplay.co.uk/menus/cssplay-touch-slide.html A vertical concertina menu that works on touch screen devices including Android OS and has animation. Stu Nicholls 2013-04-08 http://www.cssplay.co.uk/menus/cssplay-touch-dropline.html A dropline menu that works on touch screen devices including Android OS and has animation. Stu Nicholls 2013-04-02 http://www.cssplay.co.uk/menus/cssplay-flyout-touch-screen.html A flyout menu that works on touch screen devices including Android OS and has animation. Stu Nicholls 2013-03-25 http://www.cssplay.co.uk/menus/cssplay-droplist-touch-screen.html A droplist menu that works on touch screen devices including Android OS and has animation. Stu Nicholls 2013-03-22 http://www.cssplay.co.uk/menus/cssplay-touch-multi-level-two.html Another method of producing a multi-level menu that works on touch screen devices including Android OS. Stu Nicholls 2013-03-21 http://www.cssplay.co.uk/menus/cssplay-touch-multi-level-one.html A multi-level menu that works on touch screen devices including Android OS. Stu Nicholls 2013-03-20 http://www.cssplay.co.uk/menus/cssplay-information-panels.html A set of information panels that work on touch screen devices such as iPads, IE10 tablets and Android OS tablets. Stu Nicholls 2013-03-19 http://www.cssplay.co.uk/menu/cssplay-holiday-2013-photos.html A CSS gallery to display some of the photos taken during our 2013 visit to New Zealand, Australia and Singapore Stu Nicholls 2013-03-15 http://www.cssplay.co.uk/menus/cssplay-droplist-menu-ie10-touch-screen.html A method of getting a droplist menu to work in IE10 on touch screen devices. Stu Nicholls 2013-02-14 http://www.cssplay.co.uk/menus/cssplay-dropdown-menu-ie10-touch-screen.html A method of getting multi level dropdown/flyout menus to work in IE10 on touch screen devices. Stu Nicholls 2013-02-12 http://www.cssplay.co.uk/ie/cssplay-ie10-grid-columns-touch-scroll.html IE10 grid layout with three columns a central exclusion zone and touch screen scrolling gallery Stu Nicholls 2013-02-09 http://www.cssplay.co.uk/menu/cssplay-reflections.html A CSS only method of producing image reflections on solid background colors. Stu Nicholls 2013-02-08 http://www.cssplay.co.uk/menu/cssplay-text-swipe-color-change.html Several methods of applying a 'swipe' color change to text on hover and a gradient color fill. Stu Nicholls 2013-02-05 http://www.cssplay.co.uk/menus/cssplay-3d-flip-menu-ie10.html A CSS 3D animated flip down menu suitable for IE10. Stu Nicholls 2013-01-18 http://www.cssplay.co.uk/menu/cssplay-fly-in-out-gallery.html A Gallery with fly-in and fly-out animation between iage changes. Suitable for all the latest browsers including IE10. Stu Nicholls 2013-02-01 http://www.cssplay.co.uk/menu/cssplay-3d-spinning-boxes-for-ie10.html A set of six 3D boxes tht spin on their own axis and around a central point, suitable for IE10. Stu Nicholls 2013-01-25 http://www.cssplay.co.uk/menu/cssplay-3d-rotate-challenge.html A CSS3 Animated 3D Gallery with a challenge to get it working in IE10. Stu Nicholls 2013-01-23 http://www.cssplay.co.uk/menu/cssplay-animated-cube-gallery.html A CSS3 Animated 3D Cube Gallery that works in IE10. Stu Nicholls 2013-01-19 http://www.cssplay.co.uk/menus/cssplay-slide-down-concertina.html A CSS slide down menu with concertina action sub menus. Suitable for the iPad Etc.. Stu Nicholls 2013-01-18 http://www.cssplay.co.uk/menu/cssplay-3d-dymaxion-map-animation-for-ie10.html A CSS3 Animated Dymaxion Map that works in IE10. Stu Nicholls 2013-01-14 http://www.cssplay.co.uk/menu/cssplay-3d-cube-animation-for-ie10.html A CSS3 Animated Cube that demonstrates the difficulty in styling for IE10 without using 'preserve-3d'. Stu Nicholls 2013-01-11 http://www.cssplay.co.uk/menu/cssplay-stacking-slideshow.html A CSS3 Stacking Slideshow with 3D animation for all modern browsers except Opera. Stu Nicholls 2012-12-30 http://www.cssplay.co.uk/menu/cssplay-peter-rabbit.html Using CSS3 and the page flip technique to produce a book in which you can flip forwards and backwards through the pages. Stu Nicholls 2012-12-05 http://www.cssplay.co.uk/menu/cssplay-anysize-gallery-v2.html A CSS3 gallery for images of different sizes - version 2. Stu Nicholls 2012-11-29 http://www.cssplay.co.uk/menu/cssplay-anysize-gallery.html A CSS3 gallery for images of different sizes. Stu Nicholls 2012-11-28 http://www.cssplay.co.uk/menu/cssplay-reflow-gallery.html A CSS3 thumbnail gallery with reflow of thumbnail images when viewing large images. Stu Nicholls 2012-11-26 http://www.cssplay.co.uk/menus/cssplay-stepped-text.html Using just CSS to produce a vertical menu with a stepped zoom action. Stu Nicholls 2012-11-21 http://www.cssplay.co.uk/menus/cssplay-click-drop-fly-ipad-v2.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. Stu Nicholls 2012-11-02 http://www.cssplay.co.uk/menu/cssplay-brick-in-the-wall.html A CSS3 Brick wall using no images. Stu Nicholls 2012-10-30 http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad7.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. Stu Nicholls 2012-10-30 http://www.cssplay.co.uk/menu/cssplay-random-heroes.html A CSS3 Random Heroes game, animated sprites using no images. Stu Nicholls 2012-10-26 http://www.cssplay.co.uk/menu/cssplay-sprites.html A CSS3 animated sprites using no images. Stu Nicholls 2012-10-25 http://www.cssplay.co.uk/menu/cssplay-space-invader.html A CSS3 animated space invader using two divs and linear-gradients, no images. Stu Nicholls 2012-10-22 http://www.cssplay.co.uk/menu/cssplay-connect-four.html A logic version of Connect Four using just CSS3 for two players. Stu Nicholls 2012-10-20 http://www.cssplay.co.uk/menu/cssplay-tic-tac-toe.html A logic version of Tic-Tac-Toe using just CSS3. Stu Nicholls 2012-10-18 http://www.cssplay.co.uk/menus/cssplay-hover-drop-persist.html A CSS3 hover / dropdown menu with sub menus staying open when moving the mouse off the menu. Stu Nicholls 2012-10-17 http://www.cssplay.co.uk/menu/cssplay-click-zoom-fly.html A gallery with permanent image changes and a zoom/fly animation. Stu Nicholls 2012-10-16 http://www.cssplay.co.uk/menu/cssplay-scan-enlarge.html Enlarging a section of a smaller image by vertically scanning the smaller image. Stu Nicholls 2012-10-15 http://www.cssplay.co.uk/menus/cssplay-menu-slide.html A horizontal left/right sliding panels menu with animation and permanent panel changes. Stu Nicholls 2012-10-12 http://www.cssplay.co.uk/menu/cssplay-before-after-slider-v2.html A left/right slider to reveal/hide an 'after' image suitable for IE7+. Stu Nicholls 2012-10-11 http://www.cssplay.co.uk/menu/cssplay-before-after-slider.html A left/right slider to reveal/hide an 'after' image with a hold feature. Stu Nicholls 2012-10-10 http://www.cssplay.co.uk/menu/two-column-text-with-centered-image.html Centering an image between two columns of text with wrap around Stu Nicholls 2012-10-09 http://www.cssplay.co.uk/menu/cssplay-tooltips.html The tooltips demo updated to include CSS3 styles and to work on the iPad etc.. Stu Nicholls 2012-10-08 http://www.cssplay.co.uk/menus/cssplay-corner-menu.html A circular corner menu with animation. Stu Nicholls 2012-10-05 http://www.cssplay.co.uk/menu/cssplay-stuslide-v2.html Version 2 of the multi function slide show with permanent image changes for all modern PC browsers and Safari Mobile browsers. Stu Nicholls 2012-09-26 http://www.cssplay.co.uk/menus/cssplay-slide-up-dropdown.html A dropdown menu with a fade-in and slide-up animation. Stu Nicholls 2012-09-17 http://www.cssplay.co.uk/menus/cssplay-click-click-slide-v2.html A vertical concertina menu with a click to open and close action and animation. Stu Nicholls 2012-09-10 http://www.cssplay.co.uk/menus/cssplay-diagonal-slide.html Using just a definition list to produce a horizontal sliding menu with diagonal lists suitable for the iPad etc.. Stu Nicholls 2012-09-08 http://www.cssplay.co.uk/menu/cssplay-radar-gallery.html A slide show with permanent image changes for all modern PC browsers, Mac browsers and Safari Mobile browsers. Stu Nicholls 2012-08-31 http://www.cssplay.co.uk/menu/cssplay-stuslide.html A multi function slide show with permanent image changes for all modern PC browsers and Safari Mobile browsers. Stu Nicholls 2012-08-24 http://www.cssplay.co.uk/menu/cssplay-the-big-slide.html A full screen slide show with permanent image changes for all modern PC browsers and Safari Mobile browsers. Stu Nicholls 2012-08-20 http://www.cssplay.co.uk/menu/cssplay-ipad-swipe-slideshow.html A Swipe Left/Right Slide Show with permanent image changes for all PC and Safari Mobile browsers. Stu Nicholls 2012-08-15 http://www.cssplay.co.uk/menu/cssplay-go-slide.html The CSS play 'GO Slide' Slide Show with permanent image changes. Stu Nicholls 2012-08-11 http://www.cssplay.co.uk/menus/cssplay-definition-list-menu.html Using just a definition list to produce a dropdown menu suitable for the iPad etc.. Stu Nicholls 2012-08-09 http://www.cssplay.co.uk/menu/cssplay-dragonfly-slideshow.html A CSS ONLY Dragonfly Slide Show with permanent image changes. Stu Nicholls 2012-08-06 http://www.cssplay.co.uk/menu/cssplay-cssfont.html A CSS ONLY resizeable, normal, italic, slant and kerning font. Stu Nicholls 2012-08-03 http://www.cssplay.co.uk/menu/cssplay-rotary-slideshow.html A CSS ONLY Rotary Slide Show with permanent image changes. Stu Nicholls 2012-07-30 http://www.cssplay.co.uk/menu/cssplay-slideshow.html A CSS ONLY Slide Show with permanent image changes. Stu Nicholls 2012-07-27 http://www.cssplay.co.uk/menus/cssplay-drill-down-radio.html Using just CSS to produce drill down menu with permanent sub menu changes. Stu Nicholls 2012-07-06 http://www.cssplay.co.uk/menu/cssplay-dartboard.html A CSS ONLY Dartboard using no images. Stu Nicholls 2012-07-05 http://www.cssplay.co.uk/menus/cssplay-pie-menu.html Using just CSS to produce a pie menu with individual sectors an animation. Stu Nicholls 2012-07-02 http://www.cssplay.co.uk/menus/cssplay-ring-v2.html Using just CSS to produce a circular ring menu for all modern browsers. Stu Nicholls 2012-06-30 http://www.cssplay.co.uk/menu/cssplay-pie-chart.html A CSS ONLY Pie Chart using no images and with links on each sector. Stu Nicholls 2012-06-30 http://www.cssplay.co.uk/menu/cssplay-click-enlarge.html Using a new technique to enlarge a section of an image. Stu Nicholls 2012-06-29 http://www.cssplay.co.uk/menu/cssplay-hover-permanent-gallery-v2.html A :hover gallery with permanent image changes, version 2. Stu Nicholls 2012-06-28 http://www.cssplay.co.uk/menu/cssplay-hover-permanent-gallery.html A :hover gallery with permanent image changes. Stu Nicholls 2012-06-27 http://www.cssplay.co.uk/menus/cssplay-checkbox-treemenu.html A click action Tree Menu using just CSS. Stu Nicholls 2012-06-27 http://www.cssplay.co.uk/menu/cssplay-radio-stack.html Using my latest techniques to produce a stacked slideshow with accessibility. Stu Nicholls 2012-06-27 http://www.cssplay.co.uk/menus/cssplay-radio-dropline.html A click action dropline menu with persist and accessibility. Stu Nicholls 2012-06-27 http://www.cssplay.co.uk/menu/cssplay-radiobox.html Using my latest techniques to produce a Lightbox type gallery. Stu Nicholls 2012-06-26 http://www.cssplay.co.uk/menus/cssplay-radio-drop-fly-two.html An update to the previous version of the click action multi-level menu with persist. Stu Nicholls 2012-06-26 http://www.cssplay.co.uk/menus/cssplay-radio-concertina.html Using just CSS to produce a click action vertical concertina menu with persist and accessibility Stu Nicholls 2012-06-26 http://www.cssplay.co.uk/menu/cssplay-radio-left-right-click.html Using my latest techniques to produce a left/right click gallery with image persist. Stu Nicholls 2012-06-25 http://www.cssplay.co.uk/menus/cssplay-radio-drop-fly.html Using just CSS to produce a click action multi-level menu with persist. Stu Nicholls 2012-06-24 http://www.cssplay.co.uk/menu/cssplay-radio-tabs.html Using my latest techniques to produce and improved tabbed pages with persist Stu Nicholls 2012-06-23 http://www.cssplay.co.uk/menu/showme-more-radio-method.html Using my latest techniques to produce and improved show/hide extra information. Stu Nicholls 2012-06-22 http://www.cssplay.co.uk/menu/cssplay-click-radio-galleries.html CSS only gallery with permanent images, using no :target, iframes, objects or javascript, version 2. Stu Nicholls 2012-06-22 http://www.cssplay.co.uk/menu/cssplay-click-radio-gallery.html CSS only gallery with permanent images, using no :target, iframes, objects or javascript. Stu Nicholls 2012-06-21 http://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html CSS only game of 'Whack-a-Rat' with on screen scoring and timer. Stu Nicholls 2012-06-20 http://www.cssplay.co.uk/menus/cssplay-circular-icons.html Using just CSS to produce a circular set of icons with enlarge on hover. Stu Nicholls 2012-06-14 http://www.cssplay.co.uk/menus/cssplay-radial.html Using just CSS to produce a circular radial animated menu. Stu Nicholls 2012-06-07 http://www.cssplay.co.uk/menus/cssplay-ring.html Using just CSS to produce a circular ring menu. Stu Nicholls 2012-06-05 http://www.cssplay.co.uk/menus/cssplay-quadrant.html Using just CSS to produce a circular menu divided into quadrants. Stu Nicholls 2012-06-05 http://www.cssplay.co.uk/menus/cssplay-hexagon.html Using just CSS to produce a hexagonal shape menu with no extra markup and no images. Stu Nicholls 2012-06-02 http://www.cssplay.co.uk/menu/cssplay-tabbed-pages.html CSS only tabbed pages with persist and several other features. For IE9+, Firefox, Opera, Safari and Chrome. Stu Nicholls 2012-05-30 http://www.cssplay.co.uk/menu/cssplay-dymaxion-map.html Using CSS3 transitions, transforms and keyframes to produce a 3D Dymaxion Map of the Earth's surface. Stu Nicholls 2012-05-24 http://www.cssplay.co.uk/menu/cssplay-planets-moon.html Using CSS3 transitions, transforms and keyframes to produce a 3D animation of the Earth, Mars, Jupiter and the Moon. Stu Nicholls 2012-05-21 http://www.cssplay.co.uk/menu/css3-marquee-two.html A second version of the marquee demo using CSS3 and keyframes to produce an interactive marquee for any length of text. Stu Nicholls 2012-05-14 http://www.cssplay.co.uk/menu/content-gallery.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.. Stu Nicholls 2012-04-30 http://www.cssplay.co.uk/menus/cssplay-click-drop-fly-ipad.html Using just CSS to produce a multi-level menu with a click action instead of the normal hover suitable for the iPad. Stu Nicholls 2012-04-27 http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow-v2.html Using CSS to produce an animated stack of images, version 2. Stu Nicholls 2012-04-25 http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad6.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. Stu Nicholls 2012-04-19 http://www.cssplay.co.uk/menus/cssplay-ipad-flyout-menu-fixed.html A method of closing an open flyout menu by tapping anywhere in the screen Stu Nicholls 2012-04-18 http://www.cssplay.co.uk/menus/cssplay-3d-unfolding-menu.html Using 3D transforms and transitions to animate an unfolding dropdown menu Stu Nicholls 2012-04-03 http://www.cssplay.co.uk/menus/cssplay-ipad-dropdown-menu-fixed.html A method of closing an open dropdown menu by tapping anywhere in the screen Stu Nicholls 2012-04-02 http://www.cssplay.co.uk/menu/cssplay-3d-runners.html A group of three 3D 'stick men' runners using CSS3 3D transforms and keyframe anmation. Stu Nicholls 2012-03-22 http://www.cssplay.co.uk/menu/cssplay-3D-sphere.html A 3D Beach Ball using CSS3 3D transforms and no images. Stu Nicholls 2012-03-17 http://www.cssplay.co.uk/menu/cssplay-truncatedicosahedron.html A 3D truncated icosahedron using CSS3 3D transforms and no images. Stu Nicholls 2012-03-14 http://www.cssplay.co.uk/boxes/jack-in-the-box.html Using CSS3 3D transforms to produce a Jck-in-the-Box with music. Stu Nicholls 2012-03-11 http://www.cssplay.co.uk/menus/cssplay-3d-flip-down.html Using CSS3 3D transforms to produce a 'flip-down' animated menu. Stu Nicholls 2012-03-10 http://www.cssplay.co.uk/menu/cssplay-3d-box-slide.html A set of six 3D boxes sliding in a never ending pattern. Stu Nicholls 2012-03-08 http://www.cssplay.co.uk/menu/cssplay-3d-box.html A spinning box with rotating faces using CSS3 3D transforms. Stu Nicholls 2012-03-07 http://www.cssplay.co.uk/menu/cssplay-target-rotary.html A rotary gallery of images with click to view and permanent image changes. Stu Nicholls 2012-03-07 http://www.cssplay.co.uk/menus/cssplay-media-accordian.html Using :target to create a permanent changing horizontal multi-media accordian menu with click action. Stu Nicholls 2012-03-01 http://www.cssplay.co.uk/menus/cssplay-horizontal-accordian.html Using :target to create a permanent changing horizontal accordian menu with click action. Stu Nicholls 2012-02-29 http://www.cssplay.co.uk/menu/cssplay-grid-zoom.html A gallery of images on a grid with hover to zoom the images and partially zoom adjacent images. Stu Nicholls 2012-02-27 http://www.cssplay.co.uk/menus/cssplay-dropline-dropdown.html Using css3 transitons to animate a dropline/dropdown menu with 'current' page options. Stu Nicholls 2012-01-19 http://www.cssplay.co.uk/menu/cssplay-right-move.html A puzzle using :target. Stu Nicholls 2012-01-12 http://www.cssplay.co.uk/menu/image-bounce.html A simple image magnifier with a bounce animation. Stu Nicholls 2011-12-22 http://www.cssplay.co.uk/menus/cssplay-image-bounce-dropdown.html Using css3 transitions to animate a slide/fly menu with image 'bounce'. Stu Nicholls 2011-12-21 http://www.cssplay.co.uk/menu/cssplay-no-left-turn.html Using :target to produce a click maze puzzle. Get to the end without turnng left. Stu Nicholls 2011-12-06 http://www.cssplay.co.uk/menus/cssplay-target-dropline.html Using :target to produce a click open/close dropline menu. Stu Nicholls 2011-12-04 http://www.cssplay.co.uk/menus/cssplay-revolver.html Using :before and :after pseudo-elements to produce a rollover menu. Stu Nicholls 2011-12-04 http://www.cssplay.co.uk/menus/cssplay-stretch-drop.html Using CSS3 to animate a stretch/droplist menu. Stu Nicholls 2011-12-02 http://www.cssplay.co.uk/menu/cssplay-zoombox-slideshow.html#s2p A permanent image slideshow using switchable sets of thumbnail images and large images with captions. Stu Nicholls 2011-11-28 http://www.cssplay.co.uk/menu/cssplay-target-gallery-no-history.html#t1 A :target gallery with no browser window jump and no cycling through the images when using the browser 'back' button. Stu Nicholls 2011-11-25 http://www.cssplay.co.uk/menu/cssplay-starlight-lightbox.html A CSS only lightbox with PREVIOUS/NEXT/CLOSE buttons and captions with links. Stu Nicholls 2011-11-23 http://www.cssplay.co.uk/menu/cssplay-any-size-gallery.html#target1 Using CSS3 to produce a gallery for any size images. Stu Nicholls 2011-11-21 http://www.cssplay.co.uk/menu/cssplay-mickey-mouse.html Using CSS3 to produce click gallery with permanent images to rival jQuery/javascript. Stu Nicholls 2011-11-20 http://www.cssplay.co.uk/menu/cssplay-grid-accordian-target.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. Stu Nicholls 2011-11-17 http://www.cssplay.co.uk/menus/cssplay-drill-down.html Using CSS3 :target with general sibling selector to produce a 'non-jumping' drill-down menu. Stu Nicholls 2011-11-17 http://www.cssplay.co.uk/menu/cssplay-grid-accordian.html Using CSS3 to produce a set of thumbnail images that enlarge on hover. Stu Nicholls 2011-11-16 http://www.cssplay.co.uk/menu/cssplay-circle-slideshow.html Using CSS3 to rotate a set of thumbnail images and display a large images, all with a cick of a button. Stu Nicholls 2011-11-14 http://www.cssplay.co.uk/menu/cssplay-image-rotation.html Using CSS3 to rotate a set of images. Stu Nicholls 2011-11-12 http://www.cssplay.co.uk/menu/cssplay-zoooom.html Using CSS3 to 'animate zoom' a set of thumbnail images. Stu Nicholls 2011-11-08 http://www.cssplay.co.uk/menu/cssplay-left-right-click-v3.html Using CSS3 to animate a left/right click set of information panels with 'jump to panel number' option. Stu Nicholls 2011-11-06 http://www.cssplay.co.uk/menu/cssplay-left-right-click-v2.html Using CSS3 to animate a left/right click gallery with sliding large images Stu Nicholls 2011-11-05 http://www.cssplay.co.uk/menu/cssplay-left-right-click.html Using CSS3 to animate a left/right click gallery with sliding thumbnail images Stu Nicholls 2011-11-04 http://www.cssplay.co.uk/menus/cssplaymenu-search-stretch.html A CSS3 animation to stretch a search box on focus. Stu Nicholls 2011-11-01 http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad5.html A simpler version of the Anywidth v4 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch. Stu Nicholls 2011-10-31 http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad.html A simpler version of the Anywidth v3 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch. Stu Nicholls 2011-10-31 http://www.cssplay.co.uk/menu/html5-oneBox.html Re-coding and styling the 'oneBox' to make use of the html5 support for tabindex and :focus on any element. Stu Nicholls 2011-10-20 http://www.cssplay.co.uk/menus/iPad-Anywidth3.html A simpler version of the Anywidth v2 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch. Stu Nicholls 2011-10-07 http://www.cssplay.co.uk/menus/cssplay-ie-ipad-active-sibling-fix.html A single level dropdown menu with clck action incorporating the latest bug fixes for IE and the iPad, iPhone and iPod Touch. Stu Nicholls 2011-10-06 http://www.cssplay.co.uk/menus/cssplay-click-click-slide.html A CSS3 vertical concertina menu with click to open/close and slide action. Suitable for the iPad, iPhone and iPod Touch. Stu Nicholls 2011-10-04 http://www.cssplay.co.uk/menus/css3-slide-out.html A CSS3 animated slide out menu Stu Nicholls 2011-09-24 http://www.cssplay.co.uk/menu/css3-radius-tabs.html Using CSS3 to style unordered list with iner/outer radius tabs. Stu Nicholls 2011-09-18 http://www.cssplay.co.uk/menu/cssplay-auto-run-slideshows.html Using transitions and keyframes with step() to prodcue three auto-run slideshows. Stu Nicholls 2011-09-14 http://www.cssplay.co.uk/menus/cssplay-click-click.html A dropdown menu with click to open/close, suitable for the iPad etc.. Stu Nicholls 2011-09-11 http://www.cssplay.co.uk/menu/cssplay-click-information.html A show/hide information panels using click to open and close. Stu Nicholls 2011-09-09 http://www.cssplay.co.uk/menu/cssplay-focus.html A method of applying :focus to images. Stu Nicholls 2011-09-08 http://www.cssplay.co.uk/menu/cssplay-popbox.html An image enlarger with animation, title and descriptive text (which can contain links).. Stu Nicholls 2011-09-06 http://www.cssplay.co.uk/menus/css3-headline-changer.html Using CSS3 keyframes to animate a headline changer. Degrades well in browsers that do not support keyframes Stu Nicholls 2011-09-03 http://www.cssplay.co.uk/menu/solid-text-shadow.html Using CSS3 to style text to make it look solid with a realistic shadow and no extra markup. Stu Nicholls 2011-08-30 http://www.cssplay.co.uk/menus/cssplay-drop-everything.html A drop panel menu with multiple configurations, rows, column, galleries flyout/dropdown sub menus, forms, suitable for the iPad, iPhone etc.. Stu Nicholls 2011-08-25 http://www.cssplay.co.uk/menu/css3-left-right-slide.html Using CSS3 transitions to produce a left/right sliding gallery. Stu Nicholls 2011-08-09 http://www.cssplay.co.uk/menus/dropslide-pushdown.html A droplist menu with slidedown action and pushdown of the content beneath. Stu Nicholls 2011-07-25 http://www.cssplay.co.uk/menus/cssplay-round-and-round.html A circular icon menu with circular icon sub menus and animation. Stu Nicholls 2011-07-18 http://www.cssplay.co.uk/menus/cssplay-click-droplist.html A droplist menu with click action and click to close feature. Stu Nicholls 2011-07-15 http://www.cssplay.co.uk/menus/css3-lightbox-menu.html Using only CSS to animate a 'LightBox' style droplist menu. Stu Nicholls 2011-07-03 http://www.cssplay.co.uk/menu/css3-reflections.html Using CSS3 and SVG to produce 'reflections' for Firefox 4 and 5 (as well as Safari and Chrome). Stu Nicholls 2011-07-01 http://www.cssplay.co.uk/menu/css3-meowww.html Using CSS3 to draw and animate a cat meowing, for Safari, Chrome and the New Firefox 5. Stu Nicholls 2011-06-26 http://www.cssplay.co.uk/menu/css3-keyframe-lightbox.html Using CSS3 Keyframes to produce an animated 'lightbox' type gallery, for Safari, Chrome and the New Firefox 5. Stu Nicholls 2011-06-24 http://www.cssplay.co.uk/menus/css3-zoom-text.html Using only CSS to animate (zoom) a vertical menu list. Stu Nicholls 2011-06-22 http://www.cssplay.co.uk/menus/css3-zoom-icon.html Using only CSS to animate (zoom/fade/skew) a set of icon images. Stu Nicholls 2011-06-22 http://www.cssplay.co.uk/menu/keyframe-gallery.html Using CSS3 Keyframes to produce an animated gallery, for Safari, Chrome and the New Firefox v5. Stu Nicholls 2011-06-18 http://www.cssplay.co.uk/menus/iPad-slide-hide.html A multi level dropdown/flyout animated menu with a 'close' tab for the iPad, iPhone and iPod Touch. Stu Nicholls 2011-06-13 http://www.cssplay.co.uk/menus/iPad-slidedown.html A single level slide down menu with a 'close' tab for the iPad, iPhone and iPod Touch. Stu Nicholls 2011-06-11 http://www.cssplay.co.uk/menus/iPad-Anywidth2.html The previous menu modified to give a clearer indication of the 'CLOSE' tab for the iPad etc.. Stu Nicholls 2011-06-09 http://www.cssplay.co.uk/menus/iPad-Anywidth.html Adapting the Anywidth dropdown/flyout menu to work on the iPad, iPhone and iPod Touch. Stu Nicholls 2011-06-07 http://www.cssplay.co.uk/menu/content100.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. Stu Nicholls 2011-05-30 http://www.cssplay.co.uk/menu/oneBox.html Using :before/:after and content: together with the general sibling selector to produce a CSS only lightbox with minimal code. Stu Nicholls 2011-05-27 http://www.cssplay.co.uk/menu/resize.html Demonstrations for the use of the 'resize' style. Stu Nicholls 2011-05-20 http://www.cssplay.co.uk/menu/peter-rabbit.html Using the CSS3 page flip routine to produce a page flip book. Stu Nicholls 2011-05-19 http://www.cssplay.co.uk/menu/cssplay-flip-gallery.html Using the CSS3 page flip routine to produce a page flip gallery. Stu Nicholls 2011-05-17 http://www.cssplay.co.uk/menu/cssplay-flip.html Using CSS3 to animate a page flip to show two inner pages with a little twist. Stu Nicholls 2011-05-17 http://www.cssplay.co.uk/menu/cssplay36.html Using CSS3 to animate a page flip to show two inner pages. Stu Nicholls 2011-05-15 http://www.cssplay.co.uk/menus/css3-cssplay34.html Using CSS3 to produce a playing card animated menu. Stu Nicholls 2011-05-11 http://www.cssplay.co.uk/menu/image-rotation.html Using CSS to cycle though a set of images. Stu Nicholls 2011-05-09 http://www.cssplay.co.uk/menus/css3-cssplay32.html Using CSS3 to produce a circular menu with petals on a flower. Stu Nicholls 2011-05-07 http://www.cssplay.co.uk/menu/css3-photo-curl.html Using CSS3 to give the impresssion of curled corner on images of any size. Stu Nicholls 2011-05-04 http://www.cssplay.co.uk/menu/cssplay31.html Using CSS3 to animated a set of information panels of varying sizes. Stu Nicholls 2011-04-18 http://www.cssplay.co.uk/menus/css3-cssplay30.html Using CSS3 to produce a set of horizontal menus using gradient fills and inner/outer shadows. Stu Nicholls 2011-04-16 http://www.cssplay.co.uk/menus/css3-cssplay29.html Using CSS3 to produce a click action dropline menu with multiple levels. Stu Nicholls 2011-04-15 http://www.cssplay.co.uk/menus/cssplay27.html A circular menu with CSS3 enhancements. Stu Nicholls 2011-04-14 http://www.cssplay.co.uk/menus/css3-cssplay28.html Using CSS3 to produce an animated drop down menu that look like jQuery. Stu Nicholls 2011-04-14 http://www.cssplay.co.uk/menu/cssplayBox.html Using the latest techniques to update the previous lightbox demos. Stu Nicholls 2011-04-12 http://www.cssplay.co.uk/menus/iPad-iMage.html Using an image to close any open sub menus on the iPad, iPhone and iPod Touch. Stu Nicholls 2011-04-06 http://www.cssplay.co.uk/menus/cssplay-click-vertical-concertina.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. Stu Nicholls 2011-04-05 http://www.cssplay.co.uk/menus/cssplay23.html A pulldown panel containing a droplist menu using just CSS and suitable for the iPad, iPhone and iPod Touch. Stu Nicholls 2011-03-28 http://www.cssplay.co.uk/menu/cssplay-information-panels.html Using CSS3 and the latest discoveries and techniques to have a click action image information panels. Stu Nicholls 2011-03-25 http://www.cssplay.co.uk/menus/ipad-droplist.html A droplist menu with top level links and a close menu tab for the iPad, iPhone and iPod Touch. Stu Nicholls 2011-03-23 http://www.cssplay.co.uk/menu/showme-more.html Using CSS3 and the latest discoveries and techniques to update this demonstrations. Stu Nicholls 2011-03-21 http://www.cssplay.co.uk/menu/cssplay-stacked-slideshow.html Using CSS to produce an animated stack of images. Stu Nicholls 2011-03-20 http://www.cssplay.co.uk/menus/ipad-flylist.html A flyout list menu with top level links and a close menu icon for the iPad, iPhone and iPod Touch. Stu Nicholls 2011-03-19 http://www.cssplay.co.uk/menu/cssplay-hover-click-slideshow.html Using CSS3 to produce a slideshow with a hover/click action and animation. Stu Nicholls 2011-03-18 http://www.cssplay.co.uk/menus/cssplay-click-slide.html The next in the 'click' series to demonstrate a vertical slide menu with a click action instead of the normal hover. Stu Nicholls 2011-03-15 http://www.cssplay.co.uk/menus/cssplay-click-flyout.html The next in the 'click' series to demonstrate a flyout menu with a click action instead of the normal hover. Stu Nicholls 2011-03-14 http://www.cssplay.co.uk/menus/cssplay-click-dropline.html Continuing with the 'click' series to demonstrate a dropline menu with a click action instead of the normal hover. Stu Nicholls 2011-03-13 http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html Using just CSS to produce a multi-level menu with a click action instead of the normal hover. Stu Nicholls 2011-03-12 http://www.cssplay.co.uk/menu/css3-carousel-click.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 Stu Nicholls 2011-03-11 http://www.cssplay.co.uk/menus/css3-cssplay16.html Using CSS3 to produce a Rotating set of Social Network Icons - for Safari ONLY at the moment. Stu Nicholls 2011-03-06 http://www.cssplay.co.uk/menu/css3-3d-book.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 Stu Nicholls 2011-03-02 http://www.cssplay.co.uk/menu/css3-3d-carousel.html Using CSS3 with perspective to animate carousel of slides with auto-run and slide enlarge. For Safari ONLY at the moment Stu Nicholls 2011-03-01 http://www.cssplay.co.uk/menu/css3-3d-billboard.html Using CSS3 with perspective to animate a three image billboard. For Safari ONLY at the moment Stu Nicholls 2011-03-01 http://www.cssplay.co.uk/menus/css3-cssplay12.html Using CSS3 to produce a 3D Rollover Menu - for Safari ONLY at the moment. Stu Nicholls 2011-02-27 http://www.cssplay.co.uk/menu/enlarge-v2.html Using the gerneral sibling selector to show enlarged sections of an image on hover. Stu Nicholls 2011-02-26 http://www.cssplay.co.uk/menu/css3-carousel.html Using CSS3 to produce a Carousel Slideshow. For Safari, Chrome, Opera and Safari v4 beta ONLY at the moment Stu Nicholls 2011-02-25 http://www.cssplay.co.uk/menus/css3-image-slide-vertical.html Using CSS3 to produce a vertical sliding set of panels with menus. Stu Nicholls 2011-02-24 http://www.cssplay.co.uk/menu/css3-3d-card.html Using CSS3 to rotate a card to see the reverse using 'perspective'. For Safari ONLY at the moment Stu Nicholls 2011-02-22 http://www.cssplay.co.uk/menus/css3-cssplay6.html Using CSS3 to produce a Book Shelf menu with animated books. Stu Nicholls 2011-02-21 http://www.cssplay.co.uk/menus/css3-cssplay5.html Using CSS3 to produce a set of expanding panels with slide down sub menus. Stu Nicholls 2011-02-20 http://www.cssplay.co.uk/menus/ipad-cssplay4.html Using CSS3 to produce an expanding stack of image links, suitable for the iPad etc. Stu Nicholls 2011-02-10 http://www.cssplay.co.uk/menus/css3-cssplay3.html Using CSS3 to produce a sequence of image animations and a slide down sub menu system. Stu Nicholls 2011-02-09 http://www.cssplay.co.uk/menus/css3-photo-info.html Using CSS3 to produce a set of sliding information panels for photo links. Stu Nicholls 2011-02-07 http://www.cssplay.co.uk/menu/image-manipulation.html Using CSS3 to animate a set of thumbnail images. Stu Nicholls 2011-02-07 http://www.cssplay.co.uk/menus/ipad-social-network.html A flyout set of social network icons with slide action aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch). Stu Nicholls 2011-01-25 http://www.cssplay.co.uk/menu/css3-hover-to-run.html Using CSS3 to produce an animated slideshow run by hovering an icon. Stu Nicholls 2011-01-24 http://www.cssplay.co.uk/menus/ipad-flyout-slide.html A flyout list menu with slide action aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch). Stu Nicholls 2011-01-22 http://www.cssplay.co.uk/menu/css3-rotate.html Using CSS3 to rotate, slide and enlarge a set of images. Stu Nicholls 2011-01-21 http://www.cssplay.co.uk/menus/ipad-droplist-delay.html A droplist menu with delay action aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch). Stu Nicholls 2011-01-21 http://www.cssplay.co.uk/menus/ipad-flyout.html A multi-level flyout menu aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch). Stu Nicholls 2011-01-19 http://www.cssplay.co.uk/menus/css3-icon-slide.html Using CSS3 to animate an icon menu with associated text. Stu Nicholls 2011-01-19 http://www.cssplay.co.uk/menu/css3-click-slide.html A simple gallery which uses CSS3 to produce an up/down image slide animation. Stu Nicholls 2011-01-17 http://www.cssplay.co.uk/menus/ipad-slide-down.html A single level slide down menu aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch). Stu Nicholls 2011-01-15 http://www.cssplay.co.uk/menus/ipad-dropdown-single.html A single level dropdown menu aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch). Stu Nicholls 2011-01-12 http://www.cssplay.co.uk/menus/css-time-flyout.html Using Microsoft timeaction (TIME) instead of tables and conditional comments for IE6. Stu Nicholls 2011-01-08 http://www.cssplay.co.uk/menus/css3-slide-arrow.html Using CSS3 to produce a slide down menu. Stu Nicholls 2011-01-06 http://www.cssplay.co.uk/menus/drop-list-columns.html A Drop List Menu with curved corners and drop shadows. Stu Nicholls 2011-01-05 http://www.cssplay.co.uk/menus/pull-down-info-panel.html A CSS only answer to javascript/jQuery pull-down information panels (version 2). Stu Nicholls 2011-01-04 http://www.cssplay.co.uk/menus/pull-down.html A CSS only answer to javascript/jQuery pull-down information panels. Stu Nicholls 2011-01-02 http://www.cssplay.co.uk/menus/float-drop-multi-column.html Using the no hacks float drop technique to produce a multi-column dropdown menu. Stu Nicholls 2010-12-31 http://www.cssplay.co.uk/menus/image-dropdown-v5.html Using the no hacks float drop technique to produce an image dropdown menu with popup tooltips. Stu Nicholls 2010-12-29 http://www.cssplay.biz This site has been set up to explore the possibilities of using HTML5 with CSS. Stu Nicholls 2010-12-20 http://www.cssplay.co.uk/menus/css3-left-right-slide.html Using CSS3 to produce an animated left/right slide action. Stu Nicholls 2010-12-01 http://www.cssplay.co.uk/menu/css3-animated-slideshow.html Using CSS3 to animated a simple set of thumbnail images and their associated large image. Stu Nicholls 2010-11-22 http://www.cssplay.co.uk/menus/css3-slide-down-fly.html Using CSS3 to produce an animated sliding dropdown flyout menu. Stu Nicholls 2010-11-19 http://www.cssplay.co.uk/ie/ie6-pngfix.html Using just html and css with no extra markup to produce foreground png images Stu Nicholls 2010-10-01 http://www.cssplay.co.uk/menus/css3-social-network.html Using CSS3 to produce a social network circle of icons. Stu Nicholls 2010-09-28 http://www.cssplay.co.uk/menus/css3-rising-tabs.html Using CSS3, and a little TIME for Internet Explorer, to produce a vertical sliding menu to rival javascritp/jQuery. Stu Nicholls 2010-09-26 http://www.cssplay.co.uk/menus/css3-image-slide.html Using CSS3 to produce a horizontal image slide menu to rival any javascript version. Stu Nicholls 2010-09-23 http://www.cssplay.co.uk/menus/html-plus-time-flylist-menu.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). Stu Nicholls 2010-09-21 http://www.cssplay.co.uk/menu/html-plus-time-background-color-change.html Using HTML+TIME to get IE5.5 and IE6 to have a background color change on hover. Stu Nicholls 2010-09-20 http://www.cssplay.co.uk/menus/html-plus-time-dropdown-menu.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). Stu Nicholls 2010-09-12 http://www.cssplay.co.uk/ie/time-action.html A series of three galleries using timeAction for IE7 and IE8 only. Stu Nicholls 2010-09-10 http://www.cssplay.co.uk/menus/slide-tabs.html A sliding panel demo using CSS3 and IE time:animate for smooth sliding action. Stu Nicholls 2010-09-08 http://www.cssplay.co.uk/menu/css3-picture-gallery.html A simple picture gallery with CSS3 enhancements and pictures of various sizes. Stu Nicholls 2010-08-14 http://www.cssplay.co.uk/menu/css3-slide-show.html A simple photo gallery with CSS3 enhancements to rival javascript versions. Stu Nicholls 2010-08-08 http://www.cssplay.co.uk/menus/css3-dropdown-all.html A dropdown menu with a twist and CSS3 enhancements. Stu Nicholls 2010-08-05 http://www.cssplay.co.uk/menus/css3-dropline-overrun.html A dropline menu with an overrun area and CSS3 enhancements. Stu Nicholls 2010-08-02 http://www.cssplay.co.uk/menus/css3-tabs.html Using CSS3 to produce an animated tabs menu with no images. Stu Nicholls 2010-07-31 http://www.cssplay.co.uk/boxes/css3-background.html How to style the background image using CSS3 to make it fit the container size. Stu Nicholls 2010-07-28 http://www.cssplay.co.uk/menus/css3-slideline.html A slide out menu with CSS3 enhancements for browsers that support animation. Stu Nicholls 2010-07-27 http://www.cssplay.co.uk/menus/css3-flyline-drop.html A flyline / dropdown menu with CSS3 enhancements for browsers that support animation. Stu Nicholls 2010-07-27 http://www.cssplay.co.uk/menu/fast-enlarge.html Using the Fit and Shrink Technique to produce an image enlarger which does not need the image sizes to be defined. Stu Nicholls 2010-07-26 http://www.cssplay.co.uk/menus/inline-flyout.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. Stu Nicholls 2010-07-22 http://www.cssplay.co.uk/menus/inline-dropline.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. Stu Nicholls 2010-07-21 http://www.cssplay.co.uk/menus/inline-dropdown.html A totally new method of producing a dropdown menu with variable width and NO hacks of any kind, just html and css. Stu Nicholls 2010-07-21 http://www.cssplay.co.uk/menus/basic-float-drop.html A tutorial to explain how the float.drop menu system works. Stu Nicholls 2010-07-18 http://www.cssplay.co.uk/menus/css3-slide-list.html A CSS3 animated droplist menu with slide up/down and fade in/out for browsers that support transitions Stu Nicholls 2010-07-16 http://www.cssplay.co.uk/menus/droplist-flyout.html A droplist menu with 1, 2 3 or 4 columns and flyout sub menus. Stu Nicholls 2010-07-07 http://www.cssplay.co.uk/menus/menu-cssm150610.html Another menu using the float/drop technique using total background images with hover change and breadcrumb trail. Stu Nicholls 2010-06-15 http://www.cssplay.co.uk/menus/menu-cssm120610.html A menu using the float/drop technique using background images with hover change and breadcrumb trail. Stu Nicholls 2010-06-12 http://www.cssplay.co.uk/menu/playboxv2.html CSS playBOX v2 - The Ultimate CSS Lightbox - with additional features. Stu Nicholls 2010-06-01 http://www.cssplay.co.uk/menu/playbox.html CSS playBOX - The Ultimate CSS Lightbox. Stu Nicholls 2010-05-31 http://www.cssplay.co.uk/menus/drill-down.html A CSS answer to the javascrpt drill-down menus. Stu Nicholls 2010-05-30 http://www.cssplay.co.uk/menus/css3-single-slide.html Using CSS3 to produce a smooth slidout for a single level menu with siding icons. Stu Nicholls 2010-05-03 http://www.cssplay.co.uk/menus/css3-slideout.html Using CSS3 to produce a smooth slidout action for the top level and sub menus. Stu Nicholls 2010-04-30 http://www.cssplay.co.uk/menu/css3-image-enlarger.html Using CSS3 transitions to produce a smooth image enlarger. Stu Nicholls 2010-04-26 http://www.cssplay.co.uk/menu/css3-sliced-rollover.html Using CSS3 transitions and delay to produce a sliced image rollover 'poster' change. Stu Nicholls 2010-04-25 http://www.cssplay.co.uk/menus/image-dropdown-v4.html A single level dropdown with top level rollover images. Stu Nicholls 2010-04-25 http://www.cssplay.co.uk/menu/text-overflow.html Two methods to indicate text-overflow. One using CSS3 and the other using a small graphic. Stu Nicholls 2010-04-23 http://www.cssplay.co.uk/menus/css3-zoom.html Using CSS3 transitions to produce a smooth zoom on hover icon menu. Stu Nicholls 2010-04-17 http://www.cssplay.co.uk/menu/fast-gallery.html Using FaST to create a gallery for any size images. Stu Nicholls 2010-04-14 http://www.cssplay.co.uk/menu/fast.html How to fit images of unknown size into boxes of known size using just CSS. Stu Nicholls 2010-04-11 http://www.cssplay.co.uk/menu/css3-clickslideshow.html Using CSS3 adjacent sibling selector to produce a Click Slideshow. Stu Nicholls 2010-03-31 http://www.cssplay.co.uk/menus/dropline-current-override.html A CSS only dropline menu with current page selection and override when hovering other tabs. Stu Nicholls 2010-03-30 http://www.cssplay.co.uk/menus/hover-select.html A CSS menu with current page override and graphic/information. Stu Nicholls 2010-03-13 http://www.cssplay.co.uk/menu/imagemap-revisited.html Mapping of irregular shapes using just css. With hover effect and popup information panel. Stu Nicholls 2010-03-05 http://www.cssplay.co.uk/menu/css3-clickbox-gallery.html Using CSS3 adjacent sibling selector to produce a Clickbox Gallery. Stu Nicholls 2010-02-23 http://www.cssplay.co.uk/menu/css3-click-gallery.html Using CSS3 general sibling selector to produce a left/right click gallery. Stu Nicholls 2010-02-21 http://www.cssplay.co.uk/menu/css3-cubes.html Using webkit keyframes to continuously anumate a set of cubes. Stu Nicholls 2010-02-19 http://www.cssplay.co.uk/menu/hanoi.html The Tower of Hanoi puzzle in collaboration with Javier Román Cortés Stu Nicholls 2010-02-18 http://www.cssplay.co.uk/menu/css3-marquee.html Using CSS3 and keyframes to produce an interactive marquee Stu Nicholls 2010-02-16 http://www.cssplay.co.uk/menus/css3-ie-dropdown.html Using Microsoft filter to produce a dropdown menu with drop shadows and gradient fill overlays Stu Nicholls 2010-02-16 http://www.cssplay.co.uk/menu/css3-shadows.html Using Microsoft filter to produce a drop shadow for all versions of IE to match the css3 shadows of Firefox etc. Stu Nicholls 2010-02-12 http://www.cssplay.co.uk/menu/css3-clock.html Using Webkit keyframes to produce an analogue clock. A small javascript routine is used to set the correct time on page entry. Stu Nicholls 2010-02-11 http://www.cssplay.co.uk/menu/css3-digital-timer.html Using Webkit keyframes to produce an auto-run digital time to show how long you have been on a page. Stu Nicholls 2010-02-11 http://www.cssplay.co.uk/menu/css3-auto-run.html Using Webkit keyframes to produce an auto-run slideshow with pause facility using absolutely NO javascript. For Safari and Chrome at the moment. Stu Nicholls 2010-02-10 http://www.cssplay.co.uk/menu/css3-zoom.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. Stu Nicholls 2010-02-09 http://www.cssplay.co.uk/menu/css3-spheres.html Using CSS3 to style different color square boxes into 3D spheres. Stu Nicholls 2010-02-06 http://www.cssplay.co.uk/menus/css3-drop-everything.html Using CSS3 to produce a multi purpose dropdown menu system that can contain any information. Stu Nicholls 2010-02-06 http://www.cssplay.co.uk/menu/css3-parallax.html Using CSS3 to parallax scroll text. Stu Nicholls 2010-02-04 http://www.cssplay.co.uk/menu/css3-duff-roll.html The previous demo adapted to have a continuous left to right rolling can. Stu Nicholls 2010-02-03 http://www.cssplay.co.uk/menu/css3-can-roll.html Using CSS3 selectors to animate two static images to give 3D effect. Stu Nicholls 2010-02-02 http://www.cssplay.co.uk/menu/css3-animation.html Using CSS3 selectors to animate a series of static images. Stu Nicholls 2010-02-01 http://www.cssplay.co.uk/menus/css3-multi-slide.html Using CSS3 to produce a slide up/down multi column lists menu system Stu Nicholls 2010-01-31 http://www.cssplay.co.uk/menus/css3-hover-tilde-problem.html Using CSS3 'general sibling' selector problems when using :hover in Safari and Chrome Stu Nicholls 2010-01-31 http://www.cssplay.co.uk/menus/css3-fitted-tabs.html Using CSS3 styles to produce a tabs menu with no graphics and no extra markup Stu Nicholls 2010-01-29 http://www.cssplay.co.uk/menu/enlarge.html The Image Magnifier of 2005 revisited to improve quality and make simpler and smoother. Stu Nicholls 2010-01-28 http://www.cssplay.co.uk/menu/css3-photo-info.html Using CSS3 styles to produce a sliding information panel over images. Stu Nicholls 2010-01-27 http://www.cssplay.co.uk/menu/css3-buttons.html Using CSS3 styles to produce buttons without graphics and no extra markup. Stu Nicholls 2010-01-27 http://www.cssplay.co.uk/menu/css3-zoom-gallery.html Using CSS3 styles to produce a zoom/fade-in photo gallery. Stu Nicholls 2010-01-27 http://www.cssplay.co.uk/menu/css3-photo-slide.html Using CSS3 styles to produce a sliding photo gallery. Stu Nicholls 2010-01-27 http://www.cssplay.co.uk/menus/css3-fade-menu.html Using CSS3 styles to produce an animated fade-in menu with curverd corners, drop shadows and gradient fills. Stu Nicholls 2010-01-25 http://www.cssplay.co.uk/menus/css3-slide-menu.html Using CSS3 styles to produce an animated slide down/up menu identical to javascript versions. Stu Nicholls 2010-01-24 http://www.cssplay.co.uk/menus/cssplay-showup.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. Stu Nicholls 2010-01-22 http://www.cssplay.co.uk/menus/ul-image-dropdown.html Using the latest no hack system to have top level images and dropdown boxes cntaing images and text Stu Nicholls 2010-01-21 http://www.cssplay.co.uk/menus/cssplay-pullover.html Using the same NEW method as the previous menu to have the sub line appear above the top level links. Stu Nicholls 2010-01-15 http://www.cssplay.co.uk/menus/cssplay-pushpull.html A dropline menu using a totally NEW method that requires NO hacks and works in all browsers. Also allows tabbing. Stu Nicholls 2010-01-14 http://www.cssplay.co.uk/menu/slideshow.html A revised and simplified 'Slideshow' that now eorks in Safari(PC) and Chrome. Stu Nicholls 2010-01-13 http://www.cssplay.co.uk/menu/using-clickbox.html A practical use of CSS play's 'Clickbox'. A CSS only version of Lightbox that now works in Safari(PC) and Google Chrome. Stu Nicholls 2010-01-11 http://www.cssplay.co.uk/menus/snowstorm.html Back to the very basic styling to produce this no hacks dropdown/flyout menu. Stu Nicholls 2010-01-11 http://www.cssplay.co.uk/menu/cssplay-clickbox.html CSS play's 'Clickbox' version of Lightbox that now works in Safari(PC) and Google Chrome. Stu Nicholls 2010-01-08 http://www.cssplay.co.uk/menus/ul-multi-nine.html A small restyle to make this menu system more robust and have an easy menu trail style. Stu Nicholls 2010-01-05 http://www.cssplay.co.uk/menus/ul-multi-eight.html The multi level dropdown/flyout menu with the path through the menu highlighted. Stu Nicholls 2010-01-01 http://www.cssplay.co.uk/menus/ul-flyout-two.html A skeleton flyout menu with the path taken through the menu highlighted.. Stu Nicholls 2009-12-29 http://www.cssplay.co.uk/menus/ul-multi-seven.html The previous menu with the ability to adjust the widths of all levels and center each level. Stu Nicholls 2009-12-27 http://www.cssplay.co.uk/menus/ul-multi-six.html The previous menu with the ability to adjust the widths of all levels. Stu Nicholls 2009-12-24 http://www.cssplay.co.uk/menus/ul-multi-five.html A multi-level drop/fly menu using the new system with manually adjusted widths for top and sub levels. Stu Nicholls 2009-12-24 http://www.cssplay.co.uk/menus/ul-multi-four.html A multi-level drop/fly menu using the new system and mouse clicks instead of hovers. Stu Nicholls 2009-12-23 http://www.cssplay.co.uk/menus/ul-multi-three.html Using the new multi-level menu system this has a better indication of the path taken through the menu structure. Stu Nicholls 2009-12-22 http://www.cssplay.co.uk/menus/ul-multi-two.html The no hacks, no javascript, no tables and no conditional comments dropdown/flyout menu with png opacity background images. Stu Nicholls 2009-12-21 http://www.cssplay.co.uk/menus/ul-flyout.html The no hacks, no javascript, no tables and no conditional comments flyout menu with tabbing. Stu Nicholls 2009-12-20 http://www.cssplay.co.uk/menus/ul-multi.html The no hacks, no javascript, no tables and no conditional comments dropdown/flyout menu restyled to work correctly in all browsers, with tabbing. Stu Nicholls 2009-12-20 http://www.cssplay.co.uk/menus/pro-flyout-list.html A vertical flyout menu with multi column lists ans opacity. Stu Nicholls 2009-12-15 http://www.cssplay.co.uk/menus/dl-dropdown-buttons.html Using the no hacks dropdown system and a little extra styling to produce a dropdown button menu with highlight on hover. Stu Nicholls 2009-12-14 http://www.cssplay.co.uk/menus/latest-flyout-breadcrumb.html A simple anywidth CSS flyout menu with an easy method of having a breadcrumb trail. Stu Nicholls 2009-12-12 http://www.cssplay.co.uk/menus/multi-line-dropdown.html A dropdown version of the previous multi-line flyout menu Stu Nicholls 2009-12-08 http://www.cssplay.co.uk/menus/multi-line-flyout.html A simple multi-level flyout menu with fixed widths and multi-line text. Stu Nicholls 2009-12-03 http://www.cssplay.co.uk/menus/bags-dropdown.html A dropdown menu using top level png images with the submenu used for image information. Stu Nicholls 2009-12-02 http://www.cssplay.co.uk/menu/double-click-gallery-vertical.html The previous gallery but with the thumbnails arranged vertically instead of horizontal. Stu Nicholls 2009-11-30 http://www.cssplay.co.uk/menu/double-click-gallery.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 and linking option. Stu Nicholls 2009-11-28 http://www.cssplay.co.uk/menu/click-gallery-preview.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 descriptive text and linking option. Stu Nicholls 2009-11-26 http://www.cssplay.co.uk/menu/click-gallery-previous-next.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 text and linking option. Stu Nicholls 2009-11-25 http://www.cssplay.co.uk/menus/image-dropdown-v3.html A more complex method of replacing all text with images in a single level dropdown menu using individual png images. Stu Nicholls 2009-11-25 http://www.cssplay.co.uk/menus/image-dropdown-v2.html A simple method of replacing all text with images in a single level dropdown menu with rollover. Stu Nicholls 2009-11-24 http://www.cssplay.co.uk/ie/png-imagemap.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. Stu Nicholls 2009-11-19 http://www.cssplay.co.uk/menus/png-image-replacement.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. Stu Nicholls 2009-11-18 http://www.cssplay.co.uk/menu/numbergallery.html A CSS slide show using numbers with a hover/click state but with the controls only visible when reqired. Stu Nicholls 2009-11-10 http://www.cssplay.co.uk/menus/current-dropdown.html A dropdown menu with current page styling and the ability to override the current page style when hovering other items. Stu Nicholls 2009-11-02 http://www.cssplay.co.uk/menus/image-map-menu.html A CSS dropdown menu using an image map for the top level items with a rollover state, using just two images. Stu Nicholls 2009-11-01 http://www.cssplay.co.uk/menus/current-slide.html A vertical sliding menu with current page styling and the ability to override the current page style when hovering other items. Stu Nicholls 2009-10-29 http://www.cssplay.co.uk/menus/black-anywidth-centered.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. Stu Nicholls 2009-10-23 http://www.cssplay.co.uk/menu/fonts.html It is now possible to use ttf fonts in your web pages. There are now 5 browsers that support @font-face Stu Nicholls 2009-10-20 http://www.cssplay.co.uk/menus/speech-bubble.html A zoom icon with a popup sub menu in a speech bubble. Stu Nicholls 2009-10-10 http://www.cssplay.co.uk/boxes/maxwidth.html A CSS ONLY answer for 'max-width' in IE6. No javascript or Microsoft expressions. Stu Nicholls 2009-10-05 http://www.cssplay.co.uk/menus/dl-clickslide.html Added a click to open and also a reclick to close feature. Stu Nicholls 2009-10-03 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. Stu Nicholls 2009-10-01 http://www.cssplay.co.uk/menu/clickgallery.html A click gallery in which the large image is permanently on screen until another image is chosen EVEN when refreshing the page. Stu Nicholls 2009-09-27 http://www.cssplay.co.uk/menus/ul-multi.html ..and finally a multi level version using the new system, again with no hacks, table, conditional comments or javascript. Stu Nicholls 2009-09-20 http://www.cssplay.co.uk/menus/ul-dropdown.html For those who prefer nested unordered lists for their menus, again with no hacks, table, conditional comments or javascript. Stu Nicholls 2009-09-20 http://www.cssplay.co.uk/menus/dl-pullup.html A horizontal pullup menu to continue with this series, again with no hacks, table, conditional comments or javascript. Stu Nicholls 2009-09-18 http://www.cssplay.co.uk/menus/dl-flyleft.html A fly left version of the previous menu, again with no hacks, table, conditional comments or javascript. Stu Nicholls 2009-09-16 http://www.cssplay.co.uk/menus/dl-flyout.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. Stu Nicholls 2009-09-15 http://www.cssplay.co.uk/menus/dl-slide.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 level. Stu Nicholls 2009-09-09 http://www.cssplay.co.uk/menus/dl-dropdown.html A definition list menu using the new menu system to simplify the styling Stu Nicholls 2009-09-08 http://www.cssplay.co.uk/menus/new-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. Stu Nicholls 2009-09-07 http://www.cssplay.co.uk/menus/vertical-list.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. Stu Nicholls 2009-09-02 http://www.cssplay.co.uk/menu/zoom.html Zooming a single image on hover. Stu Nicholls 2009-08-29 http://www.cssplay.co.uk/menu/zoom-gallery.html A simple hover over thumbnail gallery with a zoom feature. Stu Nicholls 2009-08-28 http://www.cssplay.co.uk/menus/slide-up-down.html An experimental menu to explore the possibility of having sliding images on hover Stu Nicholls 2009-08-27 http://www.cssplay.co.uk/menus/fisheye8.html Adding the use of png images for IE6 and giving a smoother zoom animation Stu Nicholls 2009-08-26 http://www.cssplay.co.uk/menus/fisheye6.html Another version of the CSS only fisheye menu, this time with expanding images and associated text. Stu Nicholls 2009-08-25 http://www.cssplay.co.uk/menu/fisheye3.html A very simple method of magnifying an image using just CSS Stu Nicholls 2009-08-25 http://www.cssplay.co.uk/menus/fisheye2.html A similar menu to the previous image version, but this time using expanding text on mouseover. Stu Nicholls 2009-08-24 http://www.cssplay.co.uk/menus/fisheye.html A CSS only version of the popular javascript dynamic menu. Stu Nicholls 2009-08-24 http://www.cssplay.co.uk/menus/divide-and-conquer.html Fixing a problem when having vertical divide lines between horizontal link and using rollover images. Stu Nicholls 2009-08-24 http://www.cssplay.co.uk/menus/droplist-image.html A droplist menu using top level blocks containing images with text and links. Stu Nicholls 2009-08-18 http://www.cssplay.co.uk/menus/pro-droplistv2.html A previous professional droplist menu with the additional feature of a dropline heading with droplists giving extra lists within the same dropdown. Stu Nicholls 2009-08-17 http://www.cssplay.co.uk/menus/latest-flyout.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. Stu Nicholls 2009-08-05 http://www.cssplay.co.uk/menus/centering.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. Stu Nicholls 2009-07-31 http://www.cssplay.co.uk/menu/filmstrip-v2.html As promised, the previous filmstrip gallery rotated into a vertical format with a few enhancements. Stu Nicholls 2009-07-30 http://www.cssplay.co.uk/menu/filmstrip.html A gallery using a horizontal scrolling filmstrip containing negative/positive thumbnails and landscape/portrait large images with show/hide descriptive text. Stu Nicholls 2009-07-29 http://www.cssplay.co.uk/menus/anywidth-dropline-all-center.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. Stu Nicholls 2009-07-28 http://www.cssplay.co.uk/menus/mini-pages-v2.html A version of my mini tabbed pages with the ability to have a tab open on page entry. Stu Nicholls 2009-07-27 http://www.cssplay.co.uk/menus/pro-droplist.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. Stu Nicholls 2009-07-25 http://www.cssplay.co.uk/menus/anywidth-pullup.html An anywidth menu with the top level centered and the sub menus as wide as required with pullup and flyout left/right. Stu Nicholls 2009-07-23 http://www.cssplay.co.uk/menus/pro_line_down_fly_v2.html A version 2 of the dropline, dropdown and flyout hybrid menu. Stu Nicholls 2009-07-12 http://www.cssplay.co.uk/menu/object-object.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. Stu Nicholls 2009-06-22 http://www.cssplay.co.uk/menus/triple-block-hover.html A three link block of information with rollover effect. Stu Nicholls 2009-06-17 http://www.cssplay.co.uk/menu/vertical-slide.html A conversion of the horizontal scrolling gallery into a vertical version. Stu Nicholls 2009-06-16 http://www.cssplay.co.uk/menus/anywidth-center-fly.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. Stu Nicholls 2009-06-15 http://www.cssplay.co.uk/menus/anywidth-dropline-center.html A dropline anywidth menu with droplines that are centered beneath the top level links which are also centered. Stu Nicholls 2009-06-13 http://www.cssplay.co.uk/menus/anywidth-center-center.html A single level dropdown anywidth menu with dropdown that are centered beneath the top level links. Stu Nicholls 2009-06-12 http://www.cssplay.co.uk/menu/object-gallery.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. Stu Nicholls 2009-06-06 http://www.cssplay.co.uk/menus/multi-column.html A single level dropdown menu with multi-columns, headings and curved corners using sliding doors techniques for the dropdowns. Stu Nicholls 2009-06-02 http://www.cssplay.co.uk/menus/stamp-collecting.html A dropdown menu with any width sub menus and the option of left or right dropdown/flyouts. Stu Nicholls 2009-05-20 http://www.cssplay.co.uk/menus/centered2.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. Stu Nicholls 2009-05-08 http://www.cssplay.co.uk/menus/drop-table.html A dropdown menu that uses a table to hold the dropdown information. Stu Nicholls 2009-05-07 http://www.cssplay.co.uk/menus/anywidth-flyout2.html A second 'any width' flyout menu, this time with an over run area and gapping between menu items. Stu Nicholls 2009-05-06 http://www.cssplay.co.uk/menus/iframe-shim.html Applying the iframe shim fix to the variable width dropdown/flyout menu system. Using expressions to add the iframe and styling. Stu Nicholls 2009-05-01 http://www.cssplay.co.uk/menus/skeleton4.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. Stu Nicholls 2009-04-30 http://www.cssplay.co.uk/menus/anywidth2.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. Stu Nicholls 2009-04-30 http://www.cssplay.co.uk/menus/anywidth-flyout.html A flyout version of the 'any width' dropdown menu. Stu Nicholls 2009-04-28 http://www.cssplay.co.uk/menus/anywidth.html A simplified method of producing a centered dropdown and flyout menu with variable widths depending on text content. Stu Nicholls 2009-04-27 http://www.cssplay.co.uk/menus/total_background.html A CSS only method of hovering over a horizontal menu link to change the whole menu background image. Stu Nicholls 2009-04-20 http://www.cssplay.co.uk/menus/image-text-hover.html A CSS only method of hovering over text OR associated images to highlight both AND grey out other images. Stu Nicholls 2009-04-09 http://www.cssplay.co.uk/menus/pro-dropline-images.html A dropline menu which uses sliding doors tabs for the top level and a horizontal scrolling dropline which has images and caption. Stu Nicholls 2009-04-07 http://www.cssplay.co.uk/menu/lightbox-click.html A click version of the Light Box for all browsers except Safari and Chrome Stu Nicholls 2009-03-06 http://www.cssplay.co.uk/menu/lightbox-hover.html A CSS take on the javascript LightBox using hover over thumbnail images Stu Nicholls 2009-03-06 http://www.cssplay.co.uk/menu/gallery-large.html A photograph gallery with hover to show large images with linking to full size images or another page. Stu Nicholls 2009-02-20 http://www.cssplay.co.uk/menu/one_pagev2.html A second version of the tabbed pages with a default page open on entry. Stu Nicholls 2009-02-18 http://www.cssplay.co.uk/menu/one_page.html An update to one of my early 'one page' demonstrations to bring it up to date using the latest CSS techniques. Stu Nicholls 2009-02-18 http://www.cssplay.co.uk/menu/gallery.html An update to one of my early gallery demonstrations to bring it up to date using the latest CSS techniques. Stu Nicholls 2009-02-18 http://www.cssplay.co.uk/menus/multi-ski.html A centered dropline, dropdown, flyout menu, using the latest centering technique, with current selection option Stu Nicholls 2009-02-08 http://www.cssplay.co.uk/menus/pro-drop-image.html A centered dropdown menu, using the latest centering technique, with flyout images Stu Nicholls 2009-02-06 http://www.cssplay.co.uk/layouts/three-column-layouts.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. Stu Nicholls 2009-02-04 http://www.cssplay.co.uk/layouts/flexible-equal-height.html A fluid layout with max/min width, header/footer and multiple percentage columns ALL reaching the footer using NO images. Stu Nicholls 2009-02-02 http://www.cssplay.co.uk/menus/concertina-scroll.html Tree Frog menu revised to have scrolling sub menu lists to save space. Stu Nicholls 2009-01-28 http://www.cssplay.co.uk/menus/centered.html Applying a simple method of centering single level variable width, float left menus. Stu Nicholls 2009-01-24 http://www.cssplay.co.uk/menus/skeleton3.html At last a stable cross browser method of centering a variable width float left dropdown menu. Stu Nicholls 2009-01-23 http://www.cssplay.co.uk/ie/3pxbug.html Just revisiting an old bug in IE6 for those who are still strugglimg for an answer. Stu Nicholls 2009-01-15 http://www.cssmenus.co.uk/ Not strictly CSSplay news but a new project for 2009. A new site for CSS only menus. Stu Nicholls 2009-01-11 http://www.cssplay.co.uk/layouts/layout.html A new layout for a change. This one is semi-fluid 100% height with a semi-fixed footer. Stu Nicholls 2008-11-28 http://www.cssplay.co.uk/menus/pro-dropline-9.html Another in the dropline series. This one has a simplified method of adding a 'current' selection. Stu Nicholls 2008-11-26 http://www.cssplay.co.uk/menus/elegant2.html A simple dropdown, flyout menu with the sub links sliding over the flyout menu lists. Stu Nicholls 2008-11-16 http://www.cssplay.co.uk/menus/circular-sub.html The previous menu expanded to have sub menu icons with descriptive text. Stu Nicholls 2008-11-10 http://www.cssplay.co.uk/menus/circular.html A simple single level circular menu using icons with mouseover descriptions. Stu Nicholls 2008-11-09 http://www.cssplay.co.uk/menus/concertina2.html A horizontal concertina menu that takes on the appearance of a bookshelf with lever arch files. Stu Nicholls 2008-11-07 http://www.cssplay.co.uk/menus/elegant1.html A simple dropdown menu with no graphics but plenty of 'style'. Stu Nicholls 2008-11-06 http://www.cssplay.co.uk/menus/concertina-slide.html A CSS only version of the vertical sliding menu published on stunicholls.com. Stu Nicholls 2008-10-30 http://www.cssplay.co.uk/menu/inline-links3.html A sliding doors version of inline blocks to fit any text width. Stu Nicholls 2008-10-23 http://www.cssplay.co.uk/menu/inline-links2.html 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. Stu Nicholls 2008-10-21 http://www.cssplay.co.uk/menu/inline-links.html An easy, validating method, to apply block styling to inline links. Stu Nicholls 2008-10-19 http://www.cssplay.co.uk/menus/pro_variable5.html A follow on from #4 but using another single line expression to place the iframe shim and work out the size required. Stu Nicholls 2008-10-17 http://www.cssplay.co.uk/menus/pro_variable4.html A follow on from #3 but using a single line expression to do what suckerfish does with javascript. Stu Nicholls 2008-10-15 http://www.cssplay.co.uk/menus/pro_variable3.html The answer to the problem of having variable width for each dropdown and flyout submneu without the need to style each width. Stu Nicholls 2008-10-13 http://www.cssplay.co.uk/menus/pro-flyline1.html The first in a series of fly line menus, this one using icons and image replacement techniques Stu Nicholls 2008-10-06 http://www.cssplay.co.uk/menus/pro_dropline8.html Image replacement techniques to have top level icons and a simple method of displaying the meaning of each icon. Stu Nicholls 2008-10-05 http://www.cssplay.co.uk/menus/pro_dropline7.html The 7th professional dropline menu which can have as many droplines as you wish. The demo goes up to 5 lines. Stu Nicholls 2008-09-22 http://www.cssplay.co.uk/menus/pro_drop13.html 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. Stu Nicholls 2008-09-14 http://www.cssplay.co.uk/menus/pro_drop12.html 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. Stu Nicholls 2008-09-08 http://www.cssplay.co.uk/menus/iframe_fix3.html A third method of fixing the IE6 bug when dropdown menus are transparent and dropping under select boxes. Stu Nicholls 2008-09-05 http://www.cssplay.co.uk/menus/iframe_fix2.html A second method of fixing the IE6 bug when dropdown menus are dropping under select boxes. Stu Nicholls 2008-09-03 http://www.cssplay.co.uk/menus/pro_dropline6.html The 6th professional dropline menu with ability to have a current selection and dropline highlighted. Stu Nicholls 2008-08-25 http://www.cssplay.co.uk/menu/tictactoe.html 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. Stu Nicholls 2008-08-23 http://www.cssplay.co.uk/menu/safari.html A demonstration for Safari users only to show how this browser is expanding its webkit repertoire. Stu Nicholls 2008-08-13 http://www.cssplay.co.uk/menus/vertical-concertina.html A vertical example of a concertina menu with the first level open as default. Stu Nicholls 2008-08-11 http://www.cssplay.co.uk/menus/scroller.html An experimental menu using horizontal scrolling images. Stu Nicholls 2008-08-08 http://www.cssplay.co.uk/menus/breadcrumb.html A flyout menu with the facility to add a breadcrumb trail to the current page. Stu Nicholls 2008-07-30 http://www.cssplay.co.uk/menus/concertina.html A horizontal concertina menu for displaying further information including list, images and text. Stu Nicholls 2008-06-28 http://www.cssplay.co.uk/menus/iframe_fix.html An easy method of fixing the IE6 bug when dropdown menus are dropping under select boxes. Stu Nicholls 2008-05-13 http://www.cssplay.co.uk/menus/pro_drop11.html The third in the professional dropdown menu 3D series. This one has full png transparency to give a translucent appearance to the menu. Stu Nicholls 2008-03-16 http://www.cssplay.co.uk/opacity/png_link_error.html Solving the problem of having unselectable links when placed over AlphaImageLoader pngs. Stu Nicholls 2008-03-14 http://www.cssplay.co.uk/menu/photo_not_so_simple.html The gallery that many visitors have been asking for. The simplest gallery with three extra features. Stu Nicholls 2008-03-08 http://www.cssplay.co.uk/menus/pro_drop10.html The second in the professional dropdown menu 3D series. This one has greater flexibility in size and color. Stu Nicholls 2008-03-04 http://www.cssplay.co.uk/menus/pro_drop9.html A professional dropdown menu with a 3D look using png shadows. Stu Nicholls 2008-03-02 http://www.cssplay.co.uk/menus/flyout_flash.html A fix to get flyout (and dropdown) menus to show over a flash object. Stu Nicholls 2008-02-29 http://www.cssplay.co.uk/menus/pro_drop8.html 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. Stu Nicholls 2008-02-14 http://www.cssplay.co.uk/menus/pro_line_down_fly.html Another version of the dropline dropdown hybrid menu to add a flyout stage. Stu Nicholls 2008-02-12 http://www.cssplay.co.uk/menu/click_gallery.html 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. Stu Nicholls 2008-02-11 http://www.cssplay.co.uk/menus/image_dropdown.html A menu that many visitors have asked for. Using images in place of text. Stu Nicholls 2008-01-28 http://www.cssplay.co.uk/menus/pro_drop7.html The seventh in the professional drop down series. This one has a current drop-line feature. Stu Nicholls 2008-01-24 http://www.cssplay.co.uk/menu/marbles.html A method of producing CSS only circular hot-spots on an image map. Stu Nicholls 2008-01-13 http://www.cssplay.co.uk/menus/slide_fly.html A vertical sliding menu with flyout sub levels based on my javascript 'tree frog' series. Stu Nicholls 2007-12-27 http://www.cssplay.co.uk/menu/list_gallery.html A photo gallery in which the photos can be split into various category lists which appear in a sliding menu system. Stu Nicholls 2007-12-18 http://www.cssplay.co.uk/menus/pro_left_right_line.html A dropline menu split into two parts with left aligned and right aligned top level items. Stu Nicholls 2007-12-11 http://www.cssplay.co.uk/menus/pro_dropline_dropdown.html A hybrid menu using a dropline and dropdown sub menu system Stu Nicholls 2007-12-09 http://www.cssplay.co.uk/menus/skeleton2.html The second in the skeleton series, this time for use on dark backgrounds. Stu Nicholls 2007-12-01 http://www.cssplay.co.uk/menus/pro_horizontal Continuing the Professional horizontal series with menu #17. Stu Nicholls 2007-11-29 http://www.cssplay.co.uk/menus/pro_drop6 Continuing the Professional dropdown series with one that allows section headings and dividers in the submenus. Stu Nicholls 2007-11-24 http://www.cssplay.co.uk/menus/skeleton 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. Stu Nicholls 2007-11-09 http://www.cssplay.co.uk/menu/photo_left_right The second in a series of galleries using just a little javascript to control the styling and produce a left/right thumbnail selector. Stu Nicholls 2007-10-23 http://www.cssplay.co.uk/menu/photo_click A Photograph Click Gallery using a little javascript to give more control over the presentation. Stu Nicholls 2007-10-22 http://www.cssplay.co.uk/menu/some_more A revised 'show me some more' demonstration using a small javascript 'toggle' routine to alter stylesheet class names. Stu Nicholls 2007-10-20 http://www.cssplay.co.uk/menus/tree_frog_slide The previous 'Tree Frog' menu revisited and restyled into a vertical slide menu with sub level flyouts. Stu Nicholls 2007-10-20 http://www.cssplay.co.uk/menus/pull_tabs 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. Stu Nicholls 2007-10-19 http://www.cssplay.co.uk/menus/tree_frog 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. Stu Nicholls 2007-10-16 http://www.cssplay.co.uk/menus/click_clock 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'. Stu Nicholls 2007-10-15 http://www.cssplay.co.uk/menus/pro_drop5 Another drop down menu in the professional series, this time with top level image replacement and variable width sub levels. Stu Nicholls 2007-10-13 http://www.cssplay.co.uk/menu/scrollmap A scrolling Image Map with fixed information panes. Stu Nicholls 2007-10-09 http://www.cssplay.co.uk/menus/pro_drop4 Professional drop down menu with variable widths for the drop down. Stu Nicholls 2007-10-06 http://www.cssplay.co.uk/menus/pro_drop3 Convertion of one of the simple horizontal professional series into a drop down menu. Stu Nicholls 2007-10-04 http://www.cssplay.co.uk/menus/pro_drop2 Professional looking drop-down menu using text over background images. Stu Nicholls 2007-10-02 http://www.cssplay.co.uk/menus/pro_dropline2-5 Professional looking drop-line menus in four different colors. Stu Nicholls 2007-09-26 http://www.cssplay.co.uk/menu/three_d A 3D look maze puzzle made entirely with CSS. Stu Nicholls 2007-09-21 http://www.cssplay.co.uk/boxes/border_error Highlighting a transparent border styling error in IE7. Stu Nicholls 2007-09-17 http://www.cssplay.co.uk/boxes/transparent_borders How to style transparent borders in IE5.x and IE6 using just CSS border styling and a couple of extra divs. Stu Nicholls 2007-09-17 http://www.cssplay.co.uk/menu/tilt A bit of lighthearted fun using just CSS. Stu Nicholls 2007-09-15 http://www.cssplay.co.uk/menus/pro_droptab A professional quality sliding doors drop tab centered with text links and description option. Stu Nicholls 2007-09-12 http://www.cssplay.co.uk/menus/pro_dropline A professional quality sliding doors drop-line centered with text links. Stu Nicholls 2007-09-07 http://www.cssplay.co.uk/menus/image_drop A professional quality sliding doors drop-down with text links. Stu Nicholls 2007-09-04 http://www.cssplay.co.uk/menus/pro_drop A professional quality drop-down menu with top level image rollovers. Stu Nicholls 2007-08-28 http://www.cssplay.co.uk/menus/pro_horizontal A series of professional quality horizontal menus using the 'sliding doors' techniques. Stu Nicholls 2007-08-23 http://www.cssplay.co.uk/menus/three-up-two-down 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. Stu Nicholls 2007-08-21 http://www.cssplay.co.uk/menus/magic_menu_seven 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. Stu Nicholls 2007-08-18 http://www.cssplay.co.uk/menus/magic_menu_six 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. Stu Nicholls 2007-08-17 http://www.cssplay.co.uk/index.html 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'. Stu Nicholls 2007-08-15 http://www.cssplay.co.uk/index.html 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'. Stu Nicholls 2007-08-10 http://www.cssplay.co.uk/menus/index.html Three new menus added, a hexagon shaped, a 'shutter' dropdown and an enlarging with shadow effect. Stu Nicholls 2007-08-05 http://www.cssplay.co.uk/menus/lozenge.html Based on the ziggy menu this one is lozenge shaped and has transparent borders which work in IE5.5 and IE6 using just CSS. Stu Nicholls 2007-07-28 http://www.cssplay.co.uk/menus/zig-zag.html Four new demonstrations including a zig-zag dropdown menu, tool links and transparent borders in IE5.5 and IE6 using just CSS. Stu Nicholls 2007-07-27 http://www.cssplay.co.uk/menus/page_menu2.html Two new menus showing paged information with a default page when initially displayed. Stu Nicholls 2007-06-11 http://www.cssplay.co.uk/index.html One new experiments under 'Demos' showing image mapping maps, and FIVE new menus under 'Menus' Stu Nicholls 2007-06-07 http://www.cssplay.co.uk/index.html Two new experiments under 'Demos' showing tooltips and background color change on hover Stu Nicholls 2007-05-11 http://www.cssplay.co.uk/menus/menu_builder_flyout.html Four new horizontal centered menus and a Menu Builder for the simplified flyout menu. Make building the html and css a whole lot easier. Stu Nicholls 2007-04-25 http://www.cssplay.co.uk/menus/simple_vertical.html A new six level dropdown menu with overrun and overlap and simplified CSS styling Stu Nicholls 2007-03-22 http://www.cssplay.co.uk/menus/flyout_4level.html A new five level flyout menu with overrun and overlap and simplified CSS styling Stu Nicholls 2007-03-19 http://www.cssplay.co.uk/menu/solar_map.html A new slant on the original image map technique showing speech bubbles with embeded links Stu Nicholls 2007-03-16 http://www.cssplay.co.uk/index.html Three new demonstrations, 'CSS only speech bubbles', 'Overlap and overrun menu' and 'Chunky borders' Stu Nicholls 2007-03-13 http://www.cssplay.co.uk/menu/complex_slides.html Two new gallery slideshows showing the power of CSS Stu Nicholls 2007-03-02 http://www.cssplay.co.uk/menus/overlap.html Two experimantal overlapping tab menus using small images and plenty of CSS. Stu Nicholls 2007-02-16 http://www.cssplay.co.uk/menus/mini_tabbed_pages.html A method of compressing six mini information pages into one. Stu Nicholls 2007-02-09 http://www.cssplay.co.uk/menus/slanty.html A tabbed menu with 45 degree side slopes Stu Nicholls 2007-02-07 http://www.cssplay.co.uk/opacity/fadein.html How to make an image gradually appear using just CSS Stu Nicholls 2007-02-04 http://www.cssplay.co.uk/menus/centered_sliding_doors.html How to center a float left sliding doors 100% clickable menu. Stu Nicholls 2007-02-02 http://www.cssplay.co.uk/menus/doors_drop_line_three.html The last one in this series to show how compact this type of menu can be. Stu Nicholls 2007-01-27 http://www.cssplay.co.uk/menus/doors_drop_line_two.html A menu based on the sliding doors tab method with a drop line for each tab. Also demonstratets how to style a 'selected' link'. Stu Nicholls 2007-01-26 http://www.cssplay.co.uk/menus/sliding_doors.html How to make A List Apart's Sliding doors clickable over the whole tab. No extra markup, just a small style change. Stu Nicholls 2007-01-06 http://www.cssplay.co.uk/index.html CSS play has redesigned to take on board all the comments over the last year and improve the look and navigation of the site. Stu Nicholls 2006-12-18 http://www.cssplay.co.uk/menus/drop_definition.html Four totally new drop down menus using definition lists. CSS only and compatible with all the latest browsers. Stu Nicholls 2006-11-11 http://www.cssplay.co.uk/ Twelve or more demonstrations, menus and examples have been added to the list at CSSplay Stu Nicholls 2006-10-14 http://www.cssplay.co.uk/menus/flyout2.html A much simplified CSS solution to CSS only flyout menus now with three sub levels. Stu Nicholls 2006-07-28 http://www.cssplay.co.uk/index.html CSSplay goes through a major update and adds a method of adding pop-up images to your inline links. Stu Nicholls 2006-07-20 http://www.cssplay.co.uk/index.html CSS PLaY has another small redesign of the menu system (to stop visitors getting tired of the same old look ;o) Stu Nicholls 2006-06-25 http://www.cssplay.co.uk/menus/example_flyout.html A page for fly-out examples showing what is possible with the 'CSS PLaY only' technique. Uses a much simplified single style sheet. Stu Nicholls 2006-06-11 http://www.cssplay.co.uk/menus/drop_examples.html 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 Stu Nicholls 2006-06-07 http://www.cssplay.co.uk/menu/image_magnifier2.html 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. Stu Nicholls 2006-05-25 http://www.cssplay.co.uk/index.html 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 Stu Nicholls 2006-05-19 http://www.cssplay.co.uk/menu/slide_show.html 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). Stu Nicholls 2006-04-22 http://www.cssplay.co.uk/menu/conditional.html 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. Stu Nicholls 2006-04-07 http://www.cssplay.co.uk/menus/final_drop.html 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. Stu Nicholls 2006-04-07 http://www.cssplay.co.uk/menu/lightbox.html A follow on from the multi-page photo gallery with an additional feature. Stu Nicholls 2006-03-31 http://www.cssplay.co.uk/menu/lightbox.html A new css only photo gallery system modelled around the Suckerfish HoverLightbox. Stu Nicholls 2006-03-30 http://www.cssplay.co.uk/menus/index.html Four new menu ideas based on the recent method of producing validating cross browser fly-out and drop-down menus. Stu Nicholls 2006-03-26 http://www.cssplay.co.uk/menus/dd_valid_2.html 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. Stu Nicholls 2006-03-16 http://www.cssplay.co.uk/favicon_ads.html Why not try advertising by using your favicon. This favicon page offers an inexpensive way of promoting your web site. Stu Nicholls 2006-03-14 http://www.cssplay.co.uk/menus/dd_valid.html CSS PLaY finally comes up with a w3c cross-browser drop-down cascading menu system. Stu Nicholls 2006-03-06 http://www.cssplay.co.uk/menu/calendar3.html CSS PLaY solves the problem of nesting links within links and passing w3c validation in Internet Explorer with this nested link calendar. Stu Nicholls 2006-03-04 http://www.cssplay.co.uk/menu/image_map.html A new demonstration showing how to produce an irregular shape image map with a hover effect.. Stu Nicholls 2006-03-03 http://www.cssplay.co.uk/index.html 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. Stu Nicholls 2006-02-24 http://www.cssplay.co.uk/index.html 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. Stu Nicholls 2006-02-12 http://www.cssplay.co.uk/menu/jump.html Stu produces another pure css puzzle for you to solve. Stu Nicholls 2006-01-18 http://www.cssplay.co.uk/menus/circles.html And finally a method of creating circular links without the normal square selection area. Stu Nicholls 2006-01-13 http://www.cssplay.co.uk/menus/cross.html A method of creating links that are not rectangular (the example is an interlinking cross array) and with no overlapping of link areas. Stu Nicholls 2006-01-11 http://www.cssplay.co.uk/opacity/png.html Four methods of applying text over an image by making the area beneath the text opaque. Several of the methods also work in Opera. Stu Nicholls 2006-01-07 http://www.cssplay.co.uk/mozilla/splittext.html 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. Stu Nicholls 2006-01-04