Solved

fadded background

Posted on 2012-04-06
3
176 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:
sevensnake77 earned 300 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 200 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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

744 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now