What Is CSSplay? Stu Nicholls' Pure CSS Experiments and Demos Explained
CSSplay is a long-running demonstration site by Stu Nicholls built around one constraint: most demos use only CSS, with no JavaScript or other programming language. It is useful if you want to see how far CSS alone can go, or if you need a working reference for a menu, layout, slideshow, or small interactive component without adding script. The site is aimed at both newcomers learning CSS and experienced developers looking for techniques they may not have considered.
What the site actually contains
The homepage describes CSSplay as "experiments with cascading style sheets" and states that most demonstrations are "JUST CSS, no javascript or any other programming language." The demos are organized into categories rather than presented as a single tutorial course.
| Category | Examples listed on the site |
|---|---|
| Menus | Drop/flyout and tree menu, multi tree menu styling, retro focus-within tree menu, horizontal & vertical menu, details/summary slide, ULTIMATE tree menu v3 and v2, radio tree menu |
| Layouts | CSS-only masonry layout v2, responsive masonry layout, CSS Grid Lanes emulation |
| Slideshows | Simplest auto slideshow, 3D auto/manual carousel, full screen slideshow, split screen slideshow, multiple slideshows, grid slideshow, lego slides with pause |
| Other components | CSS-only stopwatch, stopwatch using @container, folding text corner, folding image corners, border shape pie chart, clip path pie chart |
The recent-demos list also shows newer CSS features being tested, including sibling-index(), sibling-count(), corner-shape, superellipse(), shape-outside, :if(), and height:calc-size(auto, size). That mix matters: some demos are practical patterns you can adapt today, while others are experiments with features that may have limited browser support.
Why it exists
The site quotes the W3C definition of CSS as "a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents," then pushes back on the word "simple." Nicholls writes that CSS "can be very complicated" and that he created the site to help newcomers and to show experienced developers that CSS is "more than just a mechanism for styling your documents."
That framing explains the site's value. It is not documentation and not a course. It is a collection of solved problems, each demonstrating a technique you can inspect and reuse.
How to use it
- Pick the category closest to your problem — menu, layout, slideshow, or a standalone component.
- Open the demo and check the behavior you need: does it open on hover, click, or focus? Does it pause, resize, or respond to container size?
- View the source to see the HTML structure and CSS rules. Because most demos avoid JavaScript, the logic lives entirely in selectors, pseudo-classes, and layout properties.
- Copy the technique, not the whole page. Adapt class names and structure to your own markup.
- Verify browser support before shipping, especially for demos using newer functions like
:if(),sibling-index(), orcorner-shape.
The site also emphasizes using a standards-compliant !DOCTYPE as the first line of your (x)html, and links to recommended DTDs. If you copy older demos, check that the doctype matches your document type, since quirks-mode rendering can change how the CSS behaves.
Who it suits
- CSS beginners get concrete, inspectable examples of what selectors and layout properties can do, without needing to read JavaScript.
- Experienced developers get a catalog of edge cases and modern-feature experiments, useful when you want a CSS-only solution instead of a script dependency.
- Anyone avoiding JavaScript for menus, slideshows, or small interactive elements will find directly relevant patterns.
Practical caveats
- "No JavaScript" does not automatically mean accessible or production-ready. Test keyboard navigation and screen-reader behavior on any menu or slideshow you adapt.
- Experimental demos may rely on features with partial browser support. Treat them as learning material until you confirm support in your target browsers.
- The site is a personal experiment collection, so naming and structure vary between demos. Expect to adapt rather than drop in.
CSSplay is listed on the w3c.org website, and the site includes an advertising information page for anyone interested in promoting there. For learning purposes, the most efficient approach is to start from the category that matches your current problem, read the source of one demo, and rebuild it in your own project rather than browsing the full list at once.