cssplay.co.uk

CSSplay - CSS circular menu with circular sub menus

Stu Nicholls — 2017-07-11

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

CSSplay - Responsive autorun slideshow using HTML5 .

Stu Nicholls — 2017-04-26

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

CSSplay - CSS only multi-level tree menu with slide action, version 5

Stu Nicholls — 2017-04-24

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

CSSplay - CSS only multi-level menu with slide action, version 4

Stu Nicholls — 2017-03-13

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

CSSplay - Mi Thumb jQuery plugin.

Stu Nicholls — 2017-03-01

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

CSSplay - Mi Gallery jQuery plugin.

Stu Nicholls — 2017-01-10

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

CSSplay - Responsive slideshow using 'Swiper' customized v3.

Stu Nicholls — 2017-01-30

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

CSSplay - Responsive slideshow using 'Swiper' customized v2.

Stu Nicholls — 2017-01-27

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

CSSplay - Responsive slideshow using 'Swiper' with thumbnails.

Stu Nicholls — 2017-01-26

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

CSSplay - Responsive slideshow using 'Swiper' with html5 picture element.

Stu Nicholls — 2017-01-25

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

CSSplay - CSS only multi-level tree menu with slide action, version 3

Stu Nicholls — 2017-01-21

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

CSSplay - CSS only 'flexbox' layout

Stu Nicholls — 2017-01-19

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

CSSplay - CSS only multi-level tree menu with slide action, version 2

Stu Nicholls — 2016-12-16

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

CSS PLAY - Responsive full featured slideshow'

Stu Nicholls — 2016-11-25

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

CSS PLAY - Responsive auto run slideshow'

Stu Nicholls — 2016-11-20

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

CSSplay - CSS only multi-level tree menu with slide action

Stu Nicholls — 2016-11-17

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

CSSplay - CSS only multi-level concertina menu with bounce

Stu Nicholls — 2016-11-14

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

CSSplay - CSS only multi-level slide in menu

Stu Nicholls — 2016-10-29

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

CSSplay - CSS only flexbox menu with 'order' animation

Stu Nicholls — 2016-05-13

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

CSSplay - CSS only 3x3 grid of screens 'scroll snap points'

Stu Nicholls — 2016-04-24

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.

CSSplay - CSS only page using 'scroll snap points'

Stu Nicholls — 2016-04-06

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

CSSplay - CSS only circular menu with bounce animation

Stu Nicholls — 2016-03-09

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

CSS PLAY - Responsive 3D 'slinky'

Stu Nicholls — 2016-03-04

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

CSS PLAY - Responsive full page gallery

Stu Nicholls — 2016-02-26

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

CSSplay - Responsive swipe action momentum menu

Stu Nicholls — 2016-02-24

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

CSS PLAY - Responsive momentum swipe gallery for touch screen, trackpad and mouse

Stu Nicholls — 2016-02-24

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

CSS PLAY - Responsive momentum swipe gallery for touch screens and trackpads

Stu Nicholls — 2016-02-23

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

CSS PLAY - Javascript responsive swipe action panel changer

Stu Nicholls — 2016-02-08

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

CSS PLAY - CSS responsive keyframe slideshow

Stu Nicholls — 2015-11-02

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

CSSplay - Responsive slide down menu

Stu Nicholls — 2015-09-18

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

CSSplay - A CSS ONLY modal windows template

Stu Nicholls — 2015-08-28

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

CSS PLAY - CSS shape autorun slideshow version 2

Stu Nicholls — 2015-08-26

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

CSS PLAY - CSS shape autorun slideshow

Stu Nicholls — 2015-08-17

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

CSS PLAY - Animating CSS shapes

Stu Nicholls — 2015-08-14

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

CSS PLAY - Emulating shape-inside

Stu Nicholls — 2015-08-10

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

CSS PLAY - Tracking images using CSS shape

Stu Nicholls — 2015-08-03

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

CSSplay - Responsive experimental 'viewport' grid layout

Stu Nicholls — 2015-06-11

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)

CSSplay - Responsive experimental 'viewport' layout

Stu Nicholls — 2015-06-03

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

CSS PLAY - Responsive foreground image 'cover/contain' slideshow

Stu Nicholls — 2015-06-02

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

CSS PLAY - Responsive foreground image 'cover'

Stu Nicholls — 2015-06-01

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

CSS PLAY - Responsive foreground image 'contain'

Stu Nicholls — 2015-05-30

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

CSSplay - Responsive 'viewport' layout

Stu Nicholls — 2015-05-29

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

CSSplay - Responsive CSS multi-level jQuery menu

Stu Nicholls — 2015-05-26

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

CSS PLAY - Responsive swipe action stacked slideshow v2

Stu Nicholls — 2015-05-20

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

CSS PLAY - Responsive swipe action stacked slideshow

Stu Nicholls — 2015-05-19

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

CSSplay - Responsive CSS multi-level menu

Stu Nicholls — 2015-05-18

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

CSSplay - Responsive CSS multi-level menu

Stu Nicholls — 2015-05-14

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

CSSplay - Responsive CSS fade in/out menu panel

Stu Nicholls — 2015-04-24

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

CSSplay - Responsive CSS click/tap droplist menu - version 2

Stu Nicholls — 2015-04-20

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

CSSplay - CSS only tic-tac-toe Player v Computer

Stu Nicholls — 2015-02-26

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

CSSplay - Vimeo video replacing default controls with Play / Pause button

Stu Nicholls — 2015-02-23

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

CSSplay - CSS responsive video aspect ratios

Stu Nicholls — 2015-02-06

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

CSSplay - CSS responsive video aspect ratio converter

Stu Nicholls — 2015-02-01

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

CSSplay - CSS responsive autorun slideshow tutorial

Stu Nicholls — 2015-01-12

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

CSSplay - Responsive CSS click/tap droplist menu

Stu Nicholls — 2015-01-10

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

CSSplay - Responsive CSS click/tap multi level menu

Stu Nicholls — 2014-12-16

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

CSSplay - CSS click/tap multi level menu

Stu Nicholls — 2014-10-22

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

CSSplay - CSS responsive left right slideshow with wrap around

Stu Nicholls — 2014-10-18

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

CSSplay - CSS responsive auto play slideshow

Stu Nicholls — 2014-10-15

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

CSSplay - CSS basic auto play slideshow

Stu Nicholls — 2014-10-14

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

CSSplay - CSS responsive slideshow with auto play option, version 2

Stu Nicholls — 2014-10-13

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.

