In my previous post, I explained how to create nice gradients using Degrafa’s CSSSkin. Once again, CSSSkin is one of the very powerful, yet overlooked function of the Degrafa framework (look at this, or that for those who would still doubt it). But it has in my opinion a limitation: it works almost only for containers (Canvas, Panel, List, etc). But as it stands by default in the latest version (Beta 3.1), it doesn’t work for buttons (Button, ButtonBar and the like). When it comes to the define CSS tags like upSkin, downSkin, selectedOverSkin, etc, there’s no choice but to use tailor made classes extending GraphicBorderSkin like in this example. But actually, there’s a rather easy way to use CSSSkin defined in a CSS file only, by simply extending CSSSkin.

This is why I’ve created the following class, CSSButtonSkin:

asdf

asp

fds

And now an example on how to use it (click to launch then right-click to see the code):

Degrafa CSSButtonSkin Example (click to Launch)

Note that the “child skin” (upSkin for example) inherits its parent’s styles, so there’s no need to re-declare them.

Now that was easy, wasn’t it?

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Degrafa is a fantastic tool and has become for the past few months a core component of all my developments at Tailgate Technologies. Still, some very powerful tools among Degrafa Framework seem to be a bit underused by most users (at least most bloggers). I’m thinking here of Advanced CSS with CSSSkin class. Or at least, there rather is a relative lack of examples and documentations on how to use it. You can still find on Degrafa’s website Ben Stuki’s example along with Juan Sanchez’ one, but when you try and watch the screencast tutorials you unfortunately end up hitting dead ends. One thing in particular took me a significant while to figure out: how to set elaborate gradients (for a background color for example), so I thought that sharing my discoveries (and improvements in a further post) might be useful to some of you.

First, a very simple example:

Degrafa Gradients Example 1 (click to Launch)

asdf

asp

fds

As you can see, nothing overly complicated here. A simple gradient, from white to red and from left to right. Two things to notice though:

1. You need to define the CSSSkin class with:

   border-skin: ClassReference("com.degrafa.skins.CSSSkin");

2. IMPORTANT: background-color needs to be a string (actually, it’s an array of strings, but we’ll come back to this a bit later):

   background-color: "#FFFFFF #FF0000";

Let’s now change the gradient’s orientation:

Degrafa Gradients Example 2 (click to Launch)

asdf

asp

fds

Here we’ve added a new parameter at the beginning of the string: 90deg (without space!). It indicates the orientation of the gradient. Here 90 degrees clockwise. Could be the usual positive or negative value for orientation (90deg, -90deg, 180deg, -180deg…).

Now, the other paremeters:

Degrafa Gradients Example 3 (click to Launch)

asdf

asp

fds

No visible change here. Still, two new parameters appear for each color:

1. The first parameter, in percent (without space!) is the percentage of the surface covered by the color (more about that in the next example)
2. The second one if the opacity (alpha) of the color, again in percent.

Let’s add a third color:

Degrafa Gradients Example 4 (click to Launch)

asdf

asp

fds

We’ve added a nice yellow, which is at its maximum “blending” with red and white just in the middle of the surface (hence the 50%). It works pretty much like it would do in Photoshop or Fireworks, but code wise.

Last, an example of how I recreate the kind of gradients used for a famous phone (I’m working at the moment on a pet project, a Flex version of the UI of this famous phone… I’ll keep you posted…):

Degrafa Gradients Example 5 (click to Launch)

asdf

asp

fds

I told you that background-color was actually an array of strings. Here you get an example of that. All of the opacity parameters of the string are set below 100%. They are partly transparent. Which means you can quickly change the “theme” color by adding another “global” color after the first string (could be another gradient as well).
Replace the “#FFFFFF” at the end of background-color by “#FF0000″ and see the result for yourself…

Pretty powerful, no? A few change in a CSS file and the result is already quite significant. Think what you can do by also simply play with individually rounded corners, variable border width, etc… Next time, I’ll show you how to simply extend CSSSkin in order to fully skin buttons using Degrafa and CSS.

Stay tuned!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.