Gradient fill?

[Bob Altman]

Hi all,

Here's another rank beginner question. What is the standard way to fill a
client-side table cell with a horizontal gradient background?

TIA - Bob

[Jialiang Ge [MSFT]]

RE: Gradient fill?

Good afternoon Bob

There are several methods to create a horizontal gradient background for a
client-side table cell:

**** METHOD 1. Use CSS ****
If you're fine with restricting to IE then we can create gradients using
CSS filters (the Microsoft homepage did this for a long while): see
http://msdn.microsoft.com/en-us/libr...97(vs.85).aspx.
This only works for IE. It cannot be rendered by Firefox, Safari, etc.

However, some community members enhanced this solution by adding the
cross-browser support:

http://weblogs.asp.net/pleloup/archive/2005/12/22/433775.aspx

<quote>
This has been tested and verified to work in MSIE6, Firefox 1.0.7, Safari
2.0.1, Opera 7.5 & 8.5 on Windows 2K, XP and OS X.
</quote>

Strength: We can dynamically define the gradient color range.
Weakness: The performance is relatively lower than METHOD 2

**** METHOD 2. Stretch a static image to fill the table cell ****
If you know what the start and end colors are in advance, we can pre-design
an image with the expected gradient color range, then load and stretch the
static image to the table cell.

Strength: Better performance.
Weakness: The background image need to be pre-designed, so we cannot
dynamically change the color range of the gradient effect.

By the way, some people may suggest using GDI+ to programmaticall y create
such an image in method 2 so that we can dynamically change the start color
and the end color. For example: http://www.devx.com/vb2themax/Tip/18733.
Please note that this is not an supported behavior. GDI+ is not supported
to be used in ASP.NET, ASP, or windows service. This may lead to some
unexpected results.

http://msdn.microsoft.com/en-us/library/system.drawing.aspx

Please let me know whether the suggestions above are helpful to you. If you
have any other questions or concerns, DON'T hesitate to tell me.

Regards,
Jialiang Ge (jialge@online. microsoft.com, remove 'online.')
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
msdnmg@microsof t.com.

=============== =============== =============== =====
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subs...#notifications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://support.microsoft.com/select/...tance&ln=en-us.
=============== =============== =============== =====
This posting is provided "AS IS" with no warranties, and confers no rights.

[Bob Altman]

Re: Gradient fill?

""Jialiang Ge [MSFT]"" <jialge@online. microsoft.comwr ote in message
news:0pOhvyoBJH A.1696@TK2MSFTN GHUB02.phx.gbl. ..

Good afternoon Bob
>
There are several methods to create a horizontal gradient background for a
client-side table cell:
>
**** METHOD 1. Use CSS ****
[snip]
**** METHOD 2. Stretch a static image to fill the table cell ****
[snip]

Thanks Jialiang, that's just what I was looking for.

[Bob Altman]

Re: Gradient fill?


""Jialiang Ge [MSFT]"" <jialge@online. microsoft.comwr ote in message
news:0pOhvyoBJH A.1696@TK2MSFTN GHUB02.phx.gbl. ..

**** METHOD 2. Stretch a static image to fill the table cell ****
If you know what the start and end colors are in advance, we can
pre-design
an image with the expected gradient color range, then load and stretch the
static image to the table cell.
>
Please let me know whether the suggestions above are helpful to you. If
you
have any other questions or concerns, DON'T hesitate to tell me.

Hi Jialiang,

I posted a follow-up question over in the
microsoft.publi c.dotnet.framew ork.aspnet newsgroup (since this is an ASP.Net
question).

[Jialiang Ge [MSFT]]

Re: Gradient fill?

Hi Bob,

I've replied your follow-up question in the asp.net newsgroup. If you have
any other questions or concerns, please DON'T hesitate to tell me.

Regards,
Jialiang Ge (jialge@online. microsoft.com, remove 'online.')
Microsoft Online Community Support

=============== =============== =============== ====
Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
msdnmg@microsof t.com.

This posting is provided "AS IS" with no warranties, and confers no rights.
=============== =============== =============== ====

[Mark McGinty]

Re: Gradient fill?


"Bob Altman" <rda@nospam.nos pamwrote in message
news:uSjwWNsBJH A.4340@TK2MSFTN GP02.phx.gbl...

""Jialiang Ge [MSFT]"" <jialge@online. microsoft.comwr ote in message
news:0pOhvyoBJH A.1696@TK2MSFTN GHUB02.phx.gbl. ..

>Good afternoon Bob
>>
>There are several methods to create a horizontal gradient background for
>a
>client-side table cell:
>>
>**** METHOD 1. Use CSS ****
>[snip]
>**** METHOD 2. Stretch a static image to fill the table cell ****
>[snip]

>
Thanks Jialiang, that's just what I was looking for.

If you make the static image a transparent gray-scale gradient (.gif or
..png) with white as the transparent color, you can stretch it to fit inside
of a DIV with background-color set to anything you want -- thus giving you
dynamic choice of gradient color. (The only thing that remains static is
the pattern density of the gradient.)


-Mark