Jump to navigation

CSS gallery

From the CSS Intro course

The students of the CSS Intro course on W3Cx tested their new skills in CSS. The teachers awarded pizes to the designs of the first batch of students. Here are the first prizes:

[Screendump] Glowing zen Garden

First prize category retro design: The starry night design has twinkling stars, pulsing glows, 90's style 3D shadows, an irritating animation, very informal fonts and even a starry mouse cursor. But it is still readable. See the Pen CSS Zen Garden by Jade Stephanie Lumarque (@stephanie08) on CodePen.

[Screendump] Gingerbread monster says happy birthday

First prize category birthday card: The gingerbread monster has exuberant colors and even the CSS course's logo is merged into the scene. The shapes and animations are done with JavaScript, but there is still enough CSS to make it count. See the Pen Happy birthday CSS! by SamKGo (@SamKGo) on CodePen.

[Screendump] SamKGo's resume in salmon colors

First prize category resume: The same author as the birthday card above, but no exuberant colors here, just shades of salmon. The page uses only two font families, but clever use of the extra-light weight makes it look like there are more, while still keeping the typography balanced. There is symmetry, but not too much. Maybe the two skills boxes should have had the same height, though? And is there a body background color missing? See the Pen Resume by SamKGo (@SamKGo) on CodePen.

[Screendump] Doraemon (cartoon character)

Special jury prize: Not an example of good HTML (the document consists entirely of empty elements), but clever use of CSS. It shows CSS can do things it wasn't designed for. See the Pen Doraemon by Lorenzo Peláez (@ltplogan).

Essays

Much has been written about CSS over the years. The following documents are interesting because they describe the very beginnings of CSS:

Bruce Lawson interviews Håkon Wium Lie
On the 10th of October 2014 it was exactly 20 years ago that Håkon sent an e-mail to the www-talk mailing list proposing Cascading HTML Style Sheets. The occasion for Bruce Lawson to ask Håkon to look back to that time, but also a bit into the future.
Historical style sheet proposals
In 1993–1994, before W3C took on the task of defining a style sheet language for the Web, CSS wasn't the only language being proposed. Here is a list of all proposals from that period.
Cascading Style Sheets (Håkon's PhD thesis)
In 2005, Håkon defended his PhD thesis on CSS, in particular on what is different about style sheet languages on the Web vs traditional style sheets for printing.

CSS home page over the years

CSS is awesome

This image, created in March 2009 by Steven Frank has become a kind of symbol for the difficulty of controling the sizes of CSS boxes or their contents. From the old CSS tables and floats, via calc() to flexbox and fit-content/min-content, the possibilities to wrap content have steadily increased. And Web Fonts now allow control over the contents itself. But there certainly was a time when sizing boxes could be frustrating.

The famous CSS IS AWESOME image, as seen on t-shirts and mugs.
A box with the words ‘CSS IS AWESOME’, but the text is too wide…

Acid2

The Acid2 test was developed in March 2005 by Håkon Wium Lie and Ian Hickson. Unlike Todd Fahrner's first acid test, It tests much more than just CSS, including HTTP, data-URLs and PNG.

The test is available on http://acid2.acidtests.org/
The reference image of the Acid2 test shows a ‘smiley’

The box model

The diagram explaining the CSS box model has appeared in many variations in many publications. This is the version in the CSS 2.1 specification.

Diagram of the CSS box model from CSS 2.1
Nested rectangles, from inside to out: content edge, padding
     edge, border edge and margin edge.

And you?

If you do something to celebrate CSS, let me know!

17 December 2016, Bert Bos, Style Activity Lead | Colophon