CSS3 Rainbow Dividers

[yuvadam]

Now we just need some CSS3 "under construction" icons and we're ready for 1997!

(Seriously, anyone up for the challenge?)

[sp332]

This link will inspire you, or maybe just crash your browser. http://www.textfiles.com/underconstruction/

[snorkel]

... and some Mosaic missing image icons.

[hackermom]

Don't forget the CSS class for a dividing line in the form of dripping blood, and one for a rotating cranium.

[statictype]

View-Source for more fun.

     -lynx-animation:charlieeee 2.5s forwards linear infinite;

...

    #tongue{position:cheek;}
    /* ^ OMG! An ID! That kills performance! */

[cdmoyer]

I can't believe they choose to leave the unicorns commented out by default.

[kulpreet]

Finally! Now we can properly emulate the 90s with modern web standards. :)

[chucknthem]

Don't forget to use a rainbow terminal when you're hacking together your retro 90s site https://github.com/busyloop/lolcat

[kmm]

Huh? The body of the document is enclosed in <sarcasm> tags.

Also, I once want to commit with the message "Added unicorn option".

[gnoupi]

If you open it with Opera and don't feel it particularly amazing, like I did, open it with another browser.

(Only viewing the source I realized it was supposed to be animated)

[spking]

Someone should tell this guy:

http://eonweb.com/cgi-shl/foxweb.exe/menu@search

[gte525u]

Hah, I had no idea foxpro had a web-front end.

[crazysim]

"It uses all the cool stuff your iPhone can do!"

It doesn't seem to work on iOS 4.3.3 on an iPad 2. Does this work with iOS 5?

[lachenmayer]

Just tried it with iOS 4.2.1 on an iPhone 3GS. Nothing appears around the paragraph.

[arnemart]

Yes, it works beautifully* on iOS5.

* For a given value of “beautiful”

[netghost]

Absolutely need to also throw in some RainGlows! http://monkeyandcrow.com/blog/css3_rainglows/

[josteink]

This means they are hardware accelerated!!!

And still choppy on my Xeon (before going full cycle and starting over again). Too lazy to see if this is an implementation error or a performance issue. And yes, I do realize this is a joke.

Just mentioning this as a warning: Just because someone says "hardware accelerated" doesn't mean you should go crazy and stop thinking performance.

Same applies to CSS3. Use it wisely.

[dspeyer]

For those who don't want to wade through it, the key point is:

background-image:-webkit-linear-gradient (and moz, o, ms and khtml equivalents)

[chrislomax]

Very nostalgic, I was thinking we need a way of emulating blue flames licking around a spinning oval logo!

[alanh]

Dang, don't you hate it when you see someone else showing off their stuff when you did it as well, but kept it under the radar? My old-school-style CSS3 HRs (not animated): http://jsfiddle.net/alanhogan/xjBMV/2/

[trocker]

Swweett Stuff. I've been waiting for something retro like this to be designed in CSS3 - Hardware Accelerated! How about we start off some open css3 design sources and lets make crazy stuff until its just a matter of combinations to make any aw3som3 effect!

[ivanicus]

Cool CSS3 experiment... (god forbid this turns "fashion" again!)

[Aviwein77]

This is kind of fantastic, in the 'I almost want to go out and plaster it all over a website just for fun and to laugh at peoples reactions' fantastic.

[BillSaysThis]

Chris H always gives an audience what they want ;) Another arrow in the post-modern HTML5/CSS3 quiver.

[shawndumas]

http://www.aliviastoys.com/

[Flavius]

<sarcasm>Great! Just what the web needs.</sarcasm>

[par]

I am ready for the css/js spinning earth and marquee!

[iamclovin]

lol at #tongue{position:cheek;}

[rimantas]

Did you know that CSS caused one of the big disasters?

  #titanic{float:none}