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.
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 67 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 since 2005 and is now 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?
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.
- 30-11-13Full Screen Auto Run Slideshow
- 30-11-13BIG! Slideshow v1.1
- 28-11-133D Flip Card Photo Gallery
- 25-11-13Select list to drop list conversion
- 18-11-13Select list alternative
- 13-11-13Imagemap with hover effect
- 17-10-13Centering using margin:auto;
- 14-10-13Rotating Information Panels
- 09-10-13CSSplay Swipe Me Inline!
- 23-09-13CSSplay-er HTML5 player
- 14-09-13Video playlist including IE7
- 09-09-13Responsive 'Swipe Too' Slideshow
- 19-08-13Responsive 'Swipe' Slideshow v2
- 05-08-13Responsive videos with playlists
- 12-07-13Pong2 - fixing some issues
- 03-07-13Ping-Pong player v computer
- 20-06-13Conversion Slide Show
- 18-06-13Oh So Simple Slide Show
- 07-06-13Responsive Image Map
- 25-01-133D Spinning Boxes for IE10
- 19-01-13Animated Cube Gallery for IE10
- 14-01-133D Dymaxion Map Animation for IE10
- 11-01-133D Cube Animation for IE10
- 29-11-12CSS3 Any Size Gallery v2
- 20-10-12CSS3 Logic - Connect Four
- 02-12-13PC, Tablet & Smartphone Menu v2
- 04-11-13PC, Tablet & Smartphone Menu
- 17-10-13Universal Mini Menu
- 15-10-13Smartphone Mini Menu
- 04-10-13Responsive Menus
- 03-10-13Responsive Droplist Menu
- 08-07-13Windows 8 'Metro' Style Menu
- 25-06-13An Iris/Diaphragm Menu
- 24-06-13A Mini Menu
- 07-05-13Responsive Single Level Menu
- 26-04-13Responsive Dropdown/Flyout Menu
- 23-04-13Responsive Droplist Menu
- 08-04-13Concertina for Touch Screen
- 02-04-13Dropline for Touch Screen
- 25-03-13Flyout for Touch Screen
- 22-03-13Droplist for Touch Screen
- 21-03-13Multi-level for Touch Screen #2
- 20-03-13Multi-level for Touch Screen #1
- 19-03-13Info Panels for Touch Screen
- 14-02-13IE10 Touch Screen Droplist
- 12-02-13IE10 Touch Screen Dropdown
- 03-02-133D Flip Down Menu for IE10
- 18-01-13Slide Down / Concertina Menu
- 01-05-13Responsive layout
- 16-11-1050% / 50% split layout
- 28-07-10CSS3 - 100% Background
- 04-02-093 columns - 7 variations
- 02-02-09Fluid layout - multi column
- 24-04-13IE7/8 Responsive 'Backgrounds'
- 11-03-123D Jack-in-the-Box with Music
- 28-07-10CSS3 - 100% Background
- 28-09-13Windows 8 Touch Screen Gallery
- 09-02-13IE10 specific styling
- 01-10-10IE6 foreground pngFix
- 10-09-10timeAction Galleries
CSS play is worth...
According to several sources, CSS play is worth over £1,000,000 GBP
I will take £500,000 GBP if anyone is interested?