Mac OS X-looking CSS for Flex 2

As an experiment in CSS Styling, and to show off some of the new features of flex 2 styling, I’ve created a Mac OS X looking style sheet for Flex 2. It’s not perfect, but to the untrained eye, it’s pretty close. There are no images or skins used in this, it’s strictly CSS. With the next transparency features, and highlights, there’s a huge variety of look-and-feel that’s possible. Here’s to more flex apps that don’t look like flex apps!

Click here to download the the CSS and source to the below example

Click here to view an example application with the os x css file
(Flash Player 9 required)


[UPDATE] Thanks to all who pointed out some of the errors (I should have test on a PC first 😉 ). I’ve replaced the the swf and the zip. Apparently there’s a bug with embedding an image declaratively in the application tag, so I used a workaround for that. Also, the fonts should be showing now… but that has surfaced another bug (which I’ll file)… embedding a font and then apply a drop shadow to it makes the font disappear until you rollover it, so you’ll see some words missing until you rollover.

16 Responses to Mac OS X-looking CSS for Flex 2

  1. John Barrett says:

    Wow, that is so cool`-`
    I get this error:
    Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
    Firefox crashes, but when I click”dismiss all” in Safrai, I am able to view it.

    Wonderful aplication`-`

  2. Peter Baird says:

    Thanks for identifying the error. I’ll look into it. The CSS file should work fine on its own, though, since it looks like a load of an image that’s causing the error.

  3. Steven Erat says:

    Using Firefox 1.5.03 with Flash Player version 8,5,0,133, I also receive a series of Actionscript errors starting with “VerifyError: Error #1042: Not an ABC file. major_version=46 minor_version=16”

  4. John says:

    I downloaded the application,and compiled it, with no problems. Matbe the error is due to the browser.

    Thanks so much for sharing this, I really love it`-`
    I have been having some weird errors with flash 9.
    Thanks again,

  5. SiamesePurr771 says:

    Great work. Now we need a Windows-style CSS and an OSX CSS built into Flex Builder. That’ll put Flex closer to SWT, which we now know to have won the Java GUI competition.

  6. Martijn says:

    The fonts aren’t embeded so at my machine it looks crappy with a Times New Roman as font.

  7. Jonas says:

    Nice, but I think the font isn’t embedded? I just see a default Times New Roman font..

  8. Quentin says:

    Hi !
    Nice StyleSheet ! But the font I have when viewing the example app is not the good one, it looks like the default one… (Flash Player 9 – Firefox)

  9. Hi Peter,

    The results are really awesome, thanks for sharing this. I want to point only one thing: The round corners in some controls are a little strange, what do you think?

    thanks! 🙂

  10. Peter Baird says:

    Yep, you’re right. That’s a logged bug in Flex… if you play around a bit with cornerRadius’s in the Style Explorer you’ll see the same results. That’s something that will be fixed with the next release of flex, and this same css file will produce the correct results. Good eye. 😉

  11. Ganesha says:

    What’s up with the font on this page????

    (check in FF)

  12. jason says:

    When using a very long datagrid with the scroll bar the text in the datagrid roles under the column headings and shows through. When scrolled up the heading are unreadable as the text in the columns shows through.

  13. Mitch says:

    Oh my gosh! That is sooo cool… THANKS!

  14. mitch says:

    By the way, i changed the radius of the combobox from 17 down to 12 because it was just looking funky on the outer edges.

  15. Dennis van Nooij says:

    great theme, thanks for sharing ! For some reason the property “fontSize” in Application crashed my Air application though..

  16. Dani says:

    I use Adobe Reader 9.0 to read my online university books. If I open more than one PDF file, the second one blurs and runs to the top left slowly. If I highlight using the selection tool, it speeds this process up. Also if I use the right-hand scroll bar it leaves these streaks of horizontal lines? I’ve tried re-downloading. All my drivers are updated, and there is no hardware malfunction. What can I do to stop this?