Versions

CSS3_Gradient_RGBa_Bundle.zip (2013-03-18) (Downloaded 221 times)

Contains:

  • CSS3 Gradient Backgrounds (item-action) - v. 0.9
  • CSS3 RGBa Backgrounds (item-action) - v. 0.3

Compatible: Pro 4, Pro 5, Pro 5.5, and Pro 6

CSS3_Gradients.fwaction.zip (2012-03-16) (Downloaded 8 times)

Contains:

  • CSS3 Gradient Backgrounds (item-action) - v. 0.7

Compatible: Pro 4, Pro 5, and Pro 5.5

CSS3_Gradients.fwaction.zip (2011-07-07) (Downloaded 1 time)

Contains:

  • CSS3 Gradient Backgrounds (item-action) - v. 0.6

Compatible: Pro 4 and Pro 5

CSS3_Gradients_04.zip (2010-09-10) (Downloaded 3 times)

Contains:

  • CSS3 Gradient Backgrounds (item-action) - v. 0.4

Compatible: Pro 4 and Pro 5

CSS3_Gradients_03.fwaction.zip (2010-08-16) (Downloaded 0 times)

Contains:

  • CSS3 Gradient Backgrounds (item-action) - v. 0.3

Compatible: Pro 4 and Pro 5

CSS3_Gradients_02.fwaction.zip (2010-08-13) (Downloaded 1 time)

Contains:

  • CSS3 Gradient Backgrounds (item-action) - v. 0.2

Compatible: Pro 4 and Pro 5

CSS3_Gradients.fwaction.zip (2010-08-05) (Downloaded 0 times)

Contains:

  • CSS3 Gradient Backgrounds (item-action) - v. 0.1

Compatible: Pro 4 and Pro 5

Author: max fancourt

developer cms template javascript commercial server prototype content management

This Action allows you to use the new CSS3 gradient properties, without having to hand code it on any layered table or normal layer.

I have now added the gradient directional control plus added the optional checkbox to turn the IE non css3 (IE specifics filters which control the gradients in IE6-7-8-9) styles on or off, plus you are now able to control the opacity of the start & end graduation.

Updates to v0.6

  1. Opera support
  2. Background colour
  3. Class or ID reference
  4. Opacity bug fix

Updates to v0.7

  1. added IE 10 support
  2. Tidied up the output

Whats new in v0.9

In latest version of the CSS3 Gradient Action for Freeway6, there is a completely new parameter called custom gradients in this latest release. Just draw a box apply the gradient action and click on custom gradient checkbox. For testing purposes just use the example styles that are written in the popup window and then hit preview… What you should see is a massive difference in styling complexity, gradient permutations and possibilities. Alternatively you can use the actions built in controls to generate the styles.

Also bundled with this action is the Freeway6 compatible CSS3 RGBa action.

You can generate complicated custom gradients from online sites like these: http://www.colorzilla.com/gradient-editor/ http://gradients.glrzad.com http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

7 Comments

Lode Rosel

Hello, Opacity start/end is not working, (FW5.5 Pro)

Thanks, Lode

Simon Clay

Hi, finding the same problem. Can't see start/end opacity

Simon Clay

hmm, ok. see it now. I guess restart cured it

Nice, thanks.

James Wages

A great start, but honestly it is too limiting with only 2 color stops (Start & End). Often times you want a 3-stop gradient. For example, Fade from BLACK to Gray, then back to BLACK again.

To give you some ideas, check out this online CSS3 gradient editor: http://www.colorzilla.com/gradient-editor/

max fancourt

ok I will add some extra gradient stops max

James Wages

I am now testing the latest 0.9 version of the Action, and I have some questions. Why does the Action offer a choice of RGBa or HEX colors in the Actions palette? What is the advantage of one over the other? Also, what is the advantage of using CLASS over ID? Thanks.

max fancourt

HI james 1. The advantage RGBa has over HEX is that it allows you to specify opacity. So for example you specified a grad of magenta to cyan but on the cyan you adjusted the opacity to 50% then as the solid magenta went to the cyan it would change its opacity from 100 through to 50%. Secondly if you specify a background colour as well, for example green as the grad went to the cyan it would show more and more of the background through.

  1. Now for CLASS over ID… an ID on an item must be unique. That is why when you create an element on your freeway page, freeway will assign a unique name. But if you had a scenario where by you had 20 div or table elements on your freeway page and you wanted every item to have the same grad, then it would be madness to create 20 identical css grad specifications. So what you do is on the first item you use the action as normal but specify CLASS, this will then reveal an extra field where by you can either use the default class name or create one of your own, then on the second item apply the Gradient action choose CLASS again and make sure it matches the first box, but on this box after you have done the above uncheck the active checkbox.

What this will do is stop the action writing the same css specification but it will apply a class to that item. The result being that both boxes use the same css grad styles. and seeing that the gad css is a fairly big this will help to reduce the amount css needed to create multiple duplicate grads. the other advantage is if decide you ned to tweak the grad. then you adjust the first one and hey-presto they are all changed.

There are some visual tweaks that need to be done to this action as things are not correct but in the next release I will be sorting them out.

Sign In or to comment.