CSS play

Doing it with Style

Search CSS PLAY

CSS DEMONSTRATIONS

Latest Demonstrations

CSS right-move updated
09-03-2024
An updated/simplified version of Right Move
CSS tic-tac-toe updated
04-03-2024
An updated/simplified version of tic-tac-toe
CSS only 3 x 3 slide puzzle updated
20-02-2024
An updated/simplified 3 x 3 slide puzzle with choice of images, using just CSS.
CSS auto/manual slider
13-02-2024
Finally, a CSS auto/manual slider as good as JS)
CSS auto/manual slider
11-02-2024
A new, simpler method, CSS auto manual slider (no JS)
CSS vertical auto/manual slideshow
07-02-2024
A slideshow with a vertical action on the main images and thumbnails.
CSS keyframe animation using variables
01-02-2024
A slideshow using @keyframes animation of variables
CSS 'content:' for any element
28-01-2024
A simple slideshow without using img or background images
CSS only 3 x 3 slide puzzle
27-01-2024
A standard 3 x 3 slide puzzle with choice of images, using just CSS.
CSS only responsive no left turn maze puzzle
25-01-2024
Find the treasure in this CSS only maze puzzle.
CSS only responsive auto/manual slideshow
29-12-2023
Using just CSS to produce an auto/manual slideshow with play/pause.
CSS only previous/next siblings, parents, children selector
18-12-2023
Using just CSS to target siblings, parents and children.
CSS only previous siblings selector
12-12-2023
Using just CSS to target previous siblings.
CSS only popover slideshow
05-12-2023
Using just CSS to produce a slideshow with popover api.
CSS only masonry
23-11-2023
Using just CSS to produce a masonry grid layout - for Firefox at the moment.
CSS only masonry - coming soon
19-11-2023
Using just CSS to produce a masonry grid layout - coming soon to all browsers.
CSS image columns animation on page scroll
04-11-2023
Using just CSS to animate images on scrolling the page with slideshow.
CSS animation on page scroll
24-10-2023
Using just CSS to animate elements on scrolling the page.
CSS Play making Vimeo videos full screen
21-09-2023
A method of making Vimeo videos full screen using just CSS. See the source code.
CSS Play simple css jquery slideshow
08-08-2023
A simple css and jQuery slideshow with controls select options
CSS Play Hybrid swiper
27-07-2023
A hybrid version of Swiper to avoid pagination slide through all slides between choices
CSS Play remote controls swiper
15-07-2023
Moving 'SWIPER' controls
CSS responsive manual slideshow v2
03-07-2023
An even simpler manual slideshow with 'jump' to next selected slide - version 2.
CSS responsive manual slideshow
29-06-2023
A simple manual slideshow with 'jump' to next selected slide.
CSS stopwatch using @property
24-06-2023
A simple 1 hour stopwatch using no numbers in the html code and just one CSS @keyframes animation.
CSS auto slideshow using @property
21-06-2023
A simple auto slideshow for any size images and any number. Using @property in @keyframes and CSS variables.
Swipe action to view slideshow frames
25-04-2023
A method of viewing single frames of a 'video'.
Auto/manual, play/pause slideshow
25-02-2023
A CSS only slideshow with auto/manual and play/pause options. CSS ONLY.
CSS slide up/down information panels
20-12-2022
A CSS only slide up/down multiple information panels using just grid styling.
CSS slide up/down FIXED
12-12-2022
A CSS only slide up/down and cover/uncover using just grid styling.
CSS show/hide extra text
05-12-2022
A CSS only slide down and slide up extra text without using height:auto;
CSS sticky, snap, scrolling table
15-11-2022
A CSS only horizontal and vertical scrolling table with snap and sticky header/left column
CSS auto/manual looping slideshow
02-09-2022
A CSS only auto/manual looping slideshow with play/pause, using animation:unset
CSS animations replay/restart
30-08-2022
A CSS only method to replay/restart animations
CSS Variable Wrap Slideshow
14-06-2022
An auto wrapping slideshow with play/pause and manual selection using CSS variables.
CSS Responsive Simple Wrap Slideshow
31-05-2022
The simplest auto-wrapping slideshow, with pause, to date.
CSS AUTO MANUAL Slideshow v2
22-04-2022
The 'Holy Grail' of CSS only slideshows version 2.
CSS AUTO MANUAL Slideshow
15-04-2022
The 'Holy Grail' of CSS only slideshows.
CSS SLIDE-STEP Slideshow v2
10-04-2022
@keyframes autowrap slideshow with pause updated.
CSS SLIDE-STEP (STAFF) Slideshow
07-04-2022
@keyframes autowrap slideshow with pause and information panel.
CSS SLIDE-STEP Slideshow
05-04-2022
@keyframes autowrap slideshow with pause v2.
CSS Responsive Slideshow
04-04-2022
@keyframes autowrap slideshow with pause.
CSS Tower of Hanoi
16-03-2022
A CSS only Tower of Hanoi (v2).
CSS Connect 4
11-03-2022
A CSS only Connect 4 game player v player.
CSS Going Round In Circles
08-03-2022
Wrapping text around a circle and animating.
CSS Infinite Zoom
06-03-2022
An update to the original 2010 version
CSS Tic Tac Toe
04-03-2022
Player vs Computer using just CSS
CSS Responsive slide down/up
03-03-2022
A responsive slide down/up information panels to auto height
CSS Responsive Looping Gallery
09-02-2022
A responsive full width looping gallery
CSS Responsive Thumbnail Slideshow
08-02-2022
A responsive slideshow using looping thumbnail images
CSS Responsive Typewriter - v2
05-02-2022
A multiline centered typewriter using just CSS for all browsers
CSS Responsive Typewriter
04-02-2022
A multiline centered typewriter using just CSS - not iOS
CSS Piet Mondrian Art
30-01-2022
Piet Mondrian Art using just one empty <div>
CSS Stretchy Text
28-01-2022
Stretchy text animation
CSS 'Right Move' puzzle
22-01-2022
An update to a CSS puzzle produced back on the 12th January 2012
CSS Marquee
22-01-2022
CSS marquee with left/right slide, any speed and stoppable text with links.
CSS slideshow with wrap any size images
15-01-2022
CSS only slideshow with left/right arrows, wrap around and button slide selection, landscape and portrait images, fully sliding.
CSS slideshow with wrap
12-01-2022
A CSS only method of slideshow with left/right arrows ,wrap around and button slide selection.
CSS rerun @keframes v2
07-01-2022
A second CSS only method of rerunning keyframe animations.
CSS rerun @keframes
05-01-2022
A CSS only method of rerunning keyframe animations.
CSS Stop Watch
02-01-2022
A CSS only stop watch with start/stop AND reset.
CSS frame animation v2
09-12-2021
Another frame animation demonstration.
CSS frame animation
07-12-2021
An update to my original 'superanimaton' demonstration of 15 years ago.
Responsive Olympic Rings
06-12-2021
An update to my original 'olympic links' demonstration over 15 years ago.
Responsive manual wrapping slideshow
02-12-2021
A simpler CSS ONLY manual left/right looping slideshow for landscape and portrait images
Responsive flex-box manual looping slideshow
25-11-2021
A CSS ONLY manual left/right looping slideshow
A CSS Dartboard
23-11-2021
An update of the previous dartboard using an empty unordered list.
A CSS Dartboard
22-11-2021
An update of the 2012 dartboard using the latest CSS styles.
NEW aspect-ratio
18-11-2021
A new style to set the height of an element based on the width or the width based on the height.
7 wonders with bug fix
10-11-2021
The New 7 Wonders vertically scrolling. Scroll-snap with sticky with bug fixed in Firefox and iOS Safari.
7 wonders bug
10-11-2021
The New 7 Wonders vertically scrolling. Scroll-snap with sticky with bugs in Firefox and iOS Safari.
Just for fun
05-11-2021
A scroll-snap with sticky vertical scrolling demo.
3x3 grid sticky gallery
31-10-2021
A horizontal/vertical sroll-snap and sticky 3x3 gallery.
Multiple grid sticky gallery
29-10-2021
A horizontal/vertical sroll-snap and sticky multiple gallery.
Firefox bug fix
27-10-2021
Fixing the Firefox bug when using scroll-snap with position:sticky.
Horizontal and vertical slideshow
25-10-2021
A CSS only horizontal and vertical slideshow using scroll snap.
height:auto with details.summary smooth transition
13-10-2021
A CSS only method of emulation a transition to height:auto and applied to details/summary html.
Responsive flex-box auto slideshow with play/pause
02-10-2021
A CSS only flex box auto slideshow with play/pause for any number of images with minimal changes to the CSS.
Responsive flex-box slideshow using CSS variables v2
19-09-2021
A CSS only click/tap flex box slideshow for any number of images with minimal changes to the CSS.
Responsive flex-box slideshow using CSS variables
18-09-2021
A CSS only click/tap flex box slideshow for any number of images with no changes to the CSS.
Replacing Vimeo controls with Play/Pause
14-09-2021
A CSS method of replacing Vimeo controls with Play/Pause.
Hide Vimeo controls for Basic Plan
12-09-2021
A CSS method of hiding Vimeo controls on Basic Plan.
Responsive detail/summary slideshow
01-09-2021
A responsive slideshow using detail/summary with 'fixed' CSS.
Responsive basic slideshow
12-08-2021
A responsive basic slideshow with 'fixed' CSS.
Responsive simple slideshow
25-07-2021
A responsive simple slideshow using CSS variables
Responsive ZOOM stacked slideshow
08-04-2021
An 'in page' responsive autorun ZOOM stacked slideshow
Responsive horizontal stacked slideshow v2
17-02-2021
A second full screen responsive autorun horizontal stacked slideshow
A responsive full screen video
14/02/2021
A full screen mp4 video with autoplay, muted, no controls and loop.
Responsive 'wait' spinner
13-02-2021
A wait spinner with transparency using CSS variables.
Responsive horizontal stacked slideshow
12-02-2021
A full screen responsive autorun horizontal stacked slideshow
Responsive scroll snap slideshow
18-05-2019
A responsive scroll snap slideshow with horizontal scrolling
Responsive autorun slideshow
26-04-2017
A responsive autorun slideshow using HTML5 <picture>.
Mi Thumb plugin
01-03-2017
A second responsive slideshow with user parameters and customization.
Mi Gallery plugin
10-02-2017
A responsive gallery with user parameters and customization.
Swiper slideshow
30-01-2017
Responsive background images, thumbnails, captions and pause on hover Swiper.
Swiper slideshow
27-01-2017
Adding thumbnails, animated captions, dynamic arrow colors and pause on hover Swiper.
Swiper slideshow
26-01-2017
How to add thumbnails to a single slideshow on Swiper.
Swiper slideshow
25-01-2017
How to use html5 picture and update parameters on browser size using Swiper.
CSS slideshow
25-11-2016
A responsive slideshow with play, pause, captions and image selection.
CSS auto run slideshow
20-11-2016
A responsive auto run slideshow with image selection and hover to pause.
CSS 'slinky' animation
04-03-2016
A responsive 3D 'slinky' animation for all the latest PC browsers. Buggy on iPhone and iPad.
CSS only full page gallery
26-02-2016
A responsive full page slideshow with thumbnail images for touch screen, trackpad and mouse.
CSS only swipe action gallery v2
24-02-2016
A responsive slideshow with thumbnail images that can be swiped with momentum, for touch screen, trackpad and mouse.
CSS only swipe action gallery
23-02-2016
A responsive slideshow with thumbnail images that can be swiped with momentum, for touch screen and trackpad.
CSS play hzSwipe
08-02-2016
A responsive swipe action panel changer for all modern browsers and operating systems

