[Pro] Graduation in html box

Freeway
1

Hi, I think the subject says it all. Is it possible to have a graduated background in an html box?
thanks
Trev

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

2

Sure. The easiest and most cross-browser way is to create an image
that has your gradient in it that’s designed to tile at a 90° angle
from your gradient axis.

So if you have a vertical fade, you would create an image that is as
tall as the gradient, say 600px and approximately 25px wide.

Create your gradient using Photoshop and save the result using Save
for Web, saving as a JPEG or GIF. (If a GIF, be sure to use enough
colors so you don’t see banding, and make sure that dithering is on.)

Then click once on your HTML item in Freeway, choose the second tab
from the left in the Inspector (the paintbrush) and use the Background
Image picker to locate your image. Set the tile controls to tile left
to right, and either stick to the top or the bottom of the box,
depending on your design.

Set the background color of the box to match the end color on the
“open” end of the gradient. By this I mean the following: if you have
set your gradient to go from #333 to #ccc, from bottom to top, and
have pinned your background image to the bottom of the HTML box, then
set the background-color of the HTML box to #ccc to match, so if the
content inside the box grows beyond the height of your background
image, the background color will fill in the resulting gap.

Walter

On Feb 16, 2011, at 10:40 AM, Trevreav wrote:

Hi, I think the subject says it all. Is it possible to have a
graduated background in an html box?
thanks
Trev

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

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

3

Thanks for that Walter, I’ll experiment tomorrow with that one. I was
looking for a straight graduated fill and bypassed the tiling jpeg
option completely.
Trev

On 16 Feb 2011, at 16:03, Walter Lee Davis wrote:

Sure. The easiest and most cross-browser way is to create an image
that has your gradient in it that’s designed to tile at a 90° angle
from your gradient axis.

So if you have a vertical fade, you would create an image that is as
tall as the gradient, say 600px and approximately 25px wide.

Create your gradient using Photoshop and save the result using Save
for Web, saving as a JPEG or GIF. (If a GIF, be sure to use enough
colors so you don’t see banding, and make sure that dithering is on.)

Then click once on your HTML item in Freeway, choose the second tab
from the left in the Inspector (the paintbrush) and use the
Background Image picker to locate your image. Set the tile controls
to tile left to right, and either stick to the top or the bottom of
the box, depending on your design.

Set the background color of the box to match the end color on the
“open” end of the gradient. By this I mean the following: if you
have set your gradient to go from #333 to #ccc, from bottom to top,
and have pinned your background image to the bottom of the HTML box,
then set the background-color of the HTML box to #ccc to match, so
if the content inside the box grows beyond the height of your
background image, the background color will fill in the resulting gap.

Walter

On Feb 16, 2011, at 10:40 AM, Trevreav wrote:

Hi, I think the subject says it all. Is it possible to have a
graduated background in an html box?
thanks
Trev

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

4

That’s a CSS3 feature, and only available to WebKit based browsers,
maybe also Firefox 4 (still in alpha or beta).

Walter

On Feb 16, 2011, at 1:41 PM, Trevor Reaveley wrote:

I was looking for a straight graduated fill

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