A 1 x 600px rainbow divider gif was bent, stretched and forked in every direction to form the letters. The only rule was that there weren’t to be any curves, and that the font would only be in capitals. Two rules… The gif must also retain its 1px width. Three rules… Otherwise the rainbow divider could be bent and stretched at will. The rules about width and curves are reasonably self-explanatory: they are so that the rainbow divider retains some sort of integrity and semblance to its origin as a glyph. The restrictions regarding capitals are a counter to their abolishment on printed materials by the Bauhaus in 1925. The rainbow divider being an iconic ornament of early web design, and with capital letters subsequently assuming new meaning online – namely, SHOUTING – now would appear timely to reintroduce, or make the case once again, for the “second alphabet”.

Here it is in lorem ipsum:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed rhoncus lacus. Duis urna urna, sagittis at rutrum eget, tempus sit amet arcu. Aliquam in magna eget eros scelerisque placerat. Vivamus eu dignissim mi. Aliquam tempus ornare dui eget sagittis. Phasellus ac purus vitae felis vulputate volutpat et et justo. Aenean aliquam eros et orci ultrices iaculis. Nullam eget velit risus, vitae ultrices lorem.

The original gif files were turned into a vector before being mapped and converted to a web font. In doing so the rainbow divider completes a journey from elaborate decoration separating blocks of text on a web page, to the text itself.

Font size examples: starting at 60px through 48px, 36px and 24px to 12px at the end. This is as small as it can get while retaining any hope of legibility. It works better at a larger size and is meant for display rather than body text.

Rainbow divider regular
Rainbow divider regular
Rainbow divider regular
Rainbow divider regular
Rainbow divider regular

In addition to installing the web font, you will need to add a little extra CSS to your style sheet to give it colour and make it animate. Copy the CSS below and wrap your text in a rainbow span class. Unfortunately it won’t work in IE because it doesn’t support either text-shadow or key-frame animations, yet. It is good to go everywhere else though. Enjoy!

Download Rainbow divider regular now.

@-webkit-keyframes rainbow {
    0%   { color: red; text-shadow: 0px 1px 0 orange, 0px 2px 0 yellow, 0px 3px 0 green, 0px 4px 0 blue, 0px 5px 0 indigo, 0px 6px 0 violet; }
    16%  { color: orange; text-shadow: 0px 1px 0 yellow, 0px 2px 0 green, 0px 3px 0 blue, 0px 4px 0 indigo, 0px 5px 0 violet, 0px 6px 0 red; }
    33%  { color: yellow; text-shadow: 0px 1px 0 green, 0px 2px 0 blue, 0px 3px 0 indigo, 0px 4px 0 violet, 0px 5px 0 red, 0px 6px 0 orange; }
    50%  { color: green; text-shadow: 0px 1px 0 blue, 0px 2px 0 indigo, 0px 3px 0 violet, 0px 4px 0 red, 0px 5px 0 orange, 0px 6px 0 yellow; }
    66%  { color: blue; text-shadow: 0px 1px 0 indigo, 0px 2px 0 violet, 0px 3px 0 red, 0px 4px 0 orange, 0px 5px 0 yellow, 0px 6px 0 green; }
    83%  { color: indigo; text-shadow: 0px 1px 0 violet, 0px 2px 0 red, 0px 3px 0 orange, 0px 4px 0 yellow, 0px 5px 0 green, 0px 6px 0 blue; }
    100% { color: violet; text-shadow: 0px 1px 0 red, 0px 2px 0 orange, 0px 3px 0 yellow, 0px 4px 0 green, 0px 5px 0 blue, 0px 6px 0 indigo; }
}
@-moz-keyframes rainbow {
    0%   { color: red; text-shadow: 0px 1px 0 orange, 0px 2px 0 yellow, 0px 3px 0 green, 0px 4px 0 blue, 0px 5px 0 indigo, 0px 6px 0 violet; }
    16%  { color: orange; text-shadow: 0px 1px 0 yellow, 0px 2px 0 green, 0px 3px 0 blue, 0px 4px 0 indigo, 0px 5px 0 violet, 0px 6px 0 red; }
    33%  { color: yellow; text-shadow: 0px 1px 0 green, 0px 2px 0 blue, 0px 3px 0 indigo, 0px 4px 0 violet, 0px 5px 0 red, 0px 6px 0 orange; }
    50%  { color: green; text-shadow: 0px 1px 0 blue, 0px 2px 0 indigo, 0px 3px 0 violet, 0px 4px 0 red, 0px 5px 0 orange, 0px 6px 0 yellow; }
    66%  { color: blue; text-shadow: 0px 1px 0 indigo, 0px 2px 0 violet, 0px 3px 0 red, 0px 4px 0 orange, 0px 5px 0 yellow, 0px 6px 0 green; }
    83%  { color: indigo; text-shadow: 0px 1px 0 violet, 0px 2px 0 red, 0px 3px 0 orange, 0px 4px 0 yellow, 0px 5px 0 green, 0px 6px 0 blue; }
    100% { color: violet; text-shadow: 0px 1px 0 red, 0px 2px 0 orange, 0px 3px 0 yellow, 0px 4px 0 green, 0px 5px 0 blue, 0px 6px 0 indigo; }
}
 