Tutorials

CSSplay responsive autorun slideshow tutorial
12-01-2015
Tutorial for a responsive autorun slideshow suitable for all the latest browsers and OS.
CSS ONLY responsive video aspect ratio conversion
01-02-2015
A CSS ONLY method for converting aspect ratios of iframe videos using calc().
CSS ONLY responsive video aspect ratios
06-02-2015
A CSS ONLY responsive method for controlling the aspect ratios of iframe videos.
CSS ONLY responsive form
16-02-2015
A CSS ONLY responsive form with required fields and entry checking.
Responsive Vimeo video with 'Play / Pause' controls
23-02-2015
Responsive Vimeo video with default controls hidden and replaced with 'Play / Pause' button.
Tic-tac-toe Player v Computer
26-02-2015
A CSS only version of tic-tac-toe for Player v Computer

Photo galleries/slideshows

Avatar ParadeSimple image display using :hover.
What's on TVAnother method of displaying images using :hover.
A photograph galleryA photo gallery using thumbnail images.
A photograph gallery - with links
20-02-2009
A photo gallery using thumbnail images and linking to large images.
A photograph gallery - using <object>
06-06-2009
A photo gallery using the object element.
A mixed gallery - using <object>
22-06-2009
A mixed gallery using the object element.
Photo Gallery Mk.IIA photo gallery with horizontal scrolling.
A gallery using :target
25-11-2011
A gallery using :target with no browser window jump and no cycling back though the image using the 'back' button.
A film strip scrolling gallery
29-06-2009
A three stage image gallery using negative/positive thumbnails, landscape/portrait images and descriptive text.
A film strip scrolling gallery
30-06-2009
As the previous demo but in a vertical format
Vertical Slide Gallery
16-06-2009
A photo gallery with vertical scrolling.
Zoom effect gallery
28-08-2009
A photo gallery with a hover zoom effect.
Sliding photo-galleriesCompressed images that expand on :hover.
Two step photo-galleryHover for medium size image and click for full size.
Click gallery for slow connectionsClick to produce full size images.
Multi-page photo galleryMultiple pages of images using :hover and click.
Multi-page photo gallery MK.2Another version of above.
Multi-page photo gallery MK.3Another variation of the one above.
Cross browser CSS slide showA method of displaying portrait and landscape images.
CSS play - 'Slideshow'
13-01-2010
A 'click' Slideshow compatible with Safari(PC) and Chrome.
CSS play - 'Hover/Click Slideshow'
18-03-2011
A 'hover/click' Slideshow with animation.
CSS play - 'Checkbox Gallery'
14-02-2014
A CSS gallery with permanent image changes, zoom toggle, and captions.
Simple CSS photo-album
31-07-2006
A simple method of displaying images.
An art gallery
02-08-2006
A catalogued art gallery.
Another slide show
27-08-2006
A three step slide show.
A clipped gallery
11-11-2006
A gallery using the 'clip' style.
Gallery 100
23-12-2006
A gallery of 100 images.
Simple slideshow
26-02-2007
A simple slideshow
Complex slideshow
02-03-2007
A more complex slideshow
Photo Strip Gallery
30-03-2007
Photo Strip Gallery
Photo Scroll Gallery
01-04-2007
Photo Scroll Gallery
Simplest Photo Gallery
15-04-2007
The simplest possible gallery
Not so Simple Photo Gallery
08-03-2008
Not so simple gallery
Sliding list gallery
18-12-2007
A sliding list photo gallery
Sliding list click gallery
11-02-2008
A sliding list click photo gallery
Click gallery with permanent images
27-09-2009
A method of having a click gallery where the images stay on screen.
Click gallery with permanent images v2
25-11-2009
A method of having a gallery with descriptive text using previous/next navigation.
Click gallery with permanent images v3
26-11-2009
A method of having a gallery with descriptive text using previous/next image previews.
Click gallery with permanent images v4
28-11-2009
A method of having a gallery with descriptive text and a left/right sliding set of thumbnail images.
Click gallery with permanent images v5
30-11-2009
A method of having a gallery with descriptive text and a up/down sliding set of thumbnail images.
Click gallery with permanent images v6 - NO JUMP
16-11-2011
A permanent image gallery without the jump to top of window.
Click gallery with permanent images v7
21-06-2012
A permanent image gallery without using :target, iframes, objects and javascript.
Click gallery with permanent images v8
22-06-2012
Another permanent image gallery without using :target, iframes, objects and javascript.
Click gallery with zoom and flyout
16-10-2012
A permanent image gallery with a zoom and flyout action
A gallery with permanent images
27-06-2012
A permanent image gallery using just :hover
A gallery with permanent images v2
28-06-2012
A permanent image gallery using just :hover - version 2
A CSS gallery by numbers
10-11-2009
A CSS gallery using a set of numbers and a hover/click state.
CSS play - Clickbox
08-01-2010
CSS play 'Clickbox', the CSS answer to 'Lightbox'
Using CSS play - Clickbox
11-01-2010
A practical example of CSS play 'Clickbox', the CSS answer to 'Lightbox'
CSS playBOX
31-05-2010
CSS playBOX - The Ultimate CSS Lightbox
CSS playBOX v2
01-06-2010
CSS playBOX v2 - The Ultimate CSS Lightbox with additional features
cssplayBox
12-04-2011
An update to the previous lightboxes with animation
oneBox
27-05-2011
Using :before/:after and content: to produce a lightbox with minimal code.
html5 oneBox
20-10-2011
The oneBox lightbox re-coded and styled to make use of html5 'tabindex' and :focus.
Cssplay - radioBox - lightbox
26-06-2012
The html5-oneBox brought up to date with CSS play's latest techniques.
Content:100
30-05-2011
Using :before/:after and content: to produce a gallery of 100 images.
Content: gallery
30-04-2012
The previous gallery updated for the iPad etc and now with captions.
CSS play Slide Show
27-07-2012
A CSS slide show with permanent image changes.
CSS play Rotary Slide Show
30-07-2012
A CSS rotary slide show with permanent image changes.
CSS play Dragonfly Slide Show
06-08-2012
A CSS Dragonfly slide show with permanent image changes.
CSS play Swipe Slide Show
15-08-2012
A CSS Swipe Left/Right slide show with permanent image changes.
CSS play The BIG Slide
20-08-2012
A CSS full screen slide show with permanent image changes.
CSS play The BIG Slide version 1.1
30-11-2013
Version 1.1 of the previous Big Slide slideshow.
CSS play STU'slide
24-08-2012
A CSS multi function slide show with permanent image changes.
CSS play Radar Gallery
31-08-2012
A CSS radar swipe action slide show with permanent image changes.
CSS play STU'slide version 2
26-09-2012
A CSS multi function slide show with permanent image changes - version 2.
CSS play thumbnail gallery with reflow
26-11-2012
A CSS thumbnail image gallery with reflow of thumbnails when viewing the large images
CSS play anysize gallery
28-11-2012
A CSS gallery for images of different sizes
CSS play anysize gallery version 2
29-11-2012
A CSS gallery for images of different sizes
CSS play thumbnail slideshow
30-11-2012
A CSS slideshow using PHP to generate thumbnails and code
CSS play stacking slideshow
30-12-2012
A CSS 3D animated stacking slideshow
CSS play rotating information panels
14-10-2013
A method to rotate a set of information panels using just CSS3
CSS play animated 3D cube gallery
19-01-2013
A CSS 3D animated cube gallery for IE10
CSS play auto play v2» 13-10-2014An update to the responsive CSS only slideshow with auto play option.
CSS basic auto play» 14-10-2014A basic responsive auto play slideshow.
CSS responsive auto play» 15-10-2014A responsive left/right auto play slideshow.
CSS responsive slideshow» 18-10-2014A responsive left/right slideshow with wrap around.
CSS play 'GO Slide' Slide Show
11-08-2012
A CSS ONLY Slide Show that shows the power of CSS.
A CSS ONLY Light Box
06-03-2009
A Light Box style gallery using CSS
A CSS CLICK Light Box
06-03-2009
A Light Box style gallery 'click' version
CSS play Auto-run Full Screen Slideshow
30-11-2013
A CSS full screen auto run slideshow with zoom effect and captions.
CSS play EasySlide» 20-06-2014EasySlide - A Responsive - easy to setup - CSS only slideshow
CSS play EasySlide Remix» 30-06-2014EasySlide - A Responsive - easy to setup - CSS only slideshow for images of different sizes
CSS play auto play» 10-10-2014A Responsive CSS only slideshow with auto play option.
Foreground image slideshow
02-06-2015
A simple responsive fullscreen foreground image 'cover' and 'contain' slideshow using just CSS
CSS play Responsive keyframe slideshow» 02-11-2015A responsive keyframe slideshow with different images for PC, tablet and mobiles.
CSS only full page gallery
26-02-2016
A responsive full page slideshow with thumbnail images for touch screen, trackpad and mouse.
CSS auto run slideshow
20-11-2016
A responsive auto run slideshow with image selection and hover to pause.
CSS slideshow
25-11-2016
A responsive slideshow with play, pause, captions and image selection.
Swiper slideshow
25-01-2017
How to use html5 picture and update parameters on browser size using Swiper.
Swiper slideshow
26-01-2017
How to add thumbnails to a single slideshow on Swiper.
Swiper slideshow
27-01-2017
Adding thumbnails, animated captions, dynamic arrow colors and pause on Swiper.
Swiper slideshow
30-01-2017
Responsive background images, thumbnails, captions and pause on hover Swiper.
Mi Gallery plugin
10-02-2017
A responsive gallery with user parameters and customization.
Mi Thumb plugin
01-03-2017
A second responsive slideshow with user parameters and customization.
Responsive autorun slideshow
26-04-2017
A responsive autorun slideshow using HTML5 <picture>.
Responsive scroll snap slideshow
18-05-2019
A responsive scroll snap slideshow with horizontal scrolling
Responsive horizontal stacked slideshow
12-02-2021
A full screen responsive autorun horizontal stacked slideshow
Responsive horizontal stacked slideshow v2
17-02-2021
A second full screen responsive autorun horizontal stacked slideshow
Responsive ZOOM stacked slideshow
08-04-2021
Aan in page responsive autorun ZOOM stacked slideshow
Responsive simple slideshow
25-07-2021
A responsive simple slideshow using CSS variables
Responsive basic slideshow
12-08-2021
A responsive basic slideshow with 'fixed' CSS.
Responsive detail/summary slideshow
01-09-2021
A responsive slideshow using detail/summary with 'fixed' CSS.
Responsive slideshow using CSS variables
16-09-2021
A CSS only click/tap slideshow for any number of images with no changes to the CSS.
Responsive flex-box slideshow using CSS variables
18-09-2021
A CSS only click/tap flex box slideshow for any number of images with no changes to the CSS.
Responsive flex-box slideshow using CSS variables v2
19-09-2021
A CSS only click/tap flex box slideshow for any number of images with minimal changes to the CSS.
Responsive flex-box auto slideshow with play/pause
02-10-2021
A CSS only flex box auto slideshow with play/pause for any number of images with minimal changes to the CSS.
Horizontal and vertical slideshow
25-10-2021
A CSS only horizontal and vertical slideshow using scroll snap.
Firefox bug fix
27-10-2021
Fixing the Firefox bug when using scroll-snap with position:sticky.
Multiple grid sticky gallery
29-10-2021
A horizontal/vertical sroll-snap and sticky multiple gallery.
3x3 grid sticky gallery
31-10-2021
A horizontal/vertical sroll-snap and sticky 3x3 gallery.
7 wonders with bug fix
10-11-2021
The New 7 Wonders vertically scrolling. Scroll-snap with sticky with bug fixed in Firefox and iOS Safari.
7 wonders bug
10-11-2021
The New 7 Wonders vertically scrolling. Scroll-snap with sticky with bugs in Firefox and iOS Safari.
NEW aspect-ratio
18-11-2021
A new style to set the height of an element based on the width or the width based on the height.
Responsive flex-box manual looping slideshow
25-11-2021
A CSS ONLY manual left/right looping slideshow
Responsive manual wrapping slideshow
02-12-2021
A simpler CSS ONLY manual left/right looping slideshow for landscape and portrait images
CSS slideshow with wrap
12-01-2022
A CSS only method of slideshow with left/right arrows, wrap around and button slide selection.
CSS slideshow with wrap any size
15-01-2022
CSS only slideshow with left/right arrows, wrap around and button slide selection, landscape and portrait images, fully sliding.
CSS Responsive Thumbnail Slideshow
08-02-2022
A responsive slideshow using looping thumbnail images
CSS Responsive Slideshow
04-04-2022
@keyframes autowrap slideshow with pause.
CSS SLIDE-STEP Slideshow
05-04-2022
@keyframes autowrap slideshow with pause v2.
CSS AUTO MANUAL Slideshow
15-04-2022
The 'Holy Grail' of CSS only slideshows.
CSS AUTO MANUAL Slideshow v2
22-04-2022
The 'Holy Grail' of CSS only slideshows version 2.
CSS Responsive Simple Wrap Slideshow
31-05-2022
The simplest auto-wrapping slideshow, with pause, to date.
CSS Variable Wrap Slideshow
14-06-2022
An auto wrapping slideshow with play/pause and manual selection using CSS variables.
CSS auto/manual looping slideshow
02-09-2022
A CSS only auto/manual looping slideshow with play/pause, using animation:unset
Auto/manual, play/pause slideshow
25-02-2023
A CSS only slideshow with auto/manual and play/pause options. CSS ONLY.
CSS auto slideshow using @property
21-06-2023
A simple auto slideshow for any size images and any number. Using @property in @keyframes and CSS variables.
CSS responsive manual slideshow
29-06-2023
A simple manual slideshow with 'jump' to next selected slide.
CSS remote controls swiper
15-07-2023
Moving 'SWIPER' controls
CSS Play Hybrid swiper
27-07-2023
A hybrid version of Swiper to avoid pagination slide through all slides between choices
CSS Play simple css jquery slideshow
08-00-2023
A simple css and jQuery slideshow with controls select options

