play

CSSplay - Ring menu with zoom toggle action

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




play

CSSplay - Team information

A method of displaying team photos and information panels.




play

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

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




play

CSSplay - CSS 'Loading' animation

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




play

CSSplay - CSS Photo Info demo updated

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




play

CSSplay - CSS Form Input Prompts

A CSS only method of adding form input prompts.




play

CSSplay - CSS Flexbox Layout

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




play

CSSplay - Flexbox Accordion Gallery

An accordion gallery using the latest flexbox styling techniques.




play

CSSplay - Basic Flexbox Layout

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




play

CSSplay - A vertical accordion menu using flexbox

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




play

CSSplay - A droplist menu using flexbox

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




play

CSSplay - Borders, Shadows & Gradients

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




play

CSSplay - 3D Perspective Modelling

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




play

CSSplay - 360º 3D Modelling for IE10 and IE11

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




play

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

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




play

CSSplay - 3D Stormtrooper animation

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




play

CSSplay - 3D Astro Boy animation

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




play

CSSplay - 3D Eyeball animation

3D 'eyeball' spherical animation.




play

CSSplay - 3D Swan Lake animation

3D Swan Lake animation with reflection and ripples.




play

CSSplay - 3D Mega Menu

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




play

CSSplay - CSS 'Drop Shadows'

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




play

CSSplay - CSS 'filter' grayscale

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




play

CSSplay - CSS filter gallery

A photograph gallery using css filters and transitions.




play

CSSplay - CSS British Flag

The British Flag using just two divs.




play

CSSplay - CSS Awesome Icons

Using CSS to style 'Awesome Icons'




play

CSSplay - Vimeo videos autopause for IE8+

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




play

CSSplay - Vimeo video select list with external controls

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




play

CSSplay - Vimeo video - hiding the control bar

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




play

CSSplay - EasySlide

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




play

CSSplay - EasySlide Remix

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




play

CSSplay - Responsive 'curtains' layout

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




play

CSSplay - Responsive 'curtains' layout version 2

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




play

CSSplay - CSS only responsive 'Blinds' layout

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




play

CSSplay - CSS only responsive droplist menu

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




play

CSSplay - CSS only responsive slide down/up menu

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




play

CSSplay - Responsive full screen slideshow

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




play

CSSplay - CSS only vertical slide concertina menu

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




play

CSSplay - CSS only responsive droplist menu version 2

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




play

CSSplay - Responsive 'Slanty' layout

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




play

CSSplay - Percentage border and text sizing

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




play

CSSplay - Responsive 'Wavy' layout

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




play

CSSplay - Imagemap with CSS only hover effect

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




play

CSSplay - CSS3 Tic-Tac-Toe

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




play

CSSplay - CSS only universal slide in/out menu

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




play

CSSplay - CSS responsive slideshow with auto play option

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




play

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

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.




play

CSSplay - CSS basic auto play slideshow

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




play

CSSplay - CSS responsive auto play slideshow

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




play

CSSplay - CSS responsive left right slideshow with wrap around

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




play

CSSplay - CSS click/tap multi level menu

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