skip to content

List of Demonstrations

Demos - 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
Demos - 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.
Demos - 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 aroung an image.
Demos - 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 bordes.
Demos - Scrolling
Vertical scrolling tables
How to scroll your table data.
Fade-out scrolling
Adding a top and bottom fade-out to your scrolling div.
Demos - Forms
A form with style
Methods of styling your forms.
Demos - Lists
A three column list
How to generate a three column list.
Demos - Pop-ups
Alert box
A javascript style alert pop-up.
Recipe filing cabinet
Simulating a recipe card opo-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 inlne links.
Tool links » 21-07-2007
Adding tool links to inlne text.
Demos - 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.


Demos - 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.
Photo Gallery Mk.II
A phot gallery with horizontal scrolling.
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.
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
Demos - Galleries & javascript
Simple Photo Click Gallery » 22-10-2007
Simple Photo Click Gallery using a little javascript.
Simple Photo Scroll Gallery » 23-10-2007
Simple Photo Scroll Gallery using a little javascript.
Demos - 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.
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
Enlarginging sections of an image using :hover.
Gradient magnifier
Gradually enlarge in image by scanning a gradient.
Dynamic gradient magnifier
Similar to above but using a simple :hover.
Safari webkit demo » 13-08-2008
A demo of Safari webkit transitions
Centering images » 15-10-2006
Centering images of unknown size.
Demos - Image replacement
Image replacement
Image replacement for images off and css off.
Active/focus - image replacement
Image replacement removing the active/focus dotted borders.
Demos - 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
Scrolling image map » 09-10-2007
Scrolling image map
Circular hot-spots » 13-01-2008
Image map with circular hot-spots
Demos - Animation
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.
Demos - Border 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.
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
Demos - Text manipulation
Character codes
Character entities and their codes.
A CSS Font
A 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, conmplete with links.
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.
Some more...again » 20-10-2007
Some more...again.
Wrapping text around images
A method of wrapping text around a jagged image contour.
Tracking your images
Another method of wrapping text.
Drop CAPITALS
How to procduce 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.
Styling inlne links as blocks » 19-10-2008
How to make your inline links look like blocks.
Styling inlne links as blocks » 21-10-2008
A semantically correct version of the previous demo
Styling inlne links as blocks » 23-10-2008
A sliding doors version of the previous method
Demos - Just for fun
The Snowman
A snowman border art and a Christmas message.
Lamplight
Turn the lght 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.


Latest demonstrations

  1. 23/10/2008 Inline block links - sliding doors version
  2. 21/10/2008 Inline block links - semantically correct
  3. 19/10/2008 Inline block links
  4. 23/08/2008 Tic Tac Toe game.
  5. 13/08/2008 Safari webkit transitions.
  6. 08/03/2008 A not so simple photo gallery.
  7. 11/02/2008 Sliding list click photo gallery.
  8. 13/01/2008 Image map with circular hot-spots
  9. 18/12/2007 Sliding list photo gallery.
  10. 23/10/2007 Photo Scroll Gallery.
  11. 22/10/2007 Photo Click Gallery.
  12. 20/10/2007 Show me some more...again.
  13. 09/10/2007 A scrolling Image Map.
  14. 21/09/2007 A maze puzzle using 3D pixel art.
  15. 15/09/2007 A Cops and Robbers Maze puzzle.
  16. 01/08/2007 A simplified version of the British Flag.
  17. 21/07/2007 Tool links on inline text.
  18. 13/06/2007 A five point star.
  19. 06/06/2007 Image mapping a map.
  20. 11/05/2007 Changing background color on hover.
  21. 10/05/2007 Tooltips on inline links.
  22. 18/04/2007 'More' information.
  23. 15/04/2007 Simplest Photo Gallery.
  24. 01/04/2007 Photo Scroll Gallery.
  25. 30/03/2007 Photo Strip Gallery.
  26. 18/03/2007 Image map, on the menu again.
  27. 16/03/2007 Return of the image maps.
  28. 11/03/2007 CSS only speech bubbles.
  29. 02/03/2007 A more complex slideshow.
  30. 26/02/2007 A simple slideshow.
  31. 21/02/2007 Removing inline link border.
  32. 08/01/2007 Browser BUGS using :first-letter
  33. 25/12/2006 A Merry Christmas
  34. 23/12/2006 100 image gallery
  35. 11/11/2006 A clipped gallery
  36. 22/10/2006 Minimum font sizing
  37. 15/10/2006 Centering images
  38. 14/10/2006 A selection box
  39. 01/10/2006 Another maze puzzle
  40. 23/09/2006 CSS calculator
  41. 27/08/2006 Another slide show
  42. 12/08/2006 Link calendar v2
  43. 02/08/2006 An art gallery
  44. 31/07/2006 Simple CSS photo-album
  45. 20/07/2006 Pop-up images

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.

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.


Recommended Sites

CSSplay web design/assistance

"The citroen.co.uk web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth


Advertise with CSSplay

CSS play pages

CSS (Design) - TOP.ORG

CSS play recommend

Free, practical CSS menus, layouts, and examplesEarn from your site today with Netklix text adsPSD to HTMLSitegrinder