CSS3 demonstrations

CSS3 Photo Slide
27-01-2010
CSS3 styling to produce a left/right slide show
CSS3 Zoom Gallery
27-01-2010
CSS3 styling to produce a zoom/fade photo gallery
CSS3 Buttons
27-01-2010
CSS3 styling to buttons with no graphics and no extra markup.
CSS3 Photo Info
27-01-2010
CSS3 styling to have an information panel slide up over an image.
CSS3 Photo Info v2
28-02-2014
Bringing the previous demo up to date using the latest techniques.
CSS Image Information Panels
25-03-2011
CSS3 styling to produce Image Information Panels with slide animation.
CSS3 Animation
01-02-2010
CSS3 styling to animate a series of image frames.
CSS3 Can Roll
02-02-2010
CSS3 styling to animate and apply a curved overlay.
CSS3 Duff Roll
03-02-2010
CSS3 styling to continuously animate and apply a curved overlay.
CSS3 Parallax scrolling
03-02-2010
CSS3 styling to continuously animate a parallax scrolling demo.
CSS3 3D Spheres
06-02-2010
CSS3 styling to produce 3D Spheres without using any graphics.
CSS Borders, Shadows and Gradients
07-03-2014
Using simple code with borders, shadows and radial gradients to produce graphics.
CSS3 Zoom
09-02-2010
Using Safari webkit keyframes to produce and infinite zoom-in effect.
CSS3 Auto-run Slideshow
10-02-2010
Using Safari webkit keyframes to produce and an auto-run slideshow with slide action and pause control - NO javascript.
CSS3 Auto-run Slideshows
14-09-2011
Using transitions and keyframes with step() to produce three types of auto-run slideshows
CSS3 Digital Timer
11-02-2010
Using Safari webkit keyframes to produce and an auto-run digital timer.
CSS3 Analogue Clock
11-02-2010
Using Safari webkit keyframes to produce and an auto-run analogue clock.
CSS3 Marquee
16-02-2010
Using Safari webkit keyframes to produce and an auto-run interactive marquee.
CSS3 Marquee #2
14-05-2012
Using keyframes to produce and an auto-run interactive marquee with start delay.
CSS3 Animated cubes
19-02-2010
Using Safari webkit keyframes to produce a set of never ending sliding cubes.
CSS3 Click Gallery
21-02-2010
Using CSS3 general sibling selector to produce a left/right click gallery.
CSS3 Clickbox Gallery
23-02-2010
Using CSS3 adjacent sibling selector to produce a Clickbox Gallery.
CSS3 Click Slideshow
31-03-2010
Using CSS3 adjacent sibling selector to produce a Click Slideshow.
CSS3 Sliced Rollover
25-04-2010
Using CSS3 to produce a sliced image rollover with delay.
CSS3 Image Enlarger
26-04-2010
Using CSS3 to produce a smooth image enlarger.
CSS3 Enhanced Photo Gallery
08-08-2010
Using CSS3 to enhance a simple Photograph Gallery.
CSS3 Enhanced Picture Gallery
14-08-2010
Using CSS3 to enhance a simple Picture Gallery.
CSS3 Animated Slideshow
22-11-2010
Using CSS3 to enhance a slideshow.
CSS3 Click Slide Gallery
17-01-2011
Using CSS3 to produce a slide up/down gallery.
CSS3 Rotate Enlarge Gallery
21-01-2011
Using CSS3 to produce a sliding rotating enlarging slideshow.
CSS3 Hover-to-run Slideshow
24-01-2011
Using CSS3 to produce hover-to-run slideshow.
CSS3 3D Rotating Card
22-02-2011
Using CSS3 to produce a 3D rotation Card (Safari ONLY).
CSS3 Carousel Slideshow
25-02-2011
Using CSS3 to produce Carousel Slideshow.
CSS3 Carousel Slideshow 'Click version'
11-03-2011
Using CSS3 to produce Carousel Slideshow now with a click action.
CSS3 3D Billboard
01-03-2011
Using CSS3 with perspective to produce a 3D three image billboard.
CSS3 3D Carousel of Slides
01-03-2011
Using CSS3 with perspective to produce a 3D Carousel of Slides.
CSS3 3D Book
02-03-2011
Using CSS3 with perspective to produce a 3D Book.
CSS3 Stacked Slideshow
20-03-2011
Using CSS3 to produce an animated stacked slideshow.
CSS3 Stacked Slideshow version 2
25-04-2012
Using CSS3 to produce an animated stacked slideshow, version 2.
CSS3 Stacked Slideshow version3
27-06-2012
A Stacked Slideshow with accessibility.
CSS3 Sliding Panels
18-04-2011
Using CSS3 to produce a sliding set of information panels.
CSS3 Page Flip
15-05-2011
Using CSS3 to produce page flip animation.
CSS3 Page Flip v2
17-05-2011
Another page flip animation with a twist.
CSS3 Page Flip Gallery
17-05-2011
Using the page flip process to produce a stacked gallery of images.
CSS3 Page Flip Book
19-05-2011
Using the page flip process to produce a book.
CSS3 Page Flip Book v2
05-12-2012
Using the page flip process to produce a book - version 2.
CSS3 Resize
20-05-2011
Demonstration using the CSS3 'resize' styling.
CSS3 Keyframe Gallery
18-06-2011
CSS3 Keyframe Gallery for Firefox 5, Safari and Chrome.
CSS3 Keyframe 'Lightbox' Gallery
24-06-2011
CSS3 Keyframe 'Lightbox' Gallery for Firefox 5, Safari and Chrome.
CSS3 Meowww!
26-06-2011
Using only CSS/CSS3 to draw and animate a cat meowing, for Firefox 5, Safari and Chrome.
CSS3 Reflections
01-07-2011
Using CSS/SVG to produce 'reflections' for Firefox 5 as well as a CSS version for Safari and Chrome.
CSS3 Reflections v2
08-02-2013
Using just CSS to produce image reflections on a solid background color.
CSS3 Left/Right Slide Gallery
09-08-2011
Using CSS3 transitions to produce a slideshow with animation.
CSS3 Left/Right Click Gallery
04-11-2011
Using CSS3 transitions to produce a left/right slideshow with animation.
CSS3 Left/Right Click Gallery Permanent
25-06-2012
Using CSS3 transitions to produce a left/right slideshow with animation and permanent image changes.
CSS3 Left/Right Click Gallery #2
05-11-2011
Using CSS3 transitions to produce a left/right slideshow with animation #2.
CSS3 Left/Right Click Panels #3
06-11-2011
Using CSS3 transitions to produce left/right information panels with animation #3.
CSS3 Zoooom Images
08-11-2011
Using CSS3 to gradient zoom animate a set of thumbnail images.
CSSplay Image Rotation
12-11-2011
Using CSS3 to rotate a set of images.
CSSplay Circle Slideshow
14-11-2011
Using CSS3 to rotate a set of thumbnail images and show a large image with just the click of a button.
CSSplay Grid Accordion
16-11-2011
Using CSS3 to produce a grid of thumbnails which expand on hover.
CSSplay Grid Accordion v2
17-11-2011
Using CSS3 to produce a grid of thumbnails which expand on click and stay permanent.
CSSplay Flexbox Gallery
04-03-2014
An accordion gallery using the latest 'flexbox' styling.
CSS3 Tabs
18-09-2011
CSS3 tabs with inner and outer radii and fade out borders.
CSSplay Mickey Mouse Gallery
20-11-2011
A CSS only Gallery with all the features of a jQuery/javascript gallery.
CSSplay Any Size Gallery
21-11-2011
A CSS only Gallery for images of any size.
CSSplay starLIGHT lightbox
23-11-2011
A CSS lightbox with PREVIOUS/NEXT, captions with links and CLOSE button.
CSSplay zoomBox Slideshow
28-11-2011
A CSS Slideshow with thumbnails sets, PREVIOUS/NEXT and captions with links.
CSSplay Grid Zoom
27-02-2012
A set of images on a grid with hover/zoom and adjacent image partial zoom.
CSSplay Rotary Gallery
07-03-2012
A photo gallery with captions and permanent image changes
CSSplay Spinning Box
07-03-2012
A spinning 3D box with rotating faces
CSSplay Sliding Boxes
08-03-2012
A set of six 3D box with sliding and spinning in a never ending pattern
CSSplay 3D truncated icosahedron
14-03-2012
A complex 3D animated truncated icosahedron
CSSplay 3D Sphere
17-03-2012
A 3D rotating Beach Ball
CSSplay 3D Runners
22-03-2012
A group of three 3D 'stick men' runners
CSSplay 3D Planets and Moon
21-05-2012
Three planets and the moon animated
CSSplay 3D Dymaxion Map
24-05-2012
Mapping the Earth's surface onto an icosahedron
CSSplay 3D Dymaxion Map Animation for IE10
14-01-2013
Mapping the Earth's surface onto an icosahedron working in IE10
CSSplay Pie Chart
30-06-2012
A CSS ONLY pie chart using no images
CSSplay Before and After Image Slider
10-10-2012
A CSS ONLY Slider to show before and after images with 'hold' feature
CSSplay Before and After Image Slider v2
11-10-2012
Version 2 of the CSS ONLY Slider to show before and after images. For IE7+
CSSplay Space Invader
22-10-2012
A CSS3 animated space invader using no images.
CSSplay Animated Sprites
25-10-2012
CSS3 animated sprites using no images.
CSSplay Random Heroes
26-10-2012
CSS3 animated sprites using no images based on the game of 'Random Heroes.
CSSplay 3D Cube Animation for IE10
11-01-2013
Just to show how difficult it is to produce and animate a cube in IE10
CSSplay 3D Animated Gallery - Challenge
23-01-2013
A rotating 3D gallery and a challenge to get it working in IE10
CSSplay 3D Spinning Boxes
25-01-2013
A set of six boxes that spin on their own axis and about a central axis for IE10
CSSplay Fly In/Out Gallery
01-02-2013
A gallery with animated fly-in and fly-out image changes, suitable for all modern browsers.
CSSplay Holiday 2013 Photo Gallery
15-03-2013
A few of the photos taken on a holiday to New Zealand, Australia and Singapore
CSSplay Holiday 2013 Slide Show
13-06-2013
Another method of displaying sets of photographs. For all modern browsers.
CSSplay Oh So Simple Slide Show
18-06-2013
A simple left/right slideshow with preview panels and captions. For all modern browsers.
CSSplay Conversion Slide Show
20-06-2013
A conversion of a jQuery/javascript slide show into a CSS only version.
CSSplay Flip Photo Gallery
28-11-2013
A 3D flip card photo gallery for all modern browsers.
CSSplay 'loading' animation
27-02-2014
A CSS only 'loading' animation with no extra markup.
CSSplay Perspective modelling
10-03-2014
3D perspective modelling without using 'transform-style: preserve-3d;'.
CSSplay 3D 360 degree modelling
11-03-2014
3D 360 degree modelling without using 'transform-style: preserve-3d;'.
CSSplay 3D 360 degree modelling v2
11-03-2014
3D 360 degree modelling using 'transform-style: preserve-3d;'.
CSSplay 3D Stormtrooper
12-03-2014
3D Stormtrooper cube animation.
CSSplay 3D Astro Boy
13-03-2014
3D Astro Boy cube animation.
CSSplay 3D Sphere
13-03-2014
3D Eyeball animation.
CSSplay 3D Swan Lake
19-03-2014
3D animation of swan with reflection and ripples.
CSSplay Filter Gallery
04-04-2014
A photograph gallery using css filters with transition effects.
CSSplay Awesome Icons
09-04-2014
CSS styling of 'Awesome Icons' using CSS.
Tracking images with CSS shape
03-08-2015
Using CSS 'shape' to have text follow the shape of images.
Emulating shape-inside
10-08-2015
Using CSS 'shape-outside' to emulate shape-inside with fixed positioning.
Animating CSS shapes
14-08-2015
Showing how CSS shapes can be animated.
CSS 'shape' slideshow
17-08-2015
Applying @keyframe animation to CSS shapes to produce an autorun slideshow.
CSS 'shape' slideshow version 2
26-08-2015
Applying @keyframe animation to CSS shapes to produce an autorun slideshow, version 2.
CSS only swipe action gallery
23-02-2016
A responsive slideshow with thumbnail images that can be swiped with momentum, for touch screen and trackpad.
CSS only swipe action gallery v2
24-02-2016
A responsive slideshow with thumbnail images that can be swiped with momentum, for touch screen, trackpad and mouse.
CSS 'slinky' animation
04-03-2016
A responsive 3D 'slinky' animation for all the latest PC browsers. Buggy on iPhone and iPad.
height:auto with details.summary smooth transition
13-10-2021
A CSS only method of emulation a transition to height:auto and applied to details/summary html.
Just for fun
05-11-2021
A scroll-snap with sticky vertical scrolling demo.
CSS Stop Watch
02-01-2022
A CSS only stop watch with start/stop AND reset.
CSS rerun @keframes
05-01-2022
A CSS only method of rerunning keyframe animations.
CSS rerun @keframes v2
07-01-2022
A second CSS only method of rerunning keyframe animations.
CSS Marquee
28-01-2022
CSS marquee with left/right slide, any speed and stoppable text with links.
CSS Piet Mondrian Art
30-01-2022
Piet Mondrian Art using just one empty <div>
CSS Responsive Typewriter
04-02-2022
A multiline centered typewriter using just CSS - not iOS
CSS Responsive Typewriter - v2
05-02-2022
A multiline centered typewriter using just CSS for all browsers
CSS Responsive Looping Gallery
09-02-2022
A responsive full width looping gallery
CSS Responsive slide down/up
03-03-2022
A responsive slide down/up information panels to auto height
CSS Infinite Zoom
06-03-2022
An update to the original 2010 version
CSS SLIDE-STEP (STAFF) Slideshow
07-04-2022
@keyframes autowrap slideshow with pause and information panel.
CSS SLIDE-STEP Slideshow v2
10-04-2022
@keyframes autowrap slideshow with pause updated.
CSS animations replay/restart
30-08-2022
A CSS only method to replay/restart animations
CSS sticky, snap, scrolling table
15-11-2022
A CSS only horizontal and vertical scrolling table with snap and sticky header/left column
CSS show/hide extra text
05-12-2022
A CSS only slide down and slide up extra text without using height:auto;
CSS slide up/down FIXED
12-12-2022
A CSS only slide up/down and cover/uncover using just grid styling.
CSS slide up/down information panels
20-12-2022
A CSS only slide up/down multiple information panels using just grid styling.

