CSS3 Awesome Test

mozilla

Just for fun, I decided to whip up one big awesome demonstration of some new CSS3 features in Firefox 3.1.

This is a CSS3 awesome test. It demonstrates some of the awesome parts of CSS3 implemented in Firefox 3.1.

In case you aren’t using a Firefox 3.1 beta, here’s what you would see:
CSS3 example

CSS3 Used

border-radius*
text-shadow
box-shadow*
column-width*
column-gap*
column-rule*
@font-face
border-color* (link removed, no spec found for border-colors)

* -moz prefix used.

Jos Buivenga’s Delicious font used for @font-face.

Text-shadow code borrowed from css3.info.

10 responses

Tomer wrote on February 27, 2009 at 5:14 pm :

Wonderful!
skierpage wrote on February 27, 2009 at 6:18 pm:

The font doesn’t match the screenshot for me in Firefox 3.2 nightly (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090227 Minefield/3.2a1pre ID:20090227035151), it’s thin and wimpy until I zoom in, then I start to see the Delicious design (still narrower) and the layout breaks.

Still, very very cool!
Jeff Walden wrote on February 27, 2009 at 9:41 pm :

MY EYES!
Dao wrote on February 28, 2009 at 5:38 am:

It’s border-colors, not border-color, and thus the link to w3.org is wrong.
mesme wrote on March 2, 2009 at 10:46 am:

The 90s just called, they want their flaming logo back.
rsayre wrote on March 3, 2009 at 11:50 pm :

that’s hot
Schmoo wrote on March 4, 2009 at 2:12 am:

That’s nothing, you should try -moz-animated-reflection and -moz-dancing-jesus.
skierpage wrote on March 7, 2009 at 2:32 pm:

Now with latest Firefox 3.2a nightly Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090307 Minefield/3.2a1pre ID:20090307035349 the layout stays looking good zoomed in, but the font is much thinner and uglier and any zoom level than your screen shot.

Also, the dot on the ‘i’ appears as a diamond at high zoom, while your screenshot is a square, and the original seems round.
Matt Gaunt wrote on March 12, 2009 at 10:42 am:

Awesome looking css features, but why dont firefox use the appropriate css3 tags instead of their own prefix with the css tag??

Just curious, love the rounded corners sooo much!!!
rdoherty wrote on March 27, 2009 at 5:41 pm:

@skierpage:
The issue you describe sounds like a OS-level problem? On OSX Firefox 3.6 nightly the demonstration looks good to me.

@Dao:
I couldn’t find anything about border-colors on the W3C site, you are right. I’ve removed the link and noted it.

@Matt Gaunt
Browser vendors use a prefix when implementing a CSS spec that hasn’t been finalized.