What it's all about...
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my first steps down this path.
CSS play, by the way, is now listed on the w3c.org website.
So I have created this site in the hope that it will help newcomers to CSS and show old hands that it is more than just a mechanism for styling your documents. It is oh so much more.
Because CSS play deals with experimental CSS that is exactly what you get JUST CSS, no javascript or any other programming language has been used in any of the demonstrations. For javascript demonstrations please click the javascript link in the main navigation bar which will take you to my other site which is dedicated to demonstrations using CSS and minimal, unobtrusive, javascript.
Use the correct DocType Definition (DTD)
Please , please, please note that for most of my demonstrations to work, especially in Internet Explorer, you MUST use a standards compliant !DOCTYPE, and for Internet Explorer this MUST be the first line of your (x)html.
Using <?xml version="1.0" encoding="UTF-8"?> will switch IE into quirks mode.
A list of the recommended DTDs can be found at the following link:
Recommended DTDs to use in your Web document.
A little bit about us
CSS play is a partnership between myself and my wife. My name is Stuart Nicholls, but known to everyone as just Stu. I am 65 years old, married with two children, worked as an electronics design draughtsman, until I resigned to become a self employed (freelance) web designer/adviser, and have a passion for computers and photography.
My wife is Fran Nicholls who assists in the day to day running of the site and also controls the accounts as well as having an input into the demonstrations.
We started out with computers in the 1980s when I began writing articles on the ZX81 and ZX Spectrum for the computer magazines of the time. I was also commissioned by McGraw-Hill to write two books on Z80 programming for the ZX Spectrum, Fran helped to produce the manuscripts for these books.
The web was the next big attraction and once more I have become hooked, as you can no doubt tell, with CSS. This site has been around for a couple of years now and is at the forefront of CSS development.
We thank you all for your support and comments and should you wish to link back to CSSplay please feel free to use this button.
What has happened to my previous home pages?
The alternative styles and my javascript switcher have been dropped from this new layout, primarily because any changes I wanted to make to this home page required updating the CSS for every style.
However, these styles have not been lost. If you wish to see my previous home pages then visit my archives.
But where's the code?
I have had many emails asking where the code/style can be found for the various demonstrations.
Well the xhtml is always placed in the #info div, so examine the source code, find the <div id="info">.....</div> and in between is the 'code'.
In most case the style is embedded in the page <head>...</head>. This is done to keep it all together on the same page making it easier to find. In some cases the css is held in a separate file (where it should be) and is loaded in the normal way <link rel="stylesheet" media="all" type="text/css" href="path to css file.css" /> so just add this path to the address in your browser to see the css file.
Recent Pages
- Demos
- 12-01-12The Right Move - puzzle
- 22-12-11Image Magnifier with Bounce
- 06-12-11No Left Turn - puzzle
- 28-11-11zoomBox Slideshow
- 25-11-11:target gallery no history
- 23-11-11starLIGHT lightbox
- 21-11-11CSS3 Any Size Gallery
- 20-11-11Mickey Mouse Gallery
- 17-11-11CSS3 Grid Accordian v2
- 16-11-11:target without JUMP!
- 16-11-11CSS3 Grid Accordian
- 14-11-11CSS3 Circle Slideshow
- 12-11-11CSS3 Image Rotation
- 11-11-11Stacked Slideshow Revisited
- 08-11-11CSS3 Gradient Image Zoom
- 06-11-11CSS3 Click Slide Panels #3
- 05-11-11CSS3 Click Slide Gallery #2
- 04-11-11CSS3 Click Slide Gallery
- 20-10-11'html5 oneBox' lightbox
- 25-09-11@font-face smoothing
- 18-09-11CSS3 Tabs
- 14-09-11keyframe/transition step()
- 09-09-11Image information panels
- 08-09-11Image enlarge with :focus
- 06-09-11Animated image enlarger
- 30-08-11CSS Solid Text & Shadow
- 09-08-11CSS3 Slide Gallery
- 01-07-11CSS3 Reflections
- 26-06-11CSS3 Meowww!
- 24-06-11CSS3 Keyframe Lightbox
- 18-06-11CSS3 Keyframe Gallery
- 30-05-11content:100 image gallery
- 27-05-11'oneBox' lightbox
- 20-05-11CSS3 Resize
- 19-05-11CSS3 Page Flip Book
- 17-05-11CSS3 Page Flip Gallery
- 17-05-11CSS3 Page Flip with a twist
- 15-05-11CSS3 Page Flip
- 09-05-11CSS Image Rotation
- 04-05-11CSS3 Photo Curls
- 19-01-12Dropline/dropdown menu
- 21-12-11Slide/Fly/Image 'bounce'
- 04-12-11:target dropline menu
- 04-12-11Simple rollover menu
- 02-12-11Stretch/Droplist Menu
- 18-11-11CSS3 Single Page Website
- 17-11-11CSS3 drill-down menu
- 01-11-11Search box stretch
- 31-10-11iPad Anywidth Menu v5
- 31-10-11iPad Anywidth Menu v4
- 07-10-11iPad Anywidth Menu v3
- 06-10-11IE/iPad 'bug fix' menu
- 04-10-11Click action concertina
- 24-09-11CSS3 Slide Out
- 11-09-11Click action dropdown
- 03-09-11CSS3 Headline Changer
- 25-08-11Drop Panel Menu
- 25-07-11Dropslide pushdown
- 18-07-11Round and Round
- 15-07-11CSS Click Droplist
- 03-07-11CSS3 LightBox Menu
- 22-06-11CSS3 Text Zoom
- 22-06-11CSS3 Icon Zoom
- 13-06-11iPad Slide/Hide Menu
- 11-06-11iPad Slide Down Menu
- 09-06-11iPad Anywidth Menu v2
- 07-06-11iPad Anywidth Menu
- 07-05-11CSS3 Playing Cards
- 07-05-11CSS3 Flower Power
- 16-04-11CSS3 Gradient Fills
- 15-04-11Click Multi-dropline
- 14-04-11Circular Menu squared
- 14-04-11CSS3 Animated Menu
- 06-04-11iPad sub-menu fix
- 05-04-11Click action concertina menu
- 28-03-11iPad Pulldown Panel/Menu
- 23-03-11iPad Droplist Menu
- 19-03-11iPad Flylist Menu
- 06-03-11CSS3 3D Social Network Ring
- 27-02-11CSS3 3D Rollover Menu
- 10-02-11iPad Exploding Images
- 25-01-11iPhone/iPad Flyout Icons
- 22-01-11iPhone/iPad Flyout List
- 21-01-11iPhone/iPad Droplist/delay
CSS play Testimonial
"The 
web site used
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
CSS play is worth...
According to several sources, CSS play is worth £1,930,000 GBP
I will take £1,000,000 GBP if anyone is interested?