Vimeo video demonstrations

CSSplay Vimeo autopause for IE8+
09-06-2014
Adding Vimeo autopause to IE8+ and off screen pause/continue.
CSSplay Vimeo playlist with external controls
11-06-2014
Adding Vimeo video select list with external play/pause/rewind controls with fallback for iOS.
CSSplay Vimeo player - hiding the control bar
17-06-2014
Using just CSS to hide the control bar on Vimeo videos.
Hide Vimeo controls for Basic Plan
12-09-2021
A CSS method of hiding Vimeo controls on Basic Plan.
Replacing Vimeo controls with Play/Pause
14-09-2021
A CSS method of replacing Vimeo controls with Play/Pause.

HTML5 video

A responsive full screen video
14/02/2021
A full screen mp4 video with autoplay, muted, no controls and loop.
A responsive html5 video with playlist etc.
05-08-2013
Using jQuery and css3 to create responsive videos with playlists, video play state and multi occurrences.
A simple video playlist
14-09-2013
A video playlist for HTML5 videos with support for IE7+ and all modern browsers.
An HTML5 video player
23-09-2013
A responsive HTML5 video player with playlists, skins and fallback for IE6-8.

A little javascript & jQuery

A responsive full screen swipe slideshow
19-08-2013
Using jQuery and css3 to create responsive slideshow for all the latest browsers including touch screens
A second responsive full screen swipe slideshow
09-09-2013
Another responsive slideshow using jQuery and css3 for all the latest browsers including IE7+ and touch screens
A third responsive full screen swipe slideshow
16-12-2013
An update to Swipe Me Too! to add extra funnctions and simplify use.
A third responsive inline swipe slideshow
09-10-2013
A third 'inline' responsive slideshow using jQuery and css3 for all the latest browsers including IE7+ and touch screens
An update to the responsive inline swipe slideshow
02-01-2014
An update to the inline responsive slideshow using jQuery and css3 for all the latest browsers including IE7+ and touch screens
CSS PLAY responsive swipe stacked slideshow
19-05-2015
A responsive swipe action stacked slideshow suitable for all browsers and OS.
CSS PLAY responsive swipe stacked slideshow version 2
20-05-2015
A responsive swipe action stacked slideshow, with multiple instances, suitable for all browsers and OS.
CSS play hzSwipe
08-02-2016
A responsive swipe action panel changer for all modern browsers and operating systems
Swipe action to view slideshow frames
25-04-2023
A method of viewing single frames of a 'video'.

