Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMONSTRATIONS


Latest Demonstrations

Foreground image slideshow
02-06-2015

A simple responsive fullscreen foreground image 'cover' and 'contain' slideshow using just CSS
Foreground image 'covered'
01-06-2015

A method of covering a foreground image in a fullscreen browser window using just CSS
Foreground image 'contained'
30-05-2015

A method of containing a foreground image in a fullscreen browser window using just CSS
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 responsive swipe stacked slideshow
19-05-2015

A responsive swipe action stacked slideshow suitable for all browsers and OS.
CSSplay responsive autorun slideshow tutorial
12-01-2015

Tutorial for a responsive autorun slideshow suitable for all the latest browsers and OS.
CSS responsive slideshow
18-10-2014

A responsive left/right slideshow with wrap around.
CSS responsive auto play
5-10-2014

A responsive left/right auto play slideshow.
CSS basic auto play
14-10-2014

A basic responsive auto play slideshow.
CSS play auto play v2
13-10-2014

An update to the responsive CSS only slideshow with auto play option.
CSS play auto play
10-10-2014

A Responsive CSS only slideshow with auto play option.
Tic-Tac-Toe game v2
23-09-2014

A CSS3 Tic-Tac-Toe player v computer
Imagemap with hover effect v2
16-09-2014

Another basic html image map with CSS only hover effect for all browsers (fallback for IE).
Tic-tac-toe Player v Computer
26-02-2015

A CSS only version of tic-tac-toe for Player v Computer
Responsive Vimeo video with 'Play / Pause' controls
23-02-2015

Responsive Vimeo video with default controls hidden and replaced with 'Play / Pause' button.
CSS ONLY responsive form
16-02-2015

A CSS ONLY responsive form with required fields and entry checking.
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 video aspect ratio conversion
01-02-2015

A CSS ONLY method for converting aspect ratios of iframe videos.

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

Avatar Parade
Simple image display using :hover.
What's on TV
Another method of displaying images using :hover.
A photograph gallery
A 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.II
A 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-galleries
Compressed images that expand on :hover.
Two step photo-gallery
Hover for medium size image and click for full size.
Click gallery for slow connections
Click to produce full size images.
Multi-page photo gallery
Multiple pages of images using :hover and click.
Multi-page photo gallery MK.2
Another version of above.
Multi-page photo gallery MK.3
Another variation of the one above.
Cross browser CSS slide show
A 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-2014
An update to the responsive CSS only slideshow with auto play option.
CSS basic auto play» 14-10-2014
A basic responsive auto play slideshow.
CSS responsive auto play» 15-10-2014
A responsive left/right auto play slideshow.
CSS responsive slideshow» 18-10-2014
A 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-2014
EasySlide - A Responsive - easy to setup - CSS only slideshow
CSS play EasySlide Remix» 30-06-2014
EasySlide - A Responsive - easy to setup - CSS only slideshow for images of different sizes
CSS play auto play» 10-10-2014
A 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

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.

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.

HTML5 video

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 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.

Image manipulation

Em size images compared
Various image sizes and resolutions compared.
Thumbnails
Using opacity to show which images have been visited.
Magnify image
Hover 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 sprites
Using :hover and :active/:focus to display a three state image.
Fun with background images
how to manipulate background images with CSS.
A panoramic image scroller
How to display a scrolling panoramic image.
An image magnifier
Enlarging 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 magnifier
Gradually enlarge in image by scanning a gradient.
Dynamic gradient magnifier
Similar 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 replacement
Image replacement for images off and css off.
Active/focus - image replacement
Image replacement removing the active/focus dotted borders.

Image maps

Image Map
A CSS method of producing an image map.
image map for detailed information
Another image map producing a magnified image with text.
Image map menu
Adapting an image map to produce a menu
The ultimate image map - maybe
An irregular shaped image map
Return of the image maps
Image maps, another small step
The Menu menu
Image map on the menu again
Image mapped map
Image 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 codes
Character entities and their codes.
A CSS Font
A font using just CSS.
A CSS only font» 03-08-2012
An updated font using just CSS
A definition list bar chart
Creating horizontal bar charts from definition list information.
Cross-browser tabbed pages
Using 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 act
Showing 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 images
A method of wrapping text around a jagged image contour.
Tracking your images
Another method of wrapping text.
Centered image in text
09-10-2012

Centering an image in between two columns of text
Drop CAPITALS
How 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.

Puzzles

An amazing puzzle
A maze puzzle entirely produced with CSS.
Another puzzle
Another puzzle using only CSS.
A frustrating puzzle
Work your way from the top to the bottom of the pyramid.
Puzzling css
Find 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

Animation - pre transitions

CSS animation
A simple method of simulating animation.
CSS animation Mk.II
Flip book animation with CSS.
Super animation
Dynamic animation for Firefox and Opera.
Stop/start animated gifs
Starting and stopping animated gifs.
The Streaker - revisited
Dynamic animation for Firefox and Opera.

CSS Art

CSS miniatures
CSS picture gallery.
A lego house
Using border art to produce a lego house.
Drawing the line
A CSS pencil draws a line on :hover.
Light house work
Light up the lighthouse on :hover.
Flag border art
The 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 banner
The American flag using just CSS.
CSS graphics buttons
Menu buttons using border art.
CSS Christmas Tree
A 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.

Just for fun

The Snowman
A snowman border art and a Christmas message.
Lamplight
Turn the light on and off using just CSS.
Hiding emails
A method of hiding email addresses from spambots.
Tunnel vision
Border art and an image to emulate a tunnel.
CSS Firework
More border art of an exploding firework.
Yin Yang
Yin yang using text and CSS.
Alice
backwards writing as in Alice through the looking glass.
Messing about with boats
Showing 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 calendar
A method of producing a simple calendar
Simple list calendar
A pop-up calendar.
Validating link calendar
A pop-up calendar with links.
Link calendar v2
12-08-2006

A shrink wrapped calendar with links.

Shadows

Shadows
Simple method of adding a shadow effect.
Fluid drop shadows
Shadows that fit any size.
Multi-position shadow boxing
Shadows 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 borders
How to replace the active/focus dotted borders.
Hover/click with no active/focus borders
A demonstration of removing the active/focus dotted borders.

Scrolling

Vertical scrolling tables
How to scroll your table data.
Fade-out scrolling
Adding a top and bottom fade-out to your scrolling div.

Forms

A form with style
Methods 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 list
How to generate a three column list.

Pop-ups

Alert box
A javascript style alert pop-up.
Recipe filing cabinet
Simulating a recipe card pop-up.
Mapping the British Isles & Ireland
How to add pop-ups to a map of the British Isles and Ireland.
Information balloon pop-ups
A 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

Book
Simulating the opening of a book and several pages.
Tables to CSS
Converting tables to CSS.
CSS Frames
How to emulate a framed layout using just CSS.
Fibonacci spiral
Drawing a fibonacci spiral using just CSS.
Adding AdSense
How to add AdSense to xhtml1.1
The zero dollar ads page
My 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.


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.

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page