42 comments

[ 3.0 ms ] story [ 113 ms ] thread
lol at #tongue{position:cheek;}
Did you know that CSS caused one of the big disasters?

  #titanic{float:none}
How about

.einstein {position: relative;}

I hope you all don't mind, but I loved these CSS declarations so much that I whipped this up today:

http://csshumor.com/

If you've got any more, let me know! 8-)

.iceberg{clear:none}
Finally! Now we can properly emulate the 90s with modern web standards. :)
Cool CSS3 experiment... (god forbid this turns "fashion" again!)
Now we just need some CSS3 "under construction" icons and we're ready for 1997!

(Seriously, anyone up for the challenge?)

Don't forget the CSS class for a dividing line in the form of dripping blood, and one for a rotating cranium.
A rotating cranium ON FIRE, if you please!
Ah, reminds me of my first site on geocities.com and tripod.com all those years ago!
... and some Mosaic missing image icons.
Very nostalgic, I was thinking we need a way of emulating blue flames licking around a spinning oval logo!
Huh? The body of the document is enclosed in <sarcasm> tags.

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

<sarcasm>Great! Just what the web needs.</sarcasm>
"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?

Just tried it with iOS 4.2.1 on an iPhone 3GS. Nothing appears around the paragraph.
Yes, it works beautifully* on iOS5.

* For a given value of “beautiful”

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!
View-Source for more fun.

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

    #tongue{position:cheek;}
    /* ^ OMG! An ID! That kills performance! */
I can't believe they choose to leave the unicorns commented out by default.
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)

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.

(comment deleted)
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.
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)

I think I just gayed in my pants a little.
I am ready for the css/js spinning earth and marquee!
Chris H always gives an audience what they want ;) Another arrow in the post-modern HTML5/CSS3 quiver.
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/