CSS3 Awesome Test

Friday, February 27, 2009
By rdoherty

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.

This entry was posted on Friday, February 27th, 2009 at 3:50 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

10 Responses to “CSS3 Awesome Test”

  2. skierpage
    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!

    #189031
  4. Dao
    February 28, 2009 at 5:38 am

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

    #189093
  5. mesme
    March 2, 2009 at 10:46 am

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

    #189386
  6. rsayre
    March 3, 2009 at 11:50 pm

    that’s hot

    #189693
  7. Schmoo
    March 4, 2009 at 2:12 am

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

    #189702
  8. skierpage
    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.

    #190170
  9. Matt Gaunt
    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!!!

    #190864
  10. rdoherty
    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.

    #193401