CSS PLAY
Doing It With Style
02-07-2026
A simple method to produce an animated, responsive, pie chart for any number or sectors.
15-06-2026
An easy method of having a Grid Lanes layout while we wait for browser support
13-06-2026
A methods of folding the top right corner of a text panel
22-05-2026
Two methods of folding the corners of images
12-04-2026
CSS oh so simple slideshow using cqw, cqh, @keyframes and transition styles
10-04-2026
Simplest CSS only auto/manual 3D slideshow using sibling-index() and tan()
19-03-2026
Simplest CSS only auto/manual slideshow using sibling-index() and tan()
10-03-2026
Simplest CSS only auto/manual slideshow
17-02-2026
Simple CSS only auto/manual slideshow with play and pause
31-01-2026
Simple CSS only auto/manual slideshow using :if()
20-01-2026
CSS stopwatch using one @keyframes and simple CSS maths
06-01-2026
CSS auto/manual, play/pause fit screen slideshow
27-12-2025
CSS auto/manual, play/pause full screen slideshow
13-12-2025
CSS auto/manual, full browser window, split screen slideshow
08-12-2025
Latest CSS styles sibling-index() and sibling-count() to produce a simple, infinite, image slideshow;
07-12-2025
Latest CSS style to transition summary/detail from height:0px to height:calc-size(auto, size);
29-11-2025
More fun with CSS corner-shape and clip-path:shape().
10-11-2025
More fun with CSS corner-shape:superellipse().
05-11-2025
Having fun with CSS corner-shape:superellipse().
18-10-2025
CSS shape-outside with image transparency.
26-09-2025
CSS only responsive auto/manual slideshow using the latest :if() styles.
16-09-2025
CSS only responsive masonry layout for images with different aspect ratios
06-09-2025
CSS only responsive masonry layout for images and text
02-09-2025
Grid slideshow with thumbnail images using carousel pseudo elements
27-08-2025
Simplest slideshow with thumbnail images using carousel pseudo elements
27-08-2025
Multiple slideshow per page with multiple visible images, using pseudo elements
24-08-2025
Multiple slideshow per page using pseudo elements
16-10-2024
Responsive automatic & manual carousel/slideshow.
14-09-2024
Responsive manual carousel/slideshow.
13-09-2024
Responsive auto running carousel/slideshow with play and pause controls.
11-09-2024
Responsive auto running carousel/slideshow.
12-04-2026
CSS oh so simple slideshow using cqw, cqh, @keyframes and transition styles
10-04-2026
Simplest CSS only auto/manual 3D slideshow using sibling-index() and tan()
19-03-2026
Simplest CSS only auto/manual slideshow using sibling-index() and tan()
10-03-2026
Simplest CSS only auto/manual slideshow
17-02-2026
Simple CSS only auto/manual slideshow with play and pause
31-01-2026
Simple CSS only auto/manual slideshow using :if()
06-01-2026
CSS auto/manual, play/pause fit screen slideshow
27-12-2025
CSS auto/manual, play/pause full screen slideshow
26-09-2025
CSS only responsive auto/manual slideshow using the latest :if() styles.
29-07-2025
A CSS only auto/manual slideshow using @container (style).
19-07-2025
A CSS only auto/manual responsive full screen slideshow.
06-06-2025
A CSS only auto/manual responsive slideshow with multiple options.
19-03-2025
A CSS only auto/manual responsive slideshow with three sections.
17-03-2025
A CSS only auto/manual responsive slideshow with pause control.
13-03-2025
An auto/manual responsive slideshow full screen with vertical slides.
04-03-2025
An auto/manual slideshow with rotating hexagon and svg circle transitioning.
25-02-2025
An auto/manual slideshow full screen with multiple animations.
22-02-2025
An auto/manual slideshow with vertical scrolling thumbnail images.
21-02-2025
Using @container queries and :focus for an auto/manual slideshow.
18-02-2025
Using @container and inline-size queries for a wrap around slideshow with multi split images.
17-02-2025
Using @container and inline-size queries for a wrap around slideshow with horizontal split images.
15-02-2025
Using @container with inline-size queries to produce a wrap around slideshow with multiple images on screen.
12-02-2025
Using @container to style a full screen width auto slideshow with manual selection.
06-02-2025
Using @container to style an automatic slideshow with manual selection - butterfly.
03-02-2025
Using @container to style an automatic slideshow with manual selection version 3.
01-02-2025
Using @container to style an automatic slideshow with manual selection version 2.
27-01-2025
Using @container to style an automatic slideshow with manual selection.
02-09-2025
Grid slideshow with thumbnail images using carousel pseudo elements
27-08-2025
Simplest slideshow with thumbnail images using carousel pseudo elements
27-08-2025
Multiple slideshow per page with multiple visible images, using pseudo elements
24-08-2025
Multiple slideshow per page using pseudo elements
19-11-2024
Responsive CSS only manual split image slideshow.
23-10-2024
Responsive auto manual slideshow carousel to rival javascript.
05-09-2024
Responsive slideshow using fixed with images with several images visible.
02-09-2024
Responsive simple auto run slideshow
13-02-2024
Finally, a CSS auto/manual slider as good as JS
11-02-2024
A new, simpler method, CSS auto manual slider (no JS)
07-02-2024
A slideshow with a vertical action on the main images and thumbnails.
01-02-2024
A slideshow using @keyframes animation of variables
28-01-2024
A simple slideshow without using img or background images
29-12-2023
Using just CSS to produce an auto/manual slideshow with play/pause.
05-12-2023
Using just CSS to produce a slideshow with popover api.
08-08-2023
A simple css and jQuery slideshow with controls select options
03-07-2023
An even simpler manual slideshow with 'jump' to next selected slide - version 2.
29-06-2023
A simple manual slideshow with 'jump' to next selected slide.
21-06-2023
A simple auto slideshow for any size images and any number. Using @property in @keyframes and CSS variables.
25-02-2023
A CSS only slideshow with auto/manual and play/pause options. CSS ONLY.
02-09-2022
A CSS only auto/manual looping slideshow with play/pause, using animation:unset
14-06-2022
An auto wrapping slideshow with play/pause and manual selection using CSS variables.
31-05-2022
The simplest auto-wrapping slideshow, with pause, to date.
22-04-2022
The 'Holy Grail' of CSS only slideshows version 2.
15-04-2022
The 'Holy Grail' of CSS only slideshows.
10-04-2022
@keyframes autowrap slideshow with pause updated.
07-04-2022
@keyframes autowrap slideshow with pause and information panel.
05-04-2022
@keyframes autowrap slideshow with pause v2.
04-04-2022
@keyframes autowrap slideshow with pause.
09-02-2022
A responsive full width looping gallery
08-02-2022
A responsive slideshow using looping thumbnail images
15-01-2022
CSS only slideshow with left/right arrows, wrap around and button slide selection, landscape and portrait images, fully sliding.
12-01-2022
A CSS only method of slideshow with left/right arrows ,wrap around and button slide selection.
02-12-2021
A simpler CSS ONLY manual left/right looping slideshow for landscape and portrait images
25-11-2021
A CSS ONLY manual left/right looping slideshow
29-10-2021
A horizontal/vertical sroll-snap and sticky multiple gallery.
25-10-2021
A CSS only horizontal and vertical slideshow using scroll snap.
02-10-2021
A CSS only flex box auto slideshow with play/pause for any number of images with minimal changes to the CSS.
19-09-2021
A CSS only click/tap flex box slideshow for any number of images with minimal changes to the CSS.
18-09-2021
A CSS only click/tap flex box slideshow for any number of images with no changes to the CSS.
01-09-2021
A responsive slideshow using detail/summary with 'fixed' CSS.
12-08-2021
A responsive basic slideshow with 'fixed' CSS.
25-07-2021
A responsive simple slideshow using CSS variables
08-04-2021
An 'in page' responsive autorun ZOOM stacked slideshow
17-02-2021
A second full screen responsive autorun horizontal stacked slideshow
12-02-2021
A full screen responsive autorun horizontal stacked slideshow
18-05-2019
A responsive scroll snap slideshow with horizontal scrolling
26-04-2017
A responsive autorun slideshow using HTML5 <picture>.
25-11-2016
A responsive slideshow with play, pause, captions and image selection.
20-11-2016
A responsive auto run slideshow with image selection and hover to pause.
26-02-2016
A responsive full page slideshow with thumbnail images for touch screen, trackpad and mouse.
24-02-2016
A responsive slideshow with thumbnail images that can be swiped with momentum, for touch screen, trackpad and mouse.
23-02-2016
A responsive slideshow with thumbnail images that can be swiped with momentum, for touch screen and trackpad.
23-03-2024
An updated/simplified version of Connect 4
09-03-2024
An updated/simplified version of Right Move
04-03-2024
An updated/simplified version of tic-tac-toe
20-02-2024
An updated/simplified 3 x 3 slide puzzle with choice of images, using just CSS.
22-01-2022
An update to a CSS puzzle produced back on the 12th January 2012
16-03-2022
A CSS only Tower of Hanoi (v2).
11-03-2022
A CSS only Connect 4 game player v player.
04-03-2022
Player vs Computer using just CSS
02-07-2026
A simple method to produce an animated, responsive, pie chart for any number or sectors.
15-06-2026
An easy method of having a Grid Lanes layout while we wait for browser support
13-06-2026
A methods of folding the top right corner of a text panel
22-05-2026
Two methods of folding the corners of images
20-01-2026
CSS stopwatch using one @keyframes and simple CSS maths
08-12-2025
Latest CSS styles sibling-index() and sibling-count() to produce a simple, infinite, image slideshow;
07-12-2025
Latest CSS style to transition summary/detail from height:0px to height:calc-size(auto, size);
29-11-2025
More fun with CSS corner-shape and clip-path:shape().
10-11-2025
More fun with CSS corner-shape:superellipse().
05-11-2025
Having fun with CSS corner-shape:superellipse().
18-10-2025
CSS shape-outside with image transparency.
16-09-2025
CSS only responsive masonry layout for images with different aspect ratios
06-09-2025
CSS only responsive masonry layout for images and text
08-08-2025
A CSS stopwatch using @container with @keyframe animation.
05-03-2025
How to animate the drawing of a circle and/or border.
22-01-2025
Using position-try and @container to anchor a tooltip with pointer
13-01-2025
Using position-anchor to anchor a tooltip
05-01-2025
Using ::view-transition to give animation between pages
30-12-2024
Using ::view-transition to give animations from one page to the next
20-12-2024
Latest CSS style to transition summary/detail from height:0px to height:auto;
19-12-2024
Latest CSS style to transition from height:0px to height:auto;
17-12-2024
Five ways to center text both horizontal and vertical
20-10-2024
Responsive CSS 'masonry' emulation in horizontal equal height rows.
19-10-2024
Responsive CSS 'masonry' emulation version 2 for all browsers.
18-10-2024
Responsive CSS 'masonry' emulation for all browsers.
16-10-2024
Responsive 'masonry' gallery with popover large images and scroll animation.
02-08-2024
Variable fonts font-variation-settings: and animation
21-07-2024
Details/summary to show more less slidedown.
09-07-2024
CSS Popover API usage to show full screen images
30-06-2024
Vertical scroll snap with horizontal scroll snap and popover gallery
16-06-2024
Vertical scrollbar with horizontal scrolling and gallery
14-06-2024
Animation timeline reverse scrolling popover gallery
10-06-2024
Just CSS to emulate iframe object-fit:cover and object-fit:contain
27-04-2024
A demonstration of svg textPath and pattern image
05-04-2024
A CSS stopwatch using @keyframes counter animation
27-03-2024
Just for fun, a triangle spinner animation
18-12-2023
Using just CSS to target siblings, parents and children.
12-12-2023
Using just CSS to target previous siblings.
23-11-2023
Using just CSS to produce a masonry grid layout - for Firefox at the moment.
19-11-2023
Using just CSS to produce a masonry grid layout - coming soon to all browsers.
04-11-2023
Using just CSS to animate images on scrolling the page with slideshow.
24-10-2023
Using just CSS to animate elements on scrolling the page.
24-06-2023
A simple 1 hour stopwatch using no numbers in the html code and just one CSS @keyframes animation.
25-04-2023
A method of viewing single frames of a 'video'.
20-12-2022
A CSS only slide up/down multiple information panels using just grid styling.
12-12-2022
A CSS only slide up/down and cover/uncover using just grid styling.
05-12-2022
A CSS only slide down and slide up extra text without using height:auto;
15-11-2022
A CSS only horizontal and vertical scrolling table with snap and sticky header/left column
30-08-2022
A CSS only method to replay/restart animations
08-03-2022
Wrapping text around a circle and animating.
06-03-2022
An update to the original 2010 version
03-03-2022
A responsive slide down/up information panels to auto height
05-02-2022
A multiline centered typewriter using just CSS for all browsers
04-02-2022
A multiline centered typewriter using just CSS - not iOS
28-01-2022
Stretchy text animation
22-01-2022
CSS marquee with left/right slide, any speed and stoppable text with links.
07-01-2022
A second CSS only method of rerunning keyframe animations.
05-01-2022
A CSS only method of rerunning keyframe animations.
02-01-2022
A CSS only stop watch with start/stop AND reset.
09-12-2021
Another frame animation demonstration.
07-12-2021
An update to my original 'superanimaton' demonstration of 15 years ago.
06-12-2021
An update to my original 'olympic links' demonstration over 15 years ago.
18-11-2021
A new style to set the height of an element based on the width or the width based on the height.
10-11-2021
The New 7 Wonders vertically scrolling. Scroll-snap with sticky with bug fixed in Firefox and iOS Safari.
05-11-2021
A scroll-snap with sticky vertical scrolling demo.
27-10-2021
Fixing the Firefox bug when using scroll-snap with position:sticky.
13-10-2021
A CSS only method of emulation a transition to height:auto and applied to details/summary html.
13-02-2021
A wait spinner with transparency using CSS variables.
04-03-2016
A responsive 3D 'slinky' animation for all the latest PC browsers. Buggy on iPhone and iPad.
06-02-2015
CSS ONLY responsive form with field entry checks and validation
11-07-2024
Adding Vimeo autopause and off screen pause/continue.
03-07-2024
Adding a sound control to autoplay Vimeo & mp4 videos
21-09-2023
A method of making Vimeo videos full screen using just CSS. See the source code.
14-09-2021
A CSS method of replacing Vimeo controls with Play/Pause.
12-09-2021
A CSS method of hiding Vimeo controls on Basic Plan.
14/02/2021
A full screen mp4 video with autoplay, muted, no controls and loop.
26-08-2024
Responsive 'Swiper' with fixed size slides and variable slide numbers
27-07-2023
A hybrid version of Swiper to avoid pagination slide through all slides between choices
15-07-2023
Moving 'SWIPER' controls
10-07-2024
An update to a demo originally produced in 2005
30-01-2022
Piet Mondrian Art using just one empty <div>
23-11-2021
An update of the previous dartboard using an empty unordered list.
22-11-2021
An update of the 2012 dartboard using the latest CSS styles.
03-07-2024
A @keyframes animation of a folding icosahedron
03-07-2024
A Spectrum, ULTIMATE PLAY THE GAME, animation
08-02-2016
A responsive swipe action panel changer for all modern browsers and operating systems
02-11-2015
CSS ONLY Responsive '@keyframes' Slideshow with wrap around
26-08-2015
Applying @keyframe animation to CSS shapes to produce an autorun slideshow.
01-02-2015
A CSS ONLY method for converting aspect ratios of Vimeo videos and removing controls.
14-10-2014
A basic responsive auto play slideshow.
13-03-2014
3D Eyeball animation.
13-03-2014
3D Astro Boy cube animation.
11-03-2014
3D 360 degree modelling using 'transform-style: preserve-3d;'.
28-11-2013
A 3D flip card photo gallery for all modern browsers.
14-01-2013
Mapping the Earth's surface onto an icosahedron.
05-12-2012
Using the page flip process to produce a book.
26-10-2012
CSS3 animated sprites using no images based on the game of 'Random Heroes.
30-07-2012
A CSS rotary slideshow with permanent image changes
14-03-2012
A complex 3D animated truncated icosahedron
07-03-2012
A spinning 3D box with rotating faces
01-03-2011
Using CSS3 with perspective to produce a 3D three image billboard.
03-02-2010
CSS3 styling to continuously animate and apply a curved overlay.
01-06-2010
An early version of 'popover' images.
Pre 2006
Original CSS opacity and the more recent mix-blend-mode
The above is an index of all my latest css demonstrations which range from the very simple to the more bizarre and advanced.
These demonstrations all work in the latest versions of the most popular browsers but cannot be guaranteed to work in older browser version or some of the lesser known browsers.
For these demonstrations to work in ie please make sure that you are using a standards compliant doctype as the first line of your code. A list of the recommended DTDs can be found at the following link:
Recommended DTDs to use in your Web document.
Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.