Image manipulation

Em size images comparedVarious image sizes and resolutions compared.
ThumbnailsUsing opacity to show which images have been visited.
Magnify imageHover over an image to see a larger version.
Image magnifier with bounce
22-12-2011
A simple image magnifier with the addition of a 'bounce' animation.
Image zooming with toggle
11-02-2014
Zooming an image using CSS only 'toggle'.
Running with spritesUsing :hover and :active/:focus to display a three state image.
Fun with background imageshow to manipulate background images with CSS.
A panoramic image scrollerHow to display a scrolling panoramic image.
An image magnifierEnlarging sections of an image using :hover.
An image magnifier v2
26-02-2011
Enlarging sections of an image on hover.
An image magnifier v3
29-06-2012
Enlarging sections of an image on click with persist.
Scan and Magnify an Image
15-10-2012
Scan a small image to reveal a 2.5x enlarged section.
Gradient magnifierGradually enlarge in image by scanning a gradient.
Dynamic gradient magnifierSimilar to above but using a simple :hover.
Image zoom
29-08-2009
An image magnifier with zoom feature.
Image magnifier
25-08-2009
A simple method of dynamically magnifying an image
Safari webkit demo
13-08-2008
A demo of Safari webkit transitions
Centering images
15-10-2006
Centering images of unknown size.
Centering images and information panels
17-10-2013
Vertical and horizontal centering using margin:auto;
Image Fit and Shrink Technique
11-04-2010
Shrinking images of unknown size as necessary to fit boxes of known size.
A gallery using FaST
14-04-2010
Using the FaST method to produce a sliding gallery with images of different sizes.
An image enlarger using FaST
26-07-2010
Using the FaST method to produce an image enlarger.
Image Manipulation
07-02-2011
Using CSS3 to animate sets of thumbnail images
Image Rotation
09-05-2011
Using only CSS and html to cycle through a set of images
Image Enlarging
06-09-2011
Animating an image enlarge demo with text and links.
Image Enlarging with focus
08-09-2011
Enlarging an image using just :focus.
Image information panels
09-09-2011
Show/hide information panels for images.
Image filter grayscale
31-03-2014
Two methods of changing an image from gray to color.
Foreground image 'contained'
30-05-2015
A method of containing a foreground image in a fullscreen browser window using just CSS
Foreground image 'covered'
01-06-2015
A method of covering a foreground image in a fullscreen browser window using just CSS