CSSplay - CSS responsive slideshow with auto play option

Stu Nicholls — 2014-10-10

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

CSSplay - CSS only universal slide in/out menu

Stu Nicholls — 2014-09-29

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

CSSplay - CSS3 Tic-Tac-Toe

Stu Nicholls — 2014-09-23

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

CSSplay - Imagemap with CSS only hover effect

Stu Nicholls — 2014-09-16

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

CSSplay - Responsive 'Wavy' layout

Stu Nicholls — 2014-09-15

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

CSSplay - Percentage border and text sizing

Stu Nicholls — 2014-09-06

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

CSSplay - Responsive 'Slanty' layout

Stu Nicholls — 2014-09-05

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

CSSplay - CSS only responsive droplist menu version 2

Stu Nicholls — 2014-09-03

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

CSSplay - CSS only vertical slide concertina menu

Stu Nicholls — 2014-08-26

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

CSSplay - Responsive full screen slideshow

Stu Nicholls — 2014-08-26

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

CSSplay - CSS only responsive slide down/up menu

Stu Nicholls — 2014-08-15

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

CSSplay - CSS only responsive droplist menu

Stu Nicholls — 2014-08-13

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

CSSplay - CSS only responsive 'Blinds' layout

Stu Nicholls — 2014-08-10

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

CSSplay - Responsive 'curtains' layout version 2

Stu Nicholls — 2014-08-06

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

CSSplay - Responsive 'curtains' layout

Stu Nicholls — 2014-08-04

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

CSSplay - EasySlide Remix

Stu Nicholls — 2014-06-30

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

CSSplay - EasySlide

Stu Nicholls — 2014-06-20

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

CSSplay - Vimeo video - hiding the control bar

Stu Nicholls — 2014-06-17

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

CSSplay - Vimeo video select list with external controls

Stu Nicholls — 2014-06-11

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

CSSplay - Vimeo videos autopause for IE8+

Stu Nicholls — 2014-06-09

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

CSSplay - CSS Awesome Icons

Stu Nicholls — 2014-04-09

Using CSS to style 'Awesome Icons'

CSSplay - CSS British Flag

Stu Nicholls — 2014-04-05

The British Flag using just two divs.

CSSplay - CSS filter gallery

Stu Nicholls — 2014-04-04

A photograph gallery using css filters and transitions.

CSSplay - CSS 'filter' grayscale

Stu Nicholls — 2014-03-31

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

CSSplay - CSS 'Drop Shadows'

Stu Nicholls — 2014-03-27

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

CSSplay - 3D Mega Menu

Stu Nicholls — 2014-03-25

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

CSSplay - 3D Swan Lake animation

Stu Nicholls — 2014-03-19

3D Swan Lake animation with reflection and ripples.

CSSplay - 3D Eyeball animation

Stu Nicholls — 2014-03-13

3D 'eyeball' spherical animation.

CSSplay - 3D Astro Boy animation

Stu Nicholls — 2014-03-13

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

CSSplay - 3D Stormtrooper animation

Stu Nicholls — 2014-03-12

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

CSSplay - 360º 3D Modelling NOT for IE10 and IE11

Stu Nicholls — 2014-03-11

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

CSSplay - 360º 3D Modelling for IE10 and IE11

Stu Nicholls — 2014-03-11

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

CSSplay - 3D Perspective Modelling

Stu Nicholls — 2014-03-10

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

CSSplay - Borders, Shadows & Gradients

Stu Nicholls — 2014-03-07

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

CSSplay - A droplist menu using flexbox

Stu Nicholls — 2014-03-06

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

CSSplay - A vertical accordion menu using flexbox

Stu Nicholls — 2014-03-05

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

CSSplay - Basic Flexbox Layout

Stu Nicholls — 2014-03-05

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

CSSplay - Flexbox Accordion Gallery

Stu Nicholls — 2014-03-04

An accordion gallery using the latest flexbox styling techniques.

CSSplay - CSS Flexbox Layout

Stu Nicholls — 2014-03-03

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

CSSplay - CSS Form Input Prompts

Stu Nicholls — 2014-03-01

A CSS only method of adding form input prompts.

CSSplay - CSS Photo Info demo updated

Stu Nicholls — 2014-02-28

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

CSSplay - CSS 'Loading' animation

Stu Nicholls — 2014-02-27

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

CSSplay - CSS only click/tap multi-level menu with hover fallback

Stu Nicholls — 2014-02-24

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

CSSplay - Team information

Stu Nicholls — 2014-02-18

A method of displaying team photos and information panels.

CSSplay - Ring menu with zoom toggle action

Stu Nicholls — 2014-02-17

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

CSSplay - CSS Checkbox Gallery

Stu Nicholls — 2014-02-14

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

CSSplay - CSS FAQs toggle answers

Stu Nicholls — 2014-02-13

A CSS only method of toggling the answers to FAQ questions

CSSplay - Drill down menu #4

Stu Nicholls — 2014-02-12

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

CSSplay - CSS 'toggle' zooming images

Stu Nicholls — 2014-02-11

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

CSSplay - Responsive multi-level menu #2

Stu Nicholls — 2014-02-10

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

CSSplay - Responsive multi-level menu

Stu Nicholls — 2014-02-03

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

CSSplay - PC, tablet and Smartphone vertical concertina animated menu

Stu Nicholls — 2014-01-29

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

CSSplay - PC, tablet and Smartphone droplist animated menu

Stu Nicholls — 2014-01-27

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

CSS play responsive inline 'swipe' slideshow version two

Stu Nicholls — 2014-01-02

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

CSS play responsive 'swipe' slideshow version three

Stu Nicholls — 2013-12-16

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

CSSplay - PC, tablet and Smartphone Menu verson 2

Stu Nicholls — 2013-12-02

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

CSSplay - Full Screen Auto Run Slideshow

Stu Nicholls — 2013-11-30

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

CSSplay - BIG! Slideshow version 1.1

Stu Nicholls — 2013-11-30

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

CSSplay - Flip Card Photo Gallery

Stu Nicholls — 2013-11-28

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

CSSplay - Form select list to drop list conversion

Stu Nicholls — 2013-11-25

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

CSSplay - Form select list alternative

Stu Nicholls — 2013-11-18

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

CSSplay - Imagemap with hover effect

Stu Nicholls — 2013-11-13

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

CSSplay - PC, tablet and Smartphone Menu

Stu Nicholls — 2013-11-04

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

CSSplay - Vertical and Horizontal centering

