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.
Comments
Hi,
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`-`
John
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.
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″
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,
John
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.
The fonts aren’t embeded so at my machine it looks crappy with a Times New Roman as font.
Nice, but I think the font isn’t embedded? I just see a default Times New Roman font..
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)
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!
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.
What’s up with the font on this page????
(check in FF)
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.
Oh my gosh! That is sooo cool… THANKS!
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.
great theme, thanks for sharing ! For some reason the property “fontSize” in Application crashed my Air application though..
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?