CSS play

Doing it with Style

Search CSS PLAY

EXPERIMENTS 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.

Please note that many of the demonstrations are more than 10 years old and as such they may use ideas that are out of date. These have been retained to show how far CSS has come since the creation of CSS play.

CSS PLAY, by the way, is listed on the w3c.org website.

Auto/Manual slideshow with Play/Pause

Typical CSS Play Demo
Using just CSS - NO jQuery/javascript


Recent demonstrations

General Demos
CSS Right Move updated CSS tic-tac-toe updated CSS 3x3 slide puzzle updated CSS slider as good as JS Simple auto/manual slider Vertical auto/manual slider Slideshow @keyframes variables CSS slideshow using content: CSS only 3x3 slide puzzle CSS only maze puzzle CSS auto/manual slideshow CSS siblings, parents, children CSS only previous siblings CSS popover slideshow CSS masonry for Firefox Coming soon - CSS masonry Animating images on page scroll Animation on page scroll Fullscreen Vimeo videos Simple css/jquery slideshow Hybrid 'SWIPER' 'SWIPER' remote controls Manual slideshow with 'jump' v2 Manual slideshow with 'jump' Stopwatch using @property Slideshow using @property Swipe to view frames Auto/manual, play/pause slides Slide down/up info panels Slide up/down FIXED!! Slide down/up extra text STICKY/SNAP scrolling table Looping slideshow using :unset Replay/restart CSS animations Auto-Wrap Slides using variables Simple Auto-Wrap Slideshow AUTO MANUAL Slideshow v2 AUTO MANUAL Slideshow SLIDE-STEP Slideshow v2 SLIDE-STEP (STAFF) Slideshow SLIDE-STEP Slideshow Auto wrap Slideshow Tower of Hanoi version 2 Connect 4 - player v player Going Round In Circles Infinite Zoom Animation Tic Tac Toe player vs PC Slide down/up - auto height Responsive loop gallery Thumbnail looping slideshow Responsive typewriter v2 Responsive centered typewriter Piet Mondrain Art using one <div> CSS animated stretchy text CSS 'Right Move' puzzle v2 Marquee version 3 Wrap slideshow any size images CSS manual wrap slideshow v3 CSS ONLY rerun @keframes v2 CSS manual looping slideshow A CSS only dartboard v3 Replace Vimeo Play/Pause control
Layouts
A vertical layout with snap/sticky A scroll page with sub pages A scroll-snap with sticky layout Responsive flexbox layout 3x3 Grid snap points Scroll snap points Modal windows template Experimental 'viewport' Layout Responsive 'viewport' Layout Responsive 'Wavy' Layout Responsive 'Slanty' Layout

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 76 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 CSS PLAY 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, but note that they are not responsive. If you wish to see these 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 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.

SuperbWebsiteBuilders.com
Expert website builder reviews and comparisons by Howard Steele.

Support CSS play

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.