« Flex 2 Style Explorer Beta 3 Available | Main | Beyond Styling: Applying Filters on Flex Components »
May 09, 2006
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.
Posted by Peter Baird at May 9, 2006 06:51 PM
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
Posted by: John Barrett at May 9, 2006 07:31 PM
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.
Posted by: Peter Baird at May 9, 2006 07:35 PM
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"
Posted by: Steven Erat at May 9, 2006 08:03 PM
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
Posted by: John at May 9, 2006 08:07 PM
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.
Posted by: SiamesePurr771 at May 9, 2006 10:58 PM
The fonts aren't embeded so at my machine it looks crappy with a Times New Roman as font.
Posted by: Martijn at May 9, 2006 11:10 PM
Nice, but I think the font isn't embedded? I just see a default Times New Roman font..
Posted by: Jonas at May 10, 2006 12:55 AM
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)
Posted by: Quentin at May 10, 2006 01:30 AM
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! :)
Posted by: Carlos Rovira at May 13, 2006 02:42 AM
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. ;-)
Posted by: Peter Baird at May 13, 2006 06:32 AM
What's up with the font on this page????
(check in FF)
Posted by: Ganesha at May 26, 2006 02:52 PM
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.
Posted by: jason at September 25, 2006 12:31 PM
Oh my gosh! That is sooo cool... THANKS!
Posted by: Mitch at February 2, 2007 12:23 PM
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.
Posted by: mitch at February 7, 2007 08:30 AM
great theme, thanks for sharing ! For some reason the property "fontSize" in Application crashed my Air application though..
Posted by: Dennis van Nooij at September 4, 2007 05:00 AM
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?
Posted by: Dani at July 27, 2008 11:25 PM