Stu Nicholls — 2013-10-17

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

CSSplay - Universal Mini Menu

Stu Nicholls — 2013-10-17

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

CSSplay - Smartphone Mini Menu

Stu Nicholls — 2013-10-15

A multi level mini menu suitable for smartphones.

CSSplay - Rotating Information Panels

Stu Nicholls — 2013-10-14

A set of rotating panels using just CSS3.

CSSplay - Swipe Me Inline! - Slideshow

Stu Nicholls — 2013-10-09

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

CSSplay - Responsive Single Level Menus

Stu Nicholls — 2013-10-04

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

CSSplay - Responsive Droplist Menu

Stu Nicholls — 2013-10-03

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

CSSplay - Windows 8 IE10/11 Touch Screen Gallery

Stu Nicholls — 2013-09-28

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

CSSplay-er Video Player

Stu Nicholls — 2013-09-23

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

CSS play Video Playlist

Stu Nicholls — 2013-09-14

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

CSS play responsive 'swipe' slideshow version two

Stu Nicholls — 2013-09-09

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

CSS play responsive 'swipe' slideshow

Stu Nicholls — 2013-08-19

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

CSS play responsive videos with playlists

Stu Nicholls — 2013-08-05

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

CSS play Ping-pong

Stu Nicholls — 2013-07-12

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

CSS play Windows 8 'Metro' style menu

Stu Nicholls — 2013-07-08

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

CSS play Ping-pong

Stu Nicholls — 2013-07-03

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

CSS play Tennis Animation

Stu Nicholls — 2013-07-01

A tennis animation using simple html code and CSS.

CSS play Iris Menu

Stu Nicholls — 2013-06-25

A simple iris/diaphragm open/close menu.

CSS play Mini Menu

Stu Nicholls — 2013-06-24

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

CSS play Conversion Slide Show

Stu Nicholls — 2013-06-20

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

CSS play Oh So Simple Slide Show

Stu Nicholls — 2013-06-18

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

CSS play Holiday Slide Show

Stu Nicholls — 2013-06-13

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

CSS play responsive image map

Stu Nicholls — 2013-06-07

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

CSS play responsive single level menu suitable for touch screen devices

Stu Nicholls — 2013-05-07

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

CSS play responsive layout with animated repositioning

Stu Nicholls — 2013-05-01

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

CSS play responsive dropdown/flyout menu suitable for touch screen devices

Stu Nicholls — 2013-04-26

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

CSS play responsive 'background' images suitable for IE7 and IE8

Stu Nicholls — 2013-04-24

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

CSS play responsive droplist menu suitable for touch screen devices

Stu Nicholls — 2013-04-23

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

CSS play vertical concertina menu for touch screen devices

Stu Nicholls — 2013-04-08

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

CSS play dropline menu for touch screen devices

Stu Nicholls — 2013-04-02

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

CSS play flyout menu for touch screen devices

Stu Nicholls — 2013-03-25

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

CSS play droplist menu for touch screen devices

Stu Nicholls — 2013-03-22

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

CSS play multi-level menu for touch screen devices #2

Stu Nicholls — 2013-03-21

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

CSS play multi-level menu for touch screen devices #1

Stu Nicholls — 2013-03-20

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

CSS play Information Panels suitable for touch screens

Stu Nicholls — 2013-03-19

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

CSS play - Holiday 2013 Photo Gallery

Stu Nicholls — 2013-03-15

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

CSS play Droplist Menu for IE10 Touch Screen Devices

Stu Nicholls — 2013-02-14

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

CSS play Dropdown/Flyout Menu for IE10 Touch Screen Devices

Stu Nicholls — 2013-02-12

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

CSS play - IE10 Specific styling

Stu Nicholls — 2013-02-09

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

CSS play - Image reflections

Stu Nicholls — 2013-02-08

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

CSS play - Text hover gradual color changes and gradient fills

Stu Nicholls — 2013-02-05

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

CSS play 3D Flip Down Menu

Stu Nicholls — 2013-01-18

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

CSS play - Fly In/Out Gallery

Stu Nicholls — 2013-02-01

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

CSS play - 3D Spinning Boxes for IE10

Stu Nicholls — 2013-01-25

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

CSS play - Animated 3D Gallery - Challenge

Stu Nicholls — 2013-01-23

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

CSS play - Animated 3D Cube Gallery for IE10

Stu Nicholls — 2013-01-19

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

CSS play Slide Down / Concertina Menu

Stu Nicholls — 2013-01-18

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

CSS play - 3D Dymaxion Map Animation for IE10

Stu Nicholls — 2013-01-14

A CSS3 Animated Dymaxion Map that works in IE10.

CSS play - 3D Cube Animation for IE10

Stu Nicholls — 2013-01-11

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

CSS play - 3D Animated Stacking Slideshow

Stu Nicholls — 2012-12-30

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

CSS play - Page Flip Book version 2

Stu Nicholls — 2012-12-05

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

CSS play - Any Size Gallery - version 2

Stu Nicholls — 2012-11-29

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

CSS play - Any Size Gallery

Stu Nicholls — 2012-11-28

A CSS3 gallery for images of different sizes.

CSS play - Reflow Gallery

Stu Nicholls — 2012-11-26

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

CSS vertical menu with stepped zoom

Stu Nicholls — 2012-11-21

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

CSS ONLY click open/close action multi-level menu suitable for the iPad etc..

Stu Nicholls — 2012-11-02

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.

CSS play - Brick Wall

Stu Nicholls — 2012-10-30

A CSS3 Brick wall using no images.

An Anywidth Menu version #7 suitable for the iPad, iPad mini, iPhone and iPod Touch

Stu Nicholls — 2012-10-30

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.

CSS play - Random Heroes Animation

Stu Nicholls — 2012-10-26

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

CSS play - Animated Sprites

Stu Nicholls — 2012-10-25

A CSS3 animated sprites using no images.

CSS play - Space Invader

Stu Nicholls — 2012-10-22

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

CSS play - Connect Four

Stu Nicholls — 2012-10-20

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

CSS play - Tic-Tac-Toe

Stu Nicholls — 2012-10-18

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

CSS play Dropdown menu with persist.

Stu Nicholls — 2012-10-17

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

CSS play - Click, Zoom and Fly Gallery

Stu Nicholls — 2012-10-16

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

CSS play - Scan and Magnify an Image

Stu Nicholls — 2012-10-15

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

CSS play Sliding Panels Menu.

Stu Nicholls — 2012-10-12

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

