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:

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