.rainbow {
    font-size: 36px;
    line-height: 45px;
    font-family: RainbowdividerRegular;
    letter-spacing: 5px;
    -webkit-animation: rainbow 1s infinite linear;
    -moz-animation: rainbow 1s infinite linear;

Bg_img nature has been revised, expanded and redesigned! Check it out here.

It has also been made into a limited edition (20 copies!) book on occasion of its inclusion in Notes on a New Nature, a show curated by Nicholas O’Brien at 319 Scholes. By way of note, the confetti like pattern dotted over the cover is the first frame of an animated gif from the background of cpb.tumblr – one of my favourites, but which yesterday announced that it was closing :(

Halo

The classic: the Halo employs a subtle monochromatic tonal shift (possibly) inspired by the drop-shadow around the application windows of OS X. The top of the content area is highlighted by an ethereal baroque flourish from a source emanating somewhere below the central monolith. The extent of the flourish often depends on the eagerness of the designer is to investigate the Difference Clouds setting in Photoshop. This effect is quite likely to be used on a site that makes heavy sci-fi references. The Halo is being used as a metaphor and as a visual fanfare for an alien presence. Imagine when looking at it you hear the alien sounds from Close Encounters, or the noise when booting up Windows 7. The less eager, more minimal designer will prefer to introduce a high level of noise to a lighter coloured drop-shadow when making a Halo. In this instance it looks as though the monolith has been created by spraying paint over a stencil. This is the street halo.

Inverse Halo

Similar to the Halo, though with fewer associative readings, the central monolith is bleached with an inner glow that fades into the main body colour of the site as you scroll down. The monolith is more ephemeral than in most other Tombstones and resembles a searchlight bouncing against darkened clouds. The page headline is often encircled by the highlight, drawing attention to content above the cut. Alternatively, the monolith is slightly transparent, revealing traces of pattern from the body background. In these instances, it is common for each post to be laid out like a series of cards with a gap between each with the background pattern acting as a boundary between one section and the next.

Frame

Whereas the Halo only gives definition to the top of the content, the frame gives boundary to it all. The Halo offers the flexibility of being able to support any length of content by sitting on top of it like a hat, the Frame by contrast is more restrictive and assumes a height value as well as a width. The Frame tombstone tends to only be suitable for static, hard coded HTML pages rather than anything blog-like and dynamically generated simply because it assumes that the content and everything within it has been specifically and uniquely crafted. The alternative is to use scrollbars in the content area; however this is a poorly designed compromise. As a result of the inelegance of this, the Frame background tends to now only be found on older websites. One of the appealing features of the Frame tombstone though is that it assumes a symbiotic relationship between the background and the content not found elsewhere. Both have been designed with the other in mind and tend to dovetail rather than be inoffensively complimentary to one another.

Sprite

Found in the header and footer <div> rather than the body, the Sprite tombstone is a contemporary variant of the Frame. A blank content area flanked with a solid colour is usually decorated at the top with branding and other ornamental flourishes and at the bottom with a drop shadow or a dog-eared corner. The image is positioned centrally at the top and bottom of the page as a background in both the header and footer tags. The main or content area is HTML generated and can stretch dynamically in accordance with the length of the article. Only the necessary part of the sprite is shown in either the header or footer: the top or bottom half depending on whether you are at the beginning or end of the page. The middle section, being HTML generated, is infinitely flexible and offers a nicer, much more elegant solution to a problem previously solved by the scrollbars of the Frame tombstone.

Header

A tombstone favoured by academic and research sites. Notable for a small monolithic area at the top of the page, the Header accents little more than the site and article title, usually fading into the colour of the page background by the start of the article itself. Often a simple, tasteful gradient, the Header tombstone can also be used as a way of subtlety integrating a corporate branding at the top of the page. It is commonly used as a lightweight decoration within a text heavy, minimal theme.

Tablet

Superficially, the Tablet tombstone is only slightly different from the Frame. Both assume a viewing area with a height value as well as a width. The main difference though is that the Tablet purposefully employs scrollbars as a feature rather than inelegant by-product. This means is that the Tablet, rather than a means of enclosure, behaves as a small window for viewing the content; one with a knowing and recursive nod in the direction of the browser window rendering it. The Tablet background was employed more commonly when monitor resolution was lower than it is today and screen estate was at an ill or undefined premium. This resulted in the content area – the window – often being quite small. Think iPhone rather than iPad. The Tablet’s popularity during the early to mid-2000’s was as a result of it ensuring that the important parts of the page would always fit on the screen, whatever the setting the monitor.

Grave

The Grave is an inverse tombstone. The background image is positioned at the bottom of the page, or in some instances, the footer. It only becomes visible when you have scrolled down and finished reading. It is different from other tombstones in that it cups the final words of the content rather than embellishing the first. Like all graves, it gives definition to the end.

Outline

Part of the Halo family of tombstones, the Outline borrows elements from both, but is much less baroque in its ornament than either. Rather than emissions of radiant aurora encircling the tombstone, the content area is delineated with a line, one or two pixels wide. On occasion and with nod to the Halo, the outline is decorated with a drop shadow, although only with a very small distance and spread. This is to give the impression that the content area is raised or angled forward slightly. In common with most tombstones, the outline fades into the body colour as the page is scrolled down. While this can be used with a simple gradient to lock down a no-frills minimal vibe, the outline works best when incorporated with a graphic. This is because a dominant image indicates that the design has been heavily themed around the sites principal subject rather than a generic aesthetic ambiance. The result is a crafted coming together of the content and the background.

Altar

The Altar[1] is an abstract or fragmented tombstone. Two ornamental objects, distinct or mirrored, float either side of a subtle or loosely defined central monolith. The ornaments embellish the otherwise dormant space in the guttering at the edge of the screen and are the sole active element of the background. In combination, and read horizontally, the three elements come together in triptych. The ornaments of the Altar operate as a form of branding; they allow the logo and site identity to spill over beyond the edges of the monolith and onto the page background, like a stain. As a result, it is common for the background image to have a fixed position so that the ornament remains on screen at all times and independent of the downward scroll of the content.

Bg_img tombstone is available to download here.

[1] The term Altar is borrowed and then taken unabashedly from the meme developed on Dump.fm. The Altar, as Lalblog describes is “Basically a triptych (or more-tych) which combines a central image propped up by peripheral pillars [all usually animated gifs] that will act to emphasise the central image as an object of worship (usually ironic) or will play with the central image to create a visual pun or joke (or at least, that’s how I interpret it)”.

I am excited to be part of a Speed Show organised by Pieter from Today and Tomorrow that opens tonight in Berlin. There will be work from a bunch of really good people; I will be showing my Css Mural (with instructions). If you happen to be in Berlin, you know where to go.