Solved

fadded background

Posted on 2012-04-06
3
182 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

726 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