4-color gradient CSS customizable Programmatic Skin-set for Flex 1.5

While you can go pretty far in visual design of Flex components using straight CSS, there are some limitations. It an attempt to address those limitations, I’ve created a programmatic skin set for Flex that can be easily customized with CSS for effects such as the screenshot below:
flexSkinSet.png


For you designers out there, take a look at the sample to play around with some of the possibilities with this skinset, that are not available with out-of-the-box CSS. For the developers, download the skinset and take a peak at the mxml file to see what css properties are available. And then feel free to use these skins to achieve the visual design you’ve always wanted.

The additional properties now available when using this skinset are:

  • fill-colors: 4-color gradients (four color hex values)
  • ratios: the points along the fill where each color falls in the gradient (a number between 0 and 255)
  • drop-shadow: added to the button and accordion control. On the accordion, the dropShadow falls under the selected accordion header (true or false)
  • border-alpha: the alpha value on a button’s border. Allows you to have a borderless button when set to zero. (a number between 0 to 100)
  • highlight: allows for a highlight along the top of a button or a ComboBox, NumericStepper, or Tab (true or false)
  • right-fill-colors: allows for separate left and right-side colors (the arrow control) on a combo-box (four color hex values)
  • divide-line: On a comboBox, the option of having or not having the divided line between the arrow and the rest of the control (true or false)
  • hover-glow, glow color: Allows for a glow over on rollover on an accordion header, and define the color (true or false, color hex value)
  • grip: allows for whether or not the scroll thumb has grip lines (true or false)
  • arrow-alpha: On a Scrollbar, the arrows can also have an alpha value (number 0 – 100)
  • track-fill-colors: the ScrollBar track could also have 4 colors (4 hex values)
  • corner-radius: Accordion Headers now also respect cornerRadius. (number)

Enjoy! Implement those design you’ve always wanted to. And if you use this skin set for a design, leave a comment and point us all to it. We’d love to see what you’re coming up with.

Oh, and I should note, for performance reasons, since we’re doing a whole bunch of setStyles here, I haven’t tied in the tabs to the sliders, but the CSS styles for tabs do work. They aren’t being changed intentionally.

Once again: Play with the samples

Download the Skinset

7 Responses to 4-color gradient CSS customizable Programmatic Skin-set for Flex 1.5

  1. Campbell says:

    Sweet :o)

    One small bug I found while playing, the Tab controls dont seem to recieve all of the skinning parameters from the sliders, I have uploaded an image temporarly to:
    http://xsive.co.nz/msn/bug.jpg
    So you can see the settings and the output.
    Still nice work I will have to have a proper play tonight.

    Campbell

  2. Peter Baird says:

    Good catch. I forgot to mention that. Yes, the sliders aren’t chaning the styles of the Tabs, and that was actually intention on the sample. We’re calling a whole lot of setStyle() here, and that creates a big performance hit. And the only way to dynmically set a Tab style once the app has been compiled is to do a global setStyle() (as opposed to all other comments that can be referenced by their ID). So, I stripped out the slider changes on the tabs, since it really lagged. Anyway, I’ve reflected the blog entry to reflect that. Thanks.

  3. Laurent says:

    Indeed, very nice.

    Is this compatible with Flex Builder 2?
    BOX component seems to not take into account gradient, is this normal?

    Thanks for your help.

  4. Bryan Ledford says:

    A Flex Builder 2 example would be really helpful. Also, could you release the source of the sample file.

  5. Faraz says:

    its good

  6. Warren says:

    I really like the sample skin set. Could you tell us what color values, etc. you used? Any hints for setting up other color patterns that look good together for the non-artistic types (me!)

  7. Trying to find out how to change the header font color when selected (not MouseDown, but it’s selected Up state).