Author Archives: Paul
Rainbow divider regular
Rainbow divider regular is a font developed for a future project. The words are animated so that they sing visually as well as verbally.
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;
Utilizza La Tua Illusione I
I have 2 Rainbow Divider gifs on show at bubblebyte.org as part of a new exhibition - Utilizza La Tua Illusione I which opens today. Go check it out! Any show named after a Guns’n'Roses album is worth seeing, this one doubly so because it features great work from some fantastic people… click.
Posted in News Leave a comment
Notes on a new nature @ 319 Scholes
Opening tonight: Notes on a New Nature, a show curated by Nicholas O’Brien at 319 Scholes. I will be showing a version of Bg_img nature made and printed especially for the show. It’s the first time a Bg_img chapter has been made in book form and I’m really excited about the way it has turned out. Nicholas needs thanking for his enduring patience while endeavouring to make this happen :)
Twenty editioned copies have been made; I believe some will be available from the gallery. The show sounds as though it will be amazing and includes some great artists. Really, really wish I could go.
Press release here.
Posted in News Leave a comment
Bg_img nature *updated
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 :(
Another infinity
Another Infinity, a solo show of recent and specially made work, opens tonight at bubblebyte.org. Index file drops at 7.00
Press release:
The work of Paul Flannery looks at the decoration of the Internet and its early aesthetics.
Using ornamental elements, often produced by amateurs, as icons, background images and memes, Flannery’s work is a deep analysis about digital time and beauty.
Through detournement and re-vision of various popular web. 2.0 features, Flannery creates colourful geometric work which activates new relationships in terms of trends and chronologies, possibilities and advancement.
Another Infinity, the first solo show of the artist on bubblebyte.org, presents a series of works inspired by a (11 frame, 1 x 600px) Rainbow divider, an animated gif ubiquitous during the early days of the web. The original gif is treated as a single sculptural unit, pulled apart frame by frame before being put back together in various combinations of deviation and obedience to its original purpose.
The results lay somewhere between ornament and object.
As part of Another Infinity, depending on the browser used, the bubblebyte.org main page will rotate or throb as a counter rhythm to the works on display.
The private view attendees will receive a downloadable artefact exclusively created by the artist.