CSS/Exp : CSS Experiments

Introduction

This page catalogues some of my (more successful) CSS experiments — CSS/Exp stands for CSS/Experiments. The name CSS/Exp is modelled after Eric Meyers great CSS resource CSS/edge which has proven an important resource for many, with some advanced CSS designs of which especially the beautiful Complex Spiral page has influenced many people's webdesign, including mine. So a small tribute there.

I have definitely not been the only one to experiment with CSS in the past, and here is a shortlist of similar pages:

History and Context

Most of my CSS experiments were written in 2003, when I first started exploring CSS. I had been an Opera user for quite some time and Opera's new rendering engine Presto was becoming mature enough to support the various experimentations.

What attracted most of my interest was CSS generated content, and my enthusiasm was shared by Literary Moose (now known as Lofotenmoose) and we conversed a great deal about our experimentations with generated content. A lot of work on generated content is summarized in Moose's treatise on the subject. A further interest came in the form of CSS borders, or more specifically the slants. Tantek Çelik first explored this field with his fabulous CSS polygons. I also picked up the technique and started playing by using them for purely ornamental purposes, being one of the first to do this with CSS. Later I developed an increased interest in Opera Show and did some work on that topic as well, culminating in the Opera Show Generator.

In early 2006 I gave this section an overhaul and updated the experiments, and tried to standardize on the formatting of the explanations. I also tried to retrace the original date of the experiments for future reference. Not many experiments have been added in recent times, and I don't expect to do so in the near future as my interests have shifted elsewhere (I did anwer some CSS-related questions though). Nevertheless, when something comes up...

Experiments: Generated Content

Generated content is not widely supported in browsers, although it allows the author to add powerful and interesting effects to a page. Currently the Opera browser has the best support, which includes some aspects of CSS3.

No Content, Only Style(April 22, 2003): Taking generated content to the extremes, this page provides the absolute bare minimum of markup and all content and style is provided by means of stylesheets.
CSS Menu(March, 2004): Pure CSS menu with minimal markup, and interesting use of unicode character to introduce a linebreak.
Automatic Captions(June 5, 2003): CSS allows to extract information from attributes, and use it in the generated content. This is put to use by creating automatic captions for tables and image.
Accessible ID(October 25, 2003): Often one wishes to link to a specific section of a document, but it requires finding the ID of the specific heading. This technique shows the ID of a header when hovering over it.
Scientific Publishing(May 19, 2003): Whilst writing an article on publishing scientific documents with XHTML & CSS I developed some interesting applications of generated content. They are all visible in the article: numbered equations, nested numbering of table of content, numbered headings and tables/figures.
CSS Matrices(early 2004): Creating the effect of matrices with XHTML & CSS is here done by accurately positioning generated content.
Pure CSS Rounded Corners(June 9, 2003): Using nothing but CSS, the effect of rounded corners are possible (although not practically useful).

Experiments: Opera Show

As Opera supports CSS page-breaks, it can be used to write slideshows in HTML: Opera Show. This feature was pioneered by Håkon Wium Lie. I really like this Opera feature and you can read more about it on my Opera page. I also developed some techniques which are especially useful for Opera Show.

Scaled Background Image(December 23, 2003): Currently supported versions of CSS do not allow the scaling of a background-image to the dimensions of the object, or page. I developed a workaround that emulates the scaled background-image on the body of the document.
Slide X of Y numbering(October 8, 2004): This demo shows that it is possible to create a Slide X of Y numbering using CSS alone. Previously it was believed JavaScript was required to achieve the desired effect.

Experiments: Pranks

Definitely not all CSS experiments need to be useful, and these pranks exactly fit that description. Just having fun with CSS.

Light at the End of the Tunnel (May 3, 2003): My first experiment using 'slants', diagonal effects using CSS borders, was written shortly after I had deciphered Tantek's CSS polygons.
CSS Tangram(November 1, 2003): Using CSS borders and with a lot of spare time on my hands I created a CSS tangram set. Have fun playing!
CSS Billiards(October 30, 2003): In a moment of insanity I wrote a simple billiards table in pure CSS. For me writing a snooker table was a bit too much of a good thing, but Claire Campbell took up the challenge and made the CSS snooker table. She features more CSS border experiments on that site.
CSS Art (1,2): Most people will be familiar with the Dutch painter Piet Mondriaan. I decided to recreate two of his works in CSS: the first CSS Art!?
Border Mania (1,2,3,4): In an attempt to get an overview of how the various border-types combine, I made these pages. They are neither well done, or state of the art, but purely informative.
3D Bar Charts(October 27, 2003): This demo was derived from Literary Moose's CSS Chart demo. I added the 3D effects to the charts. This is once again a game of precise positioning.

Experiments: Various

Some experiments that do not seem to fit elsewhere.