CSS play - Before and After Image Slider - version 2

Stu Nicholls — 2012-10-11

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

CSS play - Before and After Image Slider

Stu Nicholls — 2012-10-10

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

CSS play - Image between text

Stu Nicholls — 2012-10-09

Centering an image between two columns of text with wrap around

CSS play - Tooltips updated

Stu Nicholls — 2012-10-08

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

CSS play Corner Circular Menu.

Stu Nicholls — 2012-10-05

A circular corner menu with animation.

CSS play - STU'slide - version 2

Stu Nicholls — 2012-09-26

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

A Slide Up / Drop Down Menu.

Stu Nicholls — 2012-09-17

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

A Vertical click to open/close Concertina.

Stu Nicholls — 2012-09-10

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

A CSS Diagonal Definition List Menu.

Stu Nicholls — 2012-09-08

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

CSS play - Radar Gallery

Stu Nicholls — 2012-08-31

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

CSS play - STU'slide

Stu Nicholls — 2012-08-24

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

CSS play - The BIG Slide

Stu Nicholls — 2012-08-20

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

CSS play - Swipe Slide Show

Stu Nicholls — 2012-08-15

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

CSS play - 'GO Slide' Slide Show

Stu Nicholls — 2012-08-11

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

A CSS Definition List Menu.

Stu Nicholls — 2012-08-09

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

CSS play - Dragonfly Slide Show

Stu Nicholls — 2012-08-06

A CSS ONLY Dragonfly Slide Show with permanent image changes.

CSS play - CSS only Font

Stu Nicholls — 2012-08-03

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

CSS play - Rotary Slide Show

Stu Nicholls — 2012-07-30

A CSS ONLY Rotary Slide Show with permanent image changes.

CSS play - Slide Show

Stu Nicholls — 2012-07-27

A CSS ONLY Slide Show with permanent image changes.

A CSS3 Drilldown Menu.

Stu Nicholls — 2012-07-06

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

CSS play - Dartboard

Stu Nicholls — 2012-07-05

A CSS ONLY Dartboard using no images.

A CSS3 Pie Menu.

Stu Nicholls — 2012-07-02

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

A CSS3 Ring Menu version 2.

Stu Nicholls — 2012-06-30

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

CSS play - Pie Chart

Stu Nicholls — 2012-06-30

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

CSS play - Enlarging an area of an image

Stu Nicholls — 2012-06-29

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

CSS play - Hover Gallery - version 2

Stu Nicholls — 2012-06-28

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

CSS play - Hover Gallery

Stu Nicholls — 2012-06-27

A :hover gallery with permanent image changes.

A CSS Click action Tree Menu.

Stu Nicholls — 2012-06-27

A click action Tree Menu using just CSS.

CSS play - Stacked Slideshow

Stu Nicholls — 2012-06-27

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

A CSS Click to Open/Close Dropline Menu.

Stu Nicholls — 2012-06-27

A click action dropline menu with persist and accessibility.

CSS play - radioBox - Lightbox

Stu Nicholls — 2012-06-26

Using my latest techniques to produce a Lightbox type gallery.

A CSS Click to Open/Close Menu #2.

Stu Nicholls — 2012-06-26

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

A CSS Click action Concertina Menu.

Stu Nicholls — 2012-06-26

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

CSS Left/Right Click Gallery

Stu Nicholls — 2012-06-25

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

A CSS Click to Open/Close Menu.

Stu Nicholls — 2012-06-24

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

CSS Tabbed Pages - Radio method

Stu Nicholls — 2012-06-23

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

Show/Hide more information

Stu Nicholls — 2012-06-22

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

Permanent Image Click 'Radio' Gallery

Stu Nicholls — 2012-06-22

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

Permanent Image Click Gallery

Stu Nicholls — 2012-06-21

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

CSS Whack-a-Rat game

Stu Nicholls — 2012-06-20

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

A CSS3 Circular Icons Menu.

Stu Nicholls — 2012-06-14

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

A CSS3 Radial Menu.

Stu Nicholls — 2012-06-07

Using just CSS to produce a circular radial animated menu.

A CSS3 Ring Menu.

Stu Nicholls — 2012-06-05

Using just CSS to produce a circular ring menu.

A CSS3 Quadrant Menu.

Stu Nicholls — 2012-06-05

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

A CSS3 hexagonal Menu.

Stu Nicholls — 2012-06-02

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

CSS only tabbed pages

Stu Nicholls — 2012-05-30

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

3D Dymaxion Map animation for Safari, Chrome and Firefox

Stu Nicholls — 2012-05-24

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

Three planets and the moon animation for Safari, Chrome and Firefox

Stu Nicholls — 2012-05-21

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

Interactive Marquee for Safari, Chrome and Firefox

Stu Nicholls — 2012-05-14

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

Content: image gallery version #2 for the iPad etc..

Stu Nicholls — 2012-04-30

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

CSS ONLY click action multi-level menu suitable for the iPad etc..

Stu Nicholls — 2012-04-27

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

CSS Stacked Slideshow #2

Stu Nicholls — 2012-04-25

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

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

Stu Nicholls — 2012-04-19

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

CSSplay Safari Mobile Flyout Menu Fixed

Stu Nicholls — 2012-04-18

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

CSSplay 3D animated unfolding menu

Stu Nicholls — 2012-04-03

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

CSSplay Safari Mobile Dropdown Menu Fixed

Stu Nicholls — 2012-04-02

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

CSSplay 3D Runners

Stu Nicholls — 2012-03-22

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

CSSplay 3D Sphere

Stu Nicholls — 2012-03-17

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

CSSplay 3D Truncated Icosahedron

Stu Nicholls — 2012-03-14

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

CSS3 3D jack-in-the-Box

Stu Nicholls — 2012-03-11

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

CSSplay 3D Flip-down Menu

Stu Nicholls — 2012-03-10

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

CSSplay Sliding Boxes

Stu Nicholls — 2012-03-08

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

CSSplay Rotating Box

Stu Nicholls — 2012-03-07

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

CSSplay Rotary Photo Gallery

Stu Nicholls — 2012-03-07

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

CSSplay Horizontal Multi-media Accordian

Stu Nicholls — 2012-03-01

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

CSSplay Horizontal Accordian

Stu Nicholls — 2012-02-29

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

CSSplay Image Grid Zoom

Stu Nicholls — 2012-02-27

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

CSSplay Dropline/Dropdown Menu

Stu Nicholls — 2012-01-19

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

The Right Move - Puzzle

