Flex Stuff by Gilles Guillemin

Warning: curl_setopt() [function.curl-setopt]: Unable to access /tmp/binget-cookie.txt in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 135

Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 136

Warning: curl_setopt() [function.curl-setopt]: Unable to access /tmp/binget-cookie.txt in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 135

Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 136

Warning: curl_setopt() [function.curl-setopt]: Unable to access /tmp/binget-cookie.txt in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 135

Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 136

Warning: curl_setopt() [function.curl-setopt]: Unable to access /tmp/binget-cookie.txt in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 135

Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 136

Warning: curl_setopt() [function.curl-setopt]: Unable to access /tmp/binget-cookie.txt in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 135

Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/flexstu1/public_html/wp-content/plugins/sniptorg-highlighted-code-embed/snipt_org_embed.php on line 136

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:

';document.write(content);
[code snippet: http://snipt.org/Smi]

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:

';document.write(content);
[code snippet: http://snipt.org/Smm]

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:

';document.write(content);
[code snippet: http://snipt.org/Smn]

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:

';document.write(content);
[code snippet: http://snipt.org/Smo]

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…):

';document.write(content);
[code snippet: http://snipt.org/Smp]

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.