Image

CSS PLAY

Doing It With Style

Experimenting with
Cascading Style Sheets

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.

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 most of my demonstrations.

CSS PLAY is listed on the w3c.org website.

Use the correct DocType Definition (DTD)


Please, please, please use a standards compliant !DOCTYPE as the first line of your (x)html.

A list of the recommended DTDs can be found at the following link: Recommended DTDs to use in your Web document.

Recent demonstrations


Demos

CSS sibling-index() carousel

CSS simplest auto/manual

CSS auto/manual slideshow

CSS simple slideshow using :if()

CSS only - simple stopwatch

CSS fit screen slideshow

CSS full screen slideshow

CSS split screen slideshow

CSS sibling-index() sibling-count()

CSS height:calc-size(auto, size)

CSS corner-shape 4 leaf clover

CSS superellipse() flower

CSS corner-shape:superellipse()

CSS shape-outside img png

CSS slideshow using :if()

CSS only masonry layout v2

CSS responsive masonry layout

CSS grid slideshow

CSS simplest slideshow

CSS multiple slideshows v2

CSS multiple slideshows

CSS stopwatch using @container

CSS slideshow @container (style)

CSS full screen slideshow

CSS multi-option slideshow

CSS wine 3 section slides

CSS lego slides with pause

CSS cosmetic slideshow

CSS drawing circle animation

CSS slideshow hexagon rotation

CSS slideshow full screen

CSS slideshow with scroll

CSS slideshow using :focus

CSS slideshow multi split images

CSS slideshow with split images

CSS @container slideshow v6

CSS @container slideshow v5

CSS @container slideshow v4

CSS @container slideshow v3

CSS @container slideshow v2

CSS @container slideshow

CSS position-try with pointer

CSS position-anchor:

CSS ::view-transition v2

Layouts

A vertical layout with snap/sticky

A scroll page with sub pages

A scroll-snap with sticky layout

Responsive flexbox layout

A little bit about me


My name is Stuart Nicholls, but known to everyone as just Stu.
I 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.

I started out with computers in the 1980's 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..

The web was the next big attraction and once more I was 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.

But where's the code?


I have had many emails asking where the code/style can be found for the various demonstrations.

Well the html 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.

Image

Please consider making a donation, every little helps.