[Pro] styles with gradient backgrounds

Hi Everyone

Looking to create a style to which I can utilize the css3 gradients, I can create a style with background image no problem at all but want to use a style with all of the background images that are required for the css3 gradients : i.e -webkit-background-image -moz-background-image etc but when published freeway only allows one background-image. When reading the code for the css3 gradient it assigns it a # ie item and then the code, is there anyway of implementing this as a style.


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Steve,
The trick is to use the extended dialog in the edit styles dialog to add the vendor specific background image styles. You can add them all separately or strung together is they share the same gradient values.
Alternatively you can use the CSS3 Gradients Action - http://actionsforge.com/actions/view/201-css3-gradients
Regards,
Tim.

On 16 Jun 2012, at 19:49, Steve Mc wrote:

Looking to create a style to which I can utilize the css3 gradients, I can create a style with background image no problem at all but want to use a style with all of the background images that are required for the css3 gradients : i.e -webkit-background-image -moz-background-image etc but when published freeway only allows one background-image. When reading the code for the css3 gradient it assigns it a # ie item and then the code, is there anyway of implementing this as a style.


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Because CSS “cascades” you can set up all the other attributes for your
style in Freeway Pro - so it will be functional - then add just the
background gradients to the head of the document through the Page > HTML
Markup > Before … be sure to write it properly and enclose it with
the tag. Do that to a Master Page and the style attributes will be
available on every page.


Ernie Simpson

On Sat, Jun 16, 2012 at 3:13 PM, Tim Plumb email@hidden wrote:

Hi Steve,
The trick is to use the extended dialog in the edit styles dialog to add
the vendor specific background image styles. You can add them all
separately or strung together is they share the same gradient values.
Alternatively you can use the CSS3 Gradients Action -
http://actionsforge.com/actions/view/201-css3-gradients
Regards,
Tim.

On 16 Jun 2012, at 19:49, Steve Mc wrote:

Looking to create a style to which I can utilize the css3 gradients, I
can create a style with background image no problem at all but want to use
a style with all of the background images that are required for the css3
gradients : i.e -webkit-background-image -moz-background-image etc but when
published freeway only allows one background-image. When reading the code
for the css3 gradient it assigns it a # ie item and then the code, is there
anyway of implementing this as a style.


FreewayActions.com - Freeware and commercial Actions for Freeway Express &
Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and
explore - http://www.freewaystyle.com


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Guys

Have got this working using CSS3 Gradient action, works fine apart from ie9 for some strange reason when you have a corner say 7px you can still see a square corner and the gradient with a rounded corner, i’ve included a background color as a fall back just incase the browser does not support css gradients.


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Guys

Have got this working using CSS3 Gradient action, works fine apart from ie9 for some strange reason when you have a corner say 7px you can still see a square corner and the gradient with a rounded corner, i’ve included a background color as a fall back just incase the browser does not support css gradients.


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

works fine apart from ie9 for some strange reason

You may have to add this for full IE9 compatibility

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Post a link to your example so we can take a look.

David


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi there

After a bit messing about the only way I can find to get a gradient to work with css3 corners in ie9 is to use a background png of the gradient. Unless someone else knows how :frowning:


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The simple fact is that while IE9 does support corner radius it does NOT support gradients.

Have a look at http://css3pie.com/ for a solution.

David


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And here is a FW page that uses Pie http://www.deltadesign.co/pietest.html

D


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mmm I’m liking that pie Dave.

Think I need to do a bit of tinkering and feed ie from a couple of my sites. Thanks for adding that link.

Al.


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Found a nice easy way which is food for thought and saves a bloat of code for .styles

background-image : url(Resources/gradient.png)
background-size : 100% 100%
border-radius : 7px
-webkit-border-radius : 7px
-moz-border-radius : 7px

works a dream on ie9 and other browsers also expands and contracts on text resize

This little issue had my head pummelled as I’m still learning. :slight_smile:

Steve


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Found a nice easy way which is food for thought and saves a bloat of code for .styles

But I thought you didn’t want to use background images?

D


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you can, change the order of the border-radius and the prefixed versions. Always put the non-prefixed version last, as that way when the other browsers catch up to the standard, they will get the correct, non-prefixed version.

Walter

On Jun 19, 2012, at 2:05 PM, Steve Mc wrote:

Found a nice easy way which is food for thought and saves a bloat of code for .styles

background-image : url(Resources/gradient.png)
background-size : 100% 100%
border-radius : 7px
-webkit-border-radius : 7px
-moz-border-radius : 7px

works a dream on ie9 and other browsers also expands and contracts on text resize

This little issue had my head pummelled as I’m still learning. :slight_smile:

Steve


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Dont really want to use background image so looking at pie, looking at implementing all variations within the .style which will cover all bases

Steve


tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options