CSS3 Awesome Test

Ryan Doherty

10

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

* -moz prefix used.

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

Text-shadow code borrowed from css3.info.

10 responses

  1. Tomer wrote on ::

    Wonderful!

  2. skierpage wrote on :

    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!

  3. Jeff Walden wrote on ::

    MY EYES!

  4. Dao wrote on :

    It’s border-colors, not border-color, and thus the link to w3.org is wrong.

  5. mesme wrote on :

    The 90s just called, they want their flaming logo back.

  6. rsayre wrote on ::

    that’s hot

  7. Schmoo wrote on :

    That’s nothing, you should try -moz-animated-reflection and -moz-dancing-jesus.

  8. skierpage wrote on :

    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.

  9. Matt Gaunt wrote on :

    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!!!

  10. rdoherty wrote on :

    @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.