Image replacement

Image replacementImage replacement for images off and css off.
Active/focus - image replacementImage replacement removing the active/focus dotted borders.

Image maps

Image MapA CSS method of producing an image map.
image map for detailed informationAnother image map producing a magnified image with text.
Image map menuAdapting an image map to produce a menu
The ultimate image map - maybeAn irregular shaped image map
Return of the image mapsImage maps, another small step
The Menu menuImage map on the menu again
Image mapped mapImage mapping map locations
Image Map Revisited
05-03-2010
Applying the latest techniques to an image map
Scrolling image map
09-10-2007
Scrolling image map
Imagemap with hover effect
13-11-2013
A basic html image map with hover effect for all browsers (fallback for IE).
Imagemap with hover effect v2
16-09-2014
Another basic html image map with CSS only hover effect for all browsers (fallback for IE).
Circular hot-spots
13-01-2008
Image map with circular hot-spots
Responsive image map
07-06-2013
A responsive image map suitable for all modern browsers and touch screen devices

Text manipulation

Character codesCharacter entities and their codes.
A CSS FontA font using just CSS.
A CSS only font» 03-08-2012An updated font using just CSS
A definition list bar chartCreating horizontal bar charts from definition list information.
Cross-browser tabbed pagesUsing tabs to show and hide alternative page information, complete with links.
Cross-browser tabbed pages v2
18-02-2009
The previous demo with default page open
CSS tabbed pages with persist
30-05-2012
CSS only tabbed pages with persist and other features
CSS tabbed pages with persist no :target
23-06-2012
CSS only tabbed pages with persist without :target
A selection box
14-10-2006
An assortment of multiple choice information.
A class actShowing how classes can be combined in your markup.
Show me some more...A CSS method of showing more information.
More over the top...
18-04-2007
More information over the top.
Show me more/less latest..
21-03-2011
Using CSS3 and the latest developments to produce an updated version.
Show me more/less latest..
22-06-2012
Using CSS3 and the latest developments to produce an improved version.
FAQs - questions and answers toggle
13-02-2014
Using just CSS to toggle the answers to FAQs questions.
Wrapping text around imagesA method of wrapping text around a jagged image contour.
Tracking your imagesAnother method of wrapping text.
Centered image in text
09-10-2012
Centering an image in between two columns of text
Drop CAPITALSHow to produce a first letter drop capital.
Minimum font sizing
22-10-2006
How browsers handle minimum font sizes.
:first-letter BUGS
08-01-2007
Browsers bugs using the :first-letter pseudo-element.
No dotted link border
21-02-2007
Removing inline link dotted border.
CSS only speech bubbles
11-03-2007
A CSS only version of the speech bubble.
Background color change
11-05-2007
Changing background color on hover.
Background color change v2
20-09-2010
Changing background color on hover using HTML+TIME for IE5.5 and IE6.
Styling inline links as blocks
19-10-2008
How to make your inline links look like blocks.
Styling inline links as blocks
21-10-2008
A semantically correct version of the previous demo
Styling inline links as blocks
23-10-2008
A sliding doors version of the previous method
TTF fonts for web pages
20-10-2009
TTF fonts for your web pages in 5 browsers.
@font-face smoothing
25-09-2011
A simple method of making @font-face fonts look less jagged.
CSS3 Text Overflow - 2 methods
23-04-2010
Two methods to style text-overflow.
CSS solid text with shadow
30-08-2011
Using CSS to style solid text with shadow and no extra markup
CSS swipe color changes
05-02-2013
Using CSS to style gradual changes of color and gradient effect to text.
CSS Stretchy Text
28-01-2022
Stretchy text animation
CSS Going Round In Circles
08-03-2022
Wrapping text around a circle and animating.

