Mozilla Webdev

CSS3 Awesome Test

• By Ryan Doherty

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

{

About Ryan Doherty

Foodie, wino, frontend performance and Personas.

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. Both comments and pings are currently closed.

10 Responses to “CSS3 Awesome Test”

1. 

   Wonderful!

   Tomer on February 27th, 2009 at 5:14 pm
2. 

   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!

   skierpage on February 27th, 2009 at 6:18 pm
3. 

   MY EYES!

   Jeff Walden on February 27th, 2009 at 9:41 pm
4. 

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

   Dao on February 28th, 2009 at 5:38 am
5. 

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

   mesme on March 2nd, 2009 at 10:46 am
6. 

   that’s hot

   rsayre on March 3rd, 2009 at 11:50 pm
7. 

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

   Schmoo on March 4th, 2009 at 2:12 am
8. 

   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.

   skierpage on March 7th, 2009 at 2:32 pm
9. 

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

   Matt Gaunt on March 12th, 2009 at 10:42 am
10. 

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

    rdoherty on March 27th, 2009 at 5:41 pm