CSS play - web design and assistance
Website Builder
skip to content
Experiments with Cascading Style Sheets - Doing it with style
PSD to HTML


Why not download CSS play's NEW Browser Toolbar and keep up-to-date with the latest demonstrations. Click the image above to install the toolbar add-on into your browser.

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.

Sitegrinder

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

Me

CSS play is a partnership between myself and my wife. My name is Stuart Nicholls, but known to everyone as just Stu. I am 63 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.

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




CSS play Testimonial

"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

CSS play is worth...

According to several sources, CSS play is worth over £750,000 GBP
I will take £500,000 GBP if anyone is interested?

Recent Pages

Demos
06-02-103D Balls
03-02-10Parallax scrolling
03-02-10CSS3 Duff Roll
02-02-10CSS3 Can Roll
01-02-10CSS3 Animation
28-01-10'Image Magnifier' - Revisited
27-01-10CSS3 'Photo Info'
27-01-10CSS3 'Buttons'
27-01-10CSS3 'Zoom Gallery'
27-01-10CSS3 'Photo Slide'
13-01-10'Slideshow'
11-01-10Using 'Clickbox'
08-01-10CSS play's 'Clickbox'
30-11-09Vertical sliding gallery
28-11-09Sliding thumbnail gallery
26-11-09Previous/Next preview gallery
25-11-09Previous/Next gallery
10-11-09Gallery by numbers
20-10-09TTF fonts for web pages
27-09-09Permanent image gallery
29-08-09Image zooming
28-08-09Zoom gallery
Menus
A CSS play Menu Building Tool
06-02-10CSS3 'Drop Everything'
31-01-10CSS3 slide up/down lists
31-01-10'General Sibling' problem
29-01-10CSS3 fitted tabs
25-01-10CSS3 fade menu
24-01-10CSS3 slide menu
15-01-10'Showup' NEW sub line
21-01-10Image dropdown no hacks
15-01-10'Pullover' NEW sub line
14-01-10'Push-Pull' NEW sub line
11-01-10'Snowstorm' drop/fly
05-01-10Drop/fly v9 with trail
01-01-10No-hacks drop/fly v8
29-12-09No-hacks flyout v2
27-12-09No-hacks drop/fly v7
24-12-09No-hacks drop/fly v6
24-12-09No-hacks drop/fly v5
23-12-09No-hacks drop/fly v4
22-12-09No-hacks drop/fly v3
21-12-09No-hacks drop/fly v2
Layouts
04-02-093 columns - 7 variations
02-02-09Fluid layout - multi column
28-11-08Semi-fixed footer
Boxes
05-10-09'max-width' for IE6
17-09-07IE7 Transparent border error
17-09-07IE Transparent borders
12-06-07Chunky borders revisited
Mozilla
12-06-07CSS rainbow revisited
12-06-07Snooker Cue revisited
Explorer
19-11-09A PNG image map
15-01-093px bug fix for IE6
Opacity
14-03-08IE6 AlphaImageLoader links
13-05-07Image hover text

Recommended Sites

CSS play - web hosting

CSS play is now hosted by UK Web Hosting for Serious Business

Review

See the review on Make Use of :

Browser usage on CSS play
Browser %
Date : 1st November 2009
Firefox47.34
Internet Explorer34.68
Safari6.10
Chrome5.84
Opera4.79
Mozilla0.71
Opera Mini0.11

ICRA checked

ICRA checked logo
CSS play is now an Internet Content Rating Association (ICRA) checked site and has been reviewed by a member of staff at ICRA or its partner, Solarsoft.