Puzzles

An amazing puzzleA maze puzzle entirely produced with CSS.
Another puzzleAnother puzzle using only CSS.
A frustrating puzzleWork your way from the top to the bottom of the pyramid.
Puzzling cssFind your way to the centre of the field.
Another maze puzzle
01-10-2006
Another puzzle based on a dark maze.
Cops and Robbers maze
15-09-2007
A Cops and Robbers Maze puzzle.
3D Maze puzzle
21-09-2007
A puzzle using 3D pixel art.
Tic Tac Toe
23-08-2008
CSS version of noughts and crosses
Tower of Hanoi puzzle
18-02-2010
A CSS only version of this famous puzzle.
No Left Turn Puzzle
06-12-2011
A 'No Left Turn' Maze/Puzzle
The Right Move Puzzle
12-01-2012
A 'Right Move' Puzzle
Whack-a-Rat game
12-01-2012
A CSS only game of 'Whack-a-Rat'
Tic-Tac-Toe game
18-10-2012
A CSS3 logic game of Tic-Tac-Toe
Connect Four game
20-10-2012
A CSS3 logic game of Connect Four
Tic-Tac-Toe game v2
23-09-2014
A CSS3 Tic-Tac-Toe player v computer
CSS 'Right Move' puzzle
22-01-2022
An update to a CSS puzzle produced back on the 12th January 2012
CSS Tic Tac Toe
04-03-2022
Player vs Computer using just CSS
CSS Connect 4
11-03-2022
A CSS only Connect 4 game player v player.
CSS Tower of Hanoi
16-03-2022
A CSS only Tower of Hanoi (v2).

