Connecting Tech Pros Worldwide Help | Site Map

Gradient fill?

 
LinkBack Thread Tools Search this Thread
  #1  
Old August 25th, 2008, 06:25 AM
Bob Altman
Guest
 
Posts: n/a
Default Gradient fill?

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


  #2  
Old August 25th, 2008, 08:35 AM
Jialiang Ge [MSFT]
Guest
 
Posts: n/a
Default 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/archi...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 programmatically 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/libr...m.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@microsoft.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.

  #3  
Old August 25th, 2008, 03:05 PM
Bob Altman
Guest
 
Posts: n/a
Default Re: Gradient fill?

""Jialiang Ge [MSFT]"" <jialge@online.microsoft.comwrote in message
news:0pOhvyoBJHA.1696@TK2MSFTNGHUB02.phx.gbl...
Quote:
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.


  #4  
Old August 26th, 2008, 01:15 AM
Bob Altman
Guest
 
Posts: n/a
Default Re: Gradient fill?


""Jialiang Ge [MSFT]"" <jialge@online.microsoft.comwrote in message
news:0pOhvyoBJHA.1696@TK2MSFTNGHUB02.phx.gbl...
Quote:
**** 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.public.dotnet.framework.aspnet newsgroup (since this is an ASP.Net
question).


  #5  
Old August 26th, 2008, 05:55 AM
Jialiang Ge [MSFT]
Guest
 
Posts: n/a
Default 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@microsoft.com.

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

  #6  
Old August 29th, 2008, 10:45 PM
Mark McGinty
Guest
 
Posts: n/a
Default Re: Gradient fill?


"Bob Altman" <rda@nospam.nospamwrote in message
news:uSjwWNsBJHA.4340@TK2MSFTNGP02.phx.gbl...
Quote:
""Jialiang Ge [MSFT]"" <jialge@online.microsoft.comwrote in message
news:0pOhvyoBJHA.1696@TK2MSFTNGHUB02.phx.gbl...
Quote:
>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


 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.