?
Solved

fadded background

Posted on 2012-04-06
3
Medium Priority
?
187 Views
Last Modified: 2012-06-21
How do you get a fadded back ground appearance?

Similiar to this where it goes white to black.

http://www.agraind.com/

Thank you.
0
Comment
Question by:thenrich
3 Comments
 
LVL 10

Expert Comment

by:d4durvesh
ID: 37816015
The link you provided uses a background image. You too can do that by css.
0
 
LVL 9

Accepted Solution

by:
Seven price earned 1200 total points
ID: 37816069
http://www.ehow.com/how_5872589_apply-effect-image-photoshop-cs.html


http://www.tizag.com/cssT/background.php

http://www.mightymeta.co.uk/fading-button-background-images-with-css3-transitions/


jquery version
<a href="#" ID="fadeTable" title="click to fade col1">Click to fade Column 1</a>
<table width="400px"  border="1" cellspacing="0" cellpadding="1"
                      summary="This is my test table">
  <caption align="top">
  My Caption
  </caption>
  <tr>
    <th scope="col" class="row0 col1" >Col 1</th><th scope="col">Col 2</th>
  </tr>
  <tr>
    <td class="row1 col1" >one</td><td>Uno</td>
  </tr>
  <tr>
    <td class="row2 col1" >two</td><td>Dos</td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
 $(document).ready(function(){
    // requires http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js
    var iAniSpeed = 2000;
    var sBgColor = 'gold';
    $('#fadeTable').click(function(){
      $('td.col1').animate( { backgroundColor: sBgColor }, iAniSpeed);
        return false;      
    });
});
</script>

hope this helps
0
 
LVL 12

Assisted Solution

by:Amick
Amick earned 800 total points
ID: 37816091
Here's the way to do it for several browsers:
Starting at the top fade from white #FFFFFF at 0% to  gray #404040 at 100% linearly

/* IE10 */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #404040 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #404040 100%);

/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #404040 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #404040));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #404040 100%);

/* Proposed W3C Markup */
background-image: linear-gradient(top, #FFFFFF 0%, #404040 100%);
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question