Animation - pre transitions

CSS animationA simple method of simulating animation.
CSS animation Mk.IIFlip book animation with CSS.
Super animationDynamic animation for Firefox and Opera.
Stop/start animated gifsStarting and stopping animated gifs.
The Streaker - revisitedDynamic animation for Firefox and Opera.
CSS frame animation
07-12-2021
An update to my original 'superanimaton' demonstration of 15 years ago.
CSS frame animation v2
09-12-2021
Another frame animation demonstration.

CSS Art

CSS miniaturesCSS picture gallery.
A lego houseUsing border art to produce a lego house.
Drawing the lineA CSS pencil draws a line on :hover.
Light house workLight up the lighthouse on :hover.
Flag border artThe Union Flag using just CSS.
Flag 2 border art
01-08-2007
The Union Flag version 2.
Flag 3 border art
05-04-2014
The Union Flag version 3.
The star spangled bannerThe American flag using just CSS.
CSS graphics buttonsMenu buttons using border art.
CSS Christmas TreeA border art Christmas greeting.
Five point star
13-06-2007
Transparent borders for IE5 and IE6
CSS Dartboard
05-07-2012
Using just CSS to produce a dartboard using no images.
CSS3 Brick Wall
30-10-2012
Using just CSS3 to produce a brick wall using no images.
A CSS Dartboard
22-11-2021
An update of the 2012 dartboard using the latest CSS styles.
A CSS Dartboard
23-11-2021
An update of the previous dartboard using an empty unordered list.
Responsive Olympic Rings
06-12-2021
An update to my original 'olympic links' demonstration over 15 years ago.

Just for fun

The SnowmanA snowman border art and a Christmas message.
LamplightTurn the light on and off using just CSS.
Hiding emailsA method of hiding email addresses from spambots.
Tunnel visionBorder art and an image to emulate a tunnel.
CSS FireworkMore border art of an exploding firework.
Yin YangYin yang using text and CSS.
Alicebackwards writing as in Alice through the looking glass.
Messing about with boatsShowing how em sizing can be used to reduce and enlarge.
CSS calculator
23-09-2006
A simple CSS ONLY calculator just for fun.
CSSplay Tennis animation
01-07-2013
A tennis animation using simple html code and css.
Ping-pong player v computer
03-07-2013
A ping-pong game with player v computer. Just for the fun of it.
Ping-pong player v computer version 2
12-07-2013
Another pong game with player v computer. Fixing some 'issues'.

Calendars

Simple calendarA method of producing a simple calendar
Simple list calendarA pop-up calendar.
Validating link calendarA pop-up calendar with links.
Link calendar v2
12-08-2006
A shrink wrapped calendar with links.

Shadows

ShadowsSimple method of adding a shadow effect.
Fluid drop shadowsShadows that fit any size.
Multi-position shadow boxingShadows that can be placed around an image.
Drop shadows revisited
12-02-2010
Drop shadows for IE5.5, IE6, IE7, IE8, Firefox, Safari and Chrome using no images.
CSS3 Photo curls
04-05-2011
Using just CSS3 to add a curl to corners of photographs.
CSS3 Drop Shadows
27-03-2014
Two methods of using CSS 'drop shadows' instead of 'box shadows'.

Active/focus borders

Removing active focus bordersHow to replace the active/focus dotted borders.
Hover/click with no active/focus bordersA demonstration of removing the active/focus dotted borders.

Scrolling

Vertical scrolling tablesHow to scroll your table data.
Fade-out scrollingAdding a top and bottom fade-out to your scrolling div.

Forms

A form with styleMethods of styling your forms.
CSS form select list alternative
18-11-2013
An alternative to form select list with full styling using just CSS
CSS form select list alternative v2
25-11-2013
A form select list converted to a drop list with full styling using just CSS
CSS form prompts
01-03-2014
A CSS only method of adding input prompts to form fields.

Lists

A three column listHow to generate a three column list.

Pop-ups

Alert boxA javascript style alert pop-up.
Recipe filing cabinetSimulating a recipe card pop-up.
Mapping the British Isles & IrelandHow to add pop-ups to a map of the British Isles and Ireland.
Information balloon pop-upsA pop-up balloon with text and links.
Pop-up images
20-07-2006
Inline links with pop-up images.
Tooltips
10-05-2007
Adding tooltips to inline links.
Tooltips updated
08-10-2012
Adding tooltips to inline links and text - update.
Tool links
21-07-2007
Adding tool links to inline text.

General

BookSimulating the opening of a book and several pages.
Tables to CSSConverting tables to CSS.
CSS FramesHow to emulate a framed layout using just CSS.
Fibonacci spiralDrawing a fibonacci spiral using just CSS.
Adding AdSenseHow to add AdSense to xhtml1.1
The zero dollar ads pageMy take on the million dollar ads site.
Conditional comments PLUS!How to customize them so they work with other browsers.

Information

The above is an index of all my 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. I am unable to test on Mac browsers so if you want to use any of my demonstration ideas on a Mac then you should check that it works on your particular platform / browser combination.

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.

Support CSS play

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.

Copyright

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.