Stu Nicholls — 2012-01-12

A puzzle using :target.

Image Magnifier with Bounce

Stu Nicholls — 2011-12-22

A simple image magnifier with a bounce animation.

CSSplay Slide/Fly menu with Image 'Bounce'

Stu Nicholls — 2011-12-21

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

CSSplay No Left Turn Maze Puzzle

Stu Nicholls — 2011-12-06

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

CSSplay :target dropline menu

Stu Nicholls — 2011-12-04

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

CSSplay simple rollover menu

Stu Nicholls — 2011-12-04

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

CSSplay Stretch/Droplist Menu

Stu Nicholls — 2011-12-02

Using CSS3 to animate a stretch/droplist menu.

CSSplay zoomBox Slideshow

Stu Nicholls — 2011-11-28

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

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

Stu Nicholls — 2011-11-25

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

CSSplay starLIGHT lightbox

Stu Nicholls — 2011-11-23

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

CSSplay Any Size Gallery

Stu Nicholls — 2011-11-21

Using CSS3 to produce a gallery for any size images.

CSSplay Mickey Mouse and Friends

Stu Nicholls — 2011-11-20

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

CSSplay Grid Accordian version 2

Stu Nicholls — 2011-11-17

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

CSSplay Drill Down Menu v2

Stu Nicholls — 2011-11-17

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

CSSplay Grid Accordian

Stu Nicholls — 2011-11-16

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

CSSplay Circle Slideshow

Stu Nicholls — 2011-11-14

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

CSSplay Image Rotation

Stu Nicholls — 2011-11-12

Using CSS3 to rotate a set of images.

CSS3 Image Zoooom

Stu Nicholls — 2011-11-08

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

CSS3 left/right click panels #3

Stu Nicholls — 2011-11-06

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

CSS3 left/right click gallery #2

Stu Nicholls — 2011-11-05

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

CSS3 left/right click gallery

Stu Nicholls — 2011-11-04

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

A search box stretch feature

Stu Nicholls — 2011-11-01

A CSS3 animation to stretch a search box on focus.

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

Stu Nicholls — 2011-10-31

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

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

Stu Nicholls — 2011-10-31

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

html5 oneBox lightbox

Stu Nicholls — 2011-10-20

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

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

Stu Nicholls — 2011-10-07

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

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

Stu Nicholls — 2011-10-06

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

Click action concertina slide menu

Stu Nicholls — 2011-10-04

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

Slide out menu

Stu Nicholls — 2011-09-24

A CSS3 animated slide out menu

CSS3 Tabs

Stu Nicholls — 2011-09-18

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

Three auto-run slideshows

Stu Nicholls — 2011-09-14

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

Click action dropdown menu

Stu Nicholls — 2011-09-11

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

Image click information panels

Stu Nicholls — 2011-09-09

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

Focus on images

Stu Nicholls — 2011-09-08

A method of applying :focus to images.

Animated image enlarger

Stu Nicholls — 2011-09-06

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

CSS3 Headline Changer

Stu Nicholls — 2011-09-03

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

CSS solid text with shadow

Stu Nicholls — 2011-08-30

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

A drop panel menu with multi-configurations

Stu Nicholls — 2011-08-25

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

CSS3 Left/Right Slide Gallery

Stu Nicholls — 2011-08-09

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

A droplist menu with slide action

Stu Nicholls — 2011-07-25

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

CSS Round and Round circular menu

Stu Nicholls — 2011-07-18

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

CSS click droplist menu

Stu Nicholls — 2011-07-15

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

CSS3 LightBox Menu

Stu Nicholls — 2011-07-03

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

CSS3 Reflections

Stu Nicholls — 2011-07-01

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

CSS3 Meowww!

Stu Nicholls — 2011-06-26

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

CSS3 Keyframe 'Lightbox' Gallery

Stu Nicholls — 2011-06-24

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

CSS3 Text Zoom Menu

Stu Nicholls — 2011-06-22

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

CSS3 Icon Zoom Menu

Stu Nicholls — 2011-06-22

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

CSS3 Keyframe Gallery

Stu Nicholls — 2011-06-18

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

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

Stu Nicholls — 2011-06-13

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

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

Stu Nicholls — 2011-06-11

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

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

Stu Nicholls — 2011-06-09

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

An Anywidth Menu for the iPad, iPhone and iPod Touch

Stu Nicholls — 2011-06-07

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

Content: 100 image gallery

Stu Nicholls — 2011-05-30

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

oneBox lightbox

Stu Nicholls — 2011-05-27

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

CSS3 Resize

Stu Nicholls — 2011-05-20

Demonstrations for the use of the 'resize' style.

CSS3 Page Flip Book

Stu Nicholls — 2011-05-19

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

CSS3 Page Flip Gallery

Stu Nicholls — 2011-05-17

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

CSS3 Page Flip Animation with a twist

Stu Nicholls — 2011-05-17

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

CSS3 Page Flip Animation

Stu Nicholls — 2011-05-15

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

CSS3 Playing Cards

Stu Nicholls — 2011-05-11

Using CSS3 to produce a playing card animated menu.

CSS Image Rotation

Stu Nicholls — 2011-05-09

Using CSS to cycle though a set of images.

CSS3 Flower Power

Stu Nicholls — 2011-05-07

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

CSS3 Photo Corner Curls

Stu Nicholls — 2011-05-04

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

CSS3 Sliding Panels

Stu Nicholls — 2011-04-18

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

A CSS3 gradient fill menu

Stu Nicholls — 2011-04-16

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

A CSS3 click multi-dropline menu

Stu Nicholls — 2011-04-15

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

A Circular menu squared

Stu Nicholls — 2011-04-14

A circular menu with CSS3 enhancements.

A CSS3 animated drop down menu

Stu Nicholls — 2011-04-14

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

Another update to the css only lightbox style

Stu Nicholls — 2011-04-12

Using the latest techniques to update the previous lightbox demos.

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

Stu Nicholls — 2011-04-06

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

CSS click action vertical concertina menu

Stu Nicholls — 2011-04-05

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

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

Stu Nicholls — 2011-03-28

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

Image Information Panels

Stu Nicholls — 2011-03-25

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

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

Stu Nicholls — 2011-03-23

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

Show me more/less revisited

Stu Nicholls — 2011-03-21

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

CSS Stacked Slideshow

Stu Nicholls — 2011-03-20

Using CSS to produce an animated stack of images.

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

Stu Nicholls — 2011-03-19

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

