CSS demos

Some demonstrations of recent features of CSS or features under development.

Note that they are either still in working draft stage or became Candidate Recommendation very recently, so don't expect them to work in many browsers yet.

Demos of opacity and RGBA

CSS3 introduces two different ways to create transparent elements: an 'opacity' property and transparent colors. They have different effects:

• Opacity — The P elements each have 0.5 opacity, that means everything in the element, including any images, is semi-transparent. [requires Mozilla 1]
• RGBA — The P elements each have a background rgba(204,204,255,0.5), i.e., the background is semi-transparent, but the foreground is not.

Demo of 'inline-block'

In CSS2, an element was either 'inline' or 'block' (or table or some other special types), but CSS 2.1 provides a hybrid of the two: an element that can be put in the middle of a line, like a word, but that can contain multiple lines of text. Useful for (big) buttons, for example, or for the following example:

• Inline block — an example of a thumbnails page, which arranges blocks consisting of a photo and a caption into lines, automatically putting as many thumbnails on a line as fit in the window. [requires MacIE 5.5]

Alternative style sheets

This is not a new feature (it has existed since CSS1), but recently browsers have started doing interesting things with it. One document can have multiple style sheets. This very simple example shows how that feature can be used to create two views of the same document, in this case a view that shows the "diffs" relative to a previous version (marked up with <ins> and <del>) and another that only shows the new version.

• Diff view — a document with an alternative style sheet that shows and highlights the <del> and <ins> elements,

Media-dependent styles

The recent Candidate Recommendation for "Media Queries" extends another feature that CSS has had since level 1: media-dependent styles. (HTML4 and XML have the same.) The new features allow finer distinctions, but there are no publicly available implementations yet, so this demo only shows the old media queries:

• Media — the style sheet of this page contains different styles for screen, print, projection and handheld. [handheld requires Opera7, projection requires Opera6]

Styling the targeted element

One of the new selectors of CSS3 is a pseudo-class ':target', that matches the element that is targeted by the fragment ID of the URL (i.e., the part after the "#"). This allows to highlight the element, or indeed to hide non-targeted elements, as the second example below shows.

• highlight — a simple example of using the ':target' selector to make the target of a link more visible. [requires Mozilla]
• tabs — by selectively hiding elements that are not targeted, this demo creates the illusion of a tabbed interface. Not necessarily the way tabbed interfaces should be created (maybe CSS will in thew future add a predefined type for that), but a nice demo nevertheless. [requires Mozilla]