Gradient fill?

Discussion in 'ASP General' started by Bob Altman, Aug 25, 2008.

  1. Bob Altman

    Bob Altman Guest

    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
    Bob Altman, Aug 25, 2008
    #1
    1. Advertising

  2. 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/library/ms532997(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 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/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 (, 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:
    .

    ==================================================
    Get notification to my posts through email? Please refer to
    http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#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/default.aspx?target=assistance&ln=en-us.
    ==================================================
    This posting is provided "AS IS" with no warranties, and confers no rights.
    Jialiang Ge [MSFT], Aug 25, 2008
    #2
    1. Advertising

  3. Bob Altman

    Bob Altman Guest

    ""Jialiang Ge [MSFT]"" <> wrote in message
    news:...
    > 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, Aug 25, 2008
    #3
  4. Bob Altman

    Bob Altman Guest

    ""Jialiang Ge [MSFT]"" <> wrote in message
    news:...
    > **** 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).
    Bob Altman, Aug 26, 2008
    #4
  5. 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 (, 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:
    .

    This posting is provided "AS IS" with no warranties, and confers no rights.
    =================================================
    Jialiang Ge [MSFT], Aug 26, 2008
    #5
  6. Bob Altman

    Mark McGinty Guest

    "Bob Altman" <> wrote in message
    news:...
    > ""Jialiang Ge [MSFT]"" <> wrote in message
    > news:...
    >> 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
    Mark McGinty, Aug 29, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. go_d2
    Replies:
    1
    Views:
    431
    Alvin Bruney [MVP]
    Apr 3, 2004
  2. Woody Splawn

    How fill with gradient?

    Woody Splawn, May 9, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    707
    SStory
    Jul 1, 2004
  3. Wayne  Wengert

    Create Gradient Background on Web Page

    Wayne Wengert, Sep 8, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    12,570
    Wayne Wengert
    Sep 8, 2004
  4. =?Utf-8?B?RG90bmV0IFdhbmRlcmVy?=

    I'm Envious of the nice ASP.NET gradient toolbars

    =?Utf-8?B?RG90bmV0IFdhbmRlcmVy?=, Nov 15, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    4,421
    Scott M.
    Nov 15, 2004
  5. moondaddy
    Replies:
    9
    Views:
    600
    Steven Cheng[MSFT]
    Sep 14, 2007
Loading...

Share This Page