CSS3 'Hover/Click' Slideshow

Stu Nicholls — 2011-03-18

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

CSS ONLY click action vertical slide menu

Stu Nicholls — 2011-03-15

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

CSS ONLY click action flyout menu

Stu Nicholls — 2011-03-14

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

CSS ONLY click action dropline menu

Stu Nicholls — 2011-03-13

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

CSS ONLY click action multi-level menu

Stu Nicholls — 2011-03-12

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

CSS3 Carousel Slideshow - 'Click version'

Stu Nicholls — 2011-03-11

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

CSS3 3D Social Network Ring

Stu Nicholls — 2011-03-06

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

CSS3 3D Book

Stu Nicholls — 2011-03-02

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

CSS3 3D Carousel

Stu Nicholls — 2011-03-01

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

CSS3 3D Billboard

Stu Nicholls — 2011-03-01

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

CSS3 3D Rollover Menu

Stu Nicholls — 2011-02-27

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

Image enlarger

Stu Nicholls — 2011-02-26

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

CSS3 Carousel Slideshow

Stu Nicholls — 2011-02-25

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

CSS3 Vertical Image Slide Menu.

Stu Nicholls — 2011-02-24

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

CSS3 3D Rotating Card

Stu Nicholls — 2011-02-22

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

CSS3 Book Shelf Menu.

Stu Nicholls — 2011-02-21

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

CSS3 Expanding Slide Down Menu.

Stu Nicholls — 2011-02-20

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

Safari Mobile browser 'exploding' image links.

Stu Nicholls — 2011-02-10

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

CSS3 Slide/Animation Pullup Menu

Stu Nicholls — 2011-02-09

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

CSS3 Photo Information panels

Stu Nicholls — 2011-02-07

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

CSS3 Image Manipulation

Stu Nicholls — 2011-02-07

Using CSS3 to animate a set of thumbnail images.

Safari Mobile browser flyout icons

Stu Nicholls — 2011-01-25

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

CSS3 Hover-to-Run slideshow

Stu Nicholls — 2011-01-24

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

Safari Mobile browser flyout list

Stu Nicholls — 2011-01-22

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

CSS3 Rotate/Enlarge Gallery

Stu Nicholls — 2011-01-21

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

Safari Mobile browser droplist menu with delay

Stu Nicholls — 2011-01-21

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

Safari Mobile browser flyout menu

Stu Nicholls — 2011-01-19

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

CSS3 Icon Slide Menu

Stu Nicholls — 2011-01-19

Using CSS3 to animate an icon menu with associated text.

CSS3 Slide Up/Down Gallery

Stu Nicholls — 2011-01-17

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

Safari Mobile browser slide down menu

Stu Nicholls — 2011-01-15

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

Safari Mobile browser dropdown menu

Stu Nicholls — 2011-01-12

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

CSS + TIME flyout menu

Stu Nicholls — 2011-01-08

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

CSS3 slide down menu

Stu Nicholls — 2011-01-06

Using CSS3 to produce a slide down menu.

Drop List Menu

Stu Nicholls — 2011-01-05

A Drop List Menu with curved corners and drop shadows.

Pull-down information panel

Stu Nicholls — 2011-01-04

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

Pull-down droplist menu

Stu Nicholls — 2011-01-02

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

Multi-column float/drop menu

Stu Nicholls — 2010-12-31

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

Image dropdown with tooltips

Stu Nicholls — 2010-12-29

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

A new venture into HTML5 and CSS3

Stu Nicholls — 2010-12-20

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

CSS3 Left/Right Slide Menu

Stu Nicholls — 2010-12-01

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

CSS3 Animated Slideshow

Stu Nicholls — 2010-11-22

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

CSS3 Slide down / Slide fly animation

Stu Nicholls — 2010-11-19

Using CSS3 to produce an animated sliding dropdown flyout menu.

IE6 png fix for foreground images

Stu Nicholls — 2010-10-01

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

CSS3 Social Network Menu

Stu Nicholls — 2010-09-28

Using CSS3 to produce a social network circle of icons.

CSS3 + TIME Sliding Panels Menu

Stu Nicholls — 2010-09-26

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

CSS3 Image Slide Menu

Stu Nicholls — 2010-09-23

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

HTML+TIME Flylist Menu

Stu Nicholls — 2010-09-21

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

HTML+TIME background color change

Stu Nicholls — 2010-09-20

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

HTML+TIME Dropdown Menu

Stu Nicholls — 2010-09-12

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

timeAction Galleries for IE7 and IE8

Stu Nicholls — 2010-09-10

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

CSS3 and time:animate sliding panels

Stu Nicholls — 2010-09-08

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

CSS3 Enhanced Picture Gallery

Stu Nicholls — 2010-08-14

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

CSS3 Enhanced Photo Gallery

Stu Nicholls — 2010-08-08

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

Dropdown with a twist

Stu Nicholls — 2010-08-05

A dropdown menu with a twist and CSS3 enhancements.

Dropline with Overrun

Stu Nicholls — 2010-08-02

A dropline menu with an overrun area and CSS3 enhancements.

CSS3 Animated Tabs

Stu Nicholls — 2010-07-31

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

100% background Images using CSS3

Stu Nicholls — 2010-07-28

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

Slide Line Menu with CSS3 animation

Stu Nicholls — 2010-07-27

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

Flyline/Dropdown Menu with CSS3 animation

Stu Nicholls — 2010-07-27

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

F.a.S.T Image Enlarger

Stu Nicholls — 2010-07-26

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

Inline/Flyout menu

Stu Nicholls — 2010-07-22

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

Inline/Dropline menu

Stu Nicholls — 2010-07-21

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

NEW! Inline/Dropdown menu system

Stu Nicholls — 2010-07-21

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

Float/Drop Menu Tutorial

Stu Nicholls — 2010-07-18

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

CSS3 animated droplist menu

Stu Nicholls — 2010-07-16

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

Droplist Menu with flyout sub menus

Stu Nicholls — 2010-07-07

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

CSS Float/Drop image menu version 2

Stu Nicholls — 2010-06-15

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

CSS Float/Drop image menu

Stu Nicholls — 2010-06-12

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

CSS playBOX v2

Stu Nicholls — 2010-06-01

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

CSS playBOX

Stu Nicholls — 2010-05-31

CSS playBOX - The Ultimate CSS Lightbox.

CSS only drill-down menu

Stu Nicholls — 2010-05-30

A CSS answer to the javascrpt drill-down menus.

CSS3 Single Level Slideout Menu

