CSS PLAY
Doing It With Style
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;
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.
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
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.