Stu Nicholls — 2010-05-03

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

CSS3 Slideout Menu

Stu Nicholls — 2010-04-30

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

CSS3 Image Enlarger

Stu Nicholls — 2010-04-26

Using CSS3 transitions to produce a smooth image enlarger.

CSS3 Sliced Rollover

Stu Nicholls — 2010-04-25

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

Image dropdown with rollovers

Stu Nicholls — 2010-04-25

A single level dropdown with top level rollover images.

CSS3 Text Overflow

Stu Nicholls — 2010-04-23

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

CSS3 Smooth Zoom Icon Menu

Stu Nicholls — 2010-04-17

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

FaST Gallery.

Stu Nicholls — 2010-04-14

Using FaST to create a gallery for any size images.

CSS play - F.a.S.T.

Stu Nicholls — 2010-04-11

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

CSS3 Click Slideshow

Stu Nicholls — 2010-03-31

Using CSS3 adjacent sibling selector to produce a Click Slideshow.

Dropline menu with current page override

Stu Nicholls — 2010-03-30

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

CSS Select List Menu

Stu Nicholls — 2010-03-13

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

ImageMap Revisited

Stu Nicholls — 2010-03-05

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

CSS3 Clickbox Gallery

Stu Nicholls — 2010-02-23

Using CSS3 adjacent sibling selector to produce a Clickbox Gallery.

CSS3 Click Gallery

Stu Nicholls — 2010-02-21

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

CSS3 Animated cubes

Stu Nicholls — 2010-02-19

Using webkit keyframes to continuously anumate a set of cubes.

Tower of Hanoi

Stu Nicholls — 2010-02-18

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

Interactive Marquee for Safari and Chrome

Stu Nicholls — 2010-02-16

Using CSS3 and keyframes to produce an interactive marquee

Dropshadow/gradient fill menu for IE

Stu Nicholls — 2010-02-16

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

Shadows revisited

Stu Nicholls — 2010-02-12

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

CSS3 Analogue Clock

Stu Nicholls — 2010-02-11

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

CSS3 Digital Timer

Stu Nicholls — 2010-02-11

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

CSS3 Auto-run Slideshow

Stu Nicholls — 2010-02-10

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

CSS3 Infinite Zoom-In

Stu Nicholls — 2010-02-09

In collaboration with Javier Román Cortés I have produced an infinite zoom-in set of images animated with nothing more than Safari CSS webkit styling. To celebrate 20 years of Photoshop.

CSS3 3D Spheres

Stu Nicholls — 2010-02-06

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

CSS3 'Drop Everything'

Stu Nicholls — 2010-02-06

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

CSS3 Parallax Scrolling

Stu Nicholls — 2010-02-04

Using CSS3 to parallax scroll text.

CSS3 Duff Roll

Stu Nicholls — 2010-02-03

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

CSS3 Can Roll

Stu Nicholls — 2010-02-02

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

CSS3 Animation

Stu Nicholls — 2010-02-01

Using CSS3 selectors to animate a series of static images.

CSS3 slide up/down lists

Stu Nicholls — 2010-01-31

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

CSS3 general sibling selector problem

Stu Nicholls — 2010-01-31

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

CSS3 fitted tabs

Stu Nicholls — 2010-01-29

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

Image Magnifier

Stu Nicholls — 2010-01-28

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

CSS3 Photo Info

Stu Nicholls — 2010-01-27

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

CSS3 Buttons

Stu Nicholls — 2010-01-27

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

CSS3 Zoom Gallery

Stu Nicholls — 2010-01-27

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

CSS3 Photo Slide

Stu Nicholls — 2010-01-27

Using CSS3 styles to produce a sliding photo gallery.

CSS3 fade menu

Stu Nicholls — 2010-01-25

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

CSS3 slide menu

Stu Nicholls — 2010-01-24

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

'Showup' sub line menu

Stu Nicholls — 2010-01-22

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

Image dropdown menu - no hacks

Stu Nicholls — 2010-01-21

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

'Pullover' sub line menu

Stu Nicholls — 2010-01-15

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

Totally NEW 'Push-Pull' sub line menu system

Stu Nicholls — 2010-01-14

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

CSS play's 'Slideshow'

Stu Nicholls — 2010-01-13

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

Using CSS play's 'Clickbox'

Stu Nicholls — 2010-01-11

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

No hacks dropdown/flyout - 'Snowstorm'

Stu Nicholls — 2010-01-11

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

CSS play's 'Clickbox'

Stu Nicholls — 2010-01-08

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

No hacks dropdown/flyout menu v9

Stu Nicholls — 2010-01-05

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

No hacks dropdown/flyout menu v8

Stu Nicholls — 2010-01-01

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

No hacks flyout menu v2

Stu Nicholls — 2009-12-29

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

No hacks dropdown/flyout menu v7

Stu Nicholls — 2009-12-27

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

No hacks dropdown/flyout menu v6

Stu Nicholls — 2009-12-24

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

No hacks dropdown/flyout menu v5

Stu Nicholls — 2009-12-24

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

No hacks dropdown/flyout menu v4

Stu Nicholls — 2009-12-23

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

No hacks dropdown/flyout menu v3

Stu Nicholls — 2009-12-22

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

No hacks dropdown/flyout menu v2

Stu Nicholls — 2009-12-21

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

No hacks multi level flyout menu

Stu Nicholls — 2009-12-20

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

Re-styled no hacks dropdown/flyout menu

Stu Nicholls — 2009-12-20

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

Multi-column flyout menu

Stu Nicholls — 2009-12-15

A vertical flyout menu with multi column lists ans opacity.

Single level dropdown button menu

Stu Nicholls — 2009-12-14

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

Simple anywidth flyout menu with breadcrumb trail

Stu Nicholls — 2009-12-12

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

Multi-level, multi-line dropdown menu

Stu Nicholls — 2009-12-08

A dropdown version of the previous multi-line flyout menu

Multi-level, multi-line flyout menu

Stu Nicholls — 2009-12-03

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

Image information dropdown menu

Stu Nicholls — 2009-12-02

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

Gallery with vertical sliding thumbnail images

Stu Nicholls — 2009-11-30

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

Gallery with sliding thumbnail images

Stu Nicholls — 2009-11-28

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

Previous/Next preview click gallery

Stu Nicholls — 2009-11-26

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

Previous/Next click gallery

Stu Nicholls — 2009-11-25

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

A more complex image dropdown menu

Stu Nicholls — 2009-11-25

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

A simple image dropdown menu

Stu Nicholls — 2009-11-24

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

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

Stu Nicholls — 2009-11-19

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

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

Stu Nicholls — 2009-11-18

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

A CSS gallery by numbers.

Stu Nicholls — 2009-11-10

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

A dropdown menu with current page override.

Stu Nicholls — 2009-11-02

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

A CSS image map menu.

Stu Nicholls — 2009-11-01

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

A vertical slide with current page override.

Stu Nicholls — 2009-10-29

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

A dropdown menu in shades of grey and black.

Stu Nicholls — 2009-10-23

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

TTF fonts for web pages

Stu Nicholls — 2009-10-20

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

Zoom icon with speech bubble

Stu Nicholls — 2009-10-10

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

'max-width' for IE6

Stu Nicholls — 2009-10-05

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

UPDATE to new click to slide vertical menu

Stu Nicholls — 2009-10-03

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

New click to slide vertical menu

Stu Nicholls — 2009-10-01

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

Permanent image click gallery

Stu Nicholls — 2009-09-27

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

New horizontal multi level menu

Stu Nicholls — 2009-09-20

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

New horizontal dropdown menu

Stu Nicholls — 2009-09-20

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

New horizontal pullup menu

Stu Nicholls — 2009-09-18

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

New vertical fly left menu

Stu Nicholls — 2009-09-16

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

New vertical flyout menu

Stu Nicholls — 2009-09-15

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

New vertical slide menu

Stu Nicholls — 2009-09-09

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

New definition list menu

Stu Nicholls — 2009-09-08

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

FINALLY a new CSS only dropdwon meu

Stu Nicholls — 2009-09-07

Afer all this time there is finally a dropdown menu that doesn't use javascript, table, conditional comments, hacks, extra markup and works in all the major browsers including IE6.

A vertical flyout list menu

Stu Nicholls — 2009-09-02

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

A single image zoom

Stu Nicholls — 2009-08-29

Zooming a single image on hover.

A zoom gallery

Stu Nicholls — 2009-08-28

A simple hover over thumbnail gallery with a zoom feature.

An image sliding menu

Stu Nicholls — 2009-08-27

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

A CSS Fisheye png menu

Stu Nicholls — 2009-08-26

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

A CSS Fisheye Image Menu version 2

Stu Nicholls — 2009-08-25

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

A dynamic CSS image magnifier

Stu Nicholls — 2009-08-25

A very simple method of magnifying an image using just CSS

A CSS Fisheye Text Menu

Stu Nicholls — 2009-08-24

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

A CSS Fisheye Image Menu

Stu Nicholls — 2009-08-24

A CSS only version of the popular javascript dynamic menu.

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

Stu Nicholls — 2009-08-24

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

A droplist menu with top level images and text/links

Stu Nicholls — 2009-08-18

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

A droplist menu with a sublist feature

Stu Nicholls — 2009-08-17

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

A basic anywidth flyout menu

Stu Nicholls — 2009-08-05

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

Latest centering technique

Stu Nicholls — 2009-07-31

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

A film strip gallery version 2

Stu Nicholls — 2009-07-30

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

A film strip gallery

Stu Nicholls — 2009-07-29

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

Anywidth dropline/dropdown centered

Stu Nicholls — 2009-07-28

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

Mini tabbed pages version 2

Stu Nicholls — 2009-07-27

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

A Professional droplist menu

Stu Nicholls — 2009-07-25

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

An anywidth pullup, flyout menu

Stu Nicholls — 2009-07-23

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

A Dropline, Dropdown and two level Flyout menu

Stu Nicholls — 2009-07-12

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

A mixed gallery using the 'object' element

Stu Nicholls — 2009-06-22

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

Triple Link block with rollover effect.

Stu Nicholls — 2009-06-17

A three link block of information with rollover effect.

Vertical scrolling photo gallery

Stu Nicholls — 2009-06-16

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

Professional anywidth centered dropdown/flyout menu

Stu Nicholls — 2009-06-15

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

Professional anywidth centered dropline menu

Stu Nicholls — 2009-06-13

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

Professional anywidth centered dropdown menu

Stu Nicholls — 2009-06-12

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

Photograph gallery using the 'object' element

Stu Nicholls — 2009-06-06

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

Professional multi-column dropdown

Stu Nicholls — 2009-06-02

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

Professional dropdown flyout left/right menu

Stu Nicholls — 2009-05-20

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

Centering unknown width horizontal menus - revisited

Stu Nicholls — 2009-05-08

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

Professional drop table menu

Stu Nicholls — 2009-05-07

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

Professional Any Width flyout menu with over run

Stu Nicholls — 2009-05-06

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

IE6 select box bug - iframe shim fix

Stu Nicholls — 2009-05-01

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

Skeleton menu version 4

Stu Nicholls — 2009-04-30

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

Professional Any Width top and sub levels v2

Stu Nicholls — 2009-04-30

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

Professional Any Width flyout menu

Stu Nicholls — 2009-04-28

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

Professional Any Width top and sub levels

Stu Nicholls — 2009-04-27

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

Total background image change on hover

Stu Nicholls — 2009-04-20

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

Text OR associated image hover

Stu Nicholls — 2009-04-09

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

Dropline menu with horizontal scrolling images

Stu Nicholls — 2009-04-07

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

CSS Light Box - click version

Stu Nicholls — 2009-03-06

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

CSS Light Box

Stu Nicholls — 2009-03-06

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

Photo gallery with links to larger images

Stu Nicholls — 2009-02-20

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

Cross browser tabbed pages version 2

Stu Nicholls — 2009-02-18

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

Cross browser tabbed pages with embedded links - revisited and updated

Stu Nicholls — 2009-02-18

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

A Photograph Gallery - revisited and updated

Stu Nicholls — 2009-02-18

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

Centered sliding doors dropline, dropdown, flyout

Stu Nicholls — 2009-02-08

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

Professional centered dropdown with flyout images

Stu Nicholls — 2009-02-06

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

3 column layout with 7 variations

Stu Nicholls — 2009-02-04

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

Fluid layout with all columns reaching footer

Stu Nicholls — 2009-02-02

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

Vertical concertina with scrolling sub menus

Stu Nicholls — 2009-01-28

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

Centering single level menus - revisited

Stu Nicholls — 2009-01-24

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

Float left variable width dropdown menus - CENTERED!!

Stu Nicholls — 2009-01-23

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

The IE6 3px bug fix

Stu Nicholls — 2009-01-15

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