Creating a linear transparent gradient to a div

Question

I'd like to create a linear transparent gradient to a div. Is there any way to do that with jquery? Or should I use some other library like raphaeljs? I'd like to achieve an effect like the following:

Answer 1

Why not keep it light and browser compatible.

div
{
    backgroud-image: url('images/gradient.png');
    background-repeat: repeat-x;
    background-position: top right;
}

Answer 2

You can do it with CSS3:

Eg

div {
    opacity: 0.5;
    background: #999; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
}

http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

http://gradients.glrzad.com/

http://www.colorzilla.com/gradient-editor/

http://css-tricks.com/css3-gradients/

Answer 3

I created it using jquery and 112 divs. A parent div for the ten lines of text divs each more transparent, and a background div with 100 divs each more transparent.

http://jsfiddle.net/generalhenry/bDd5w/

Answer 4

The tricky bit here is that the gradient in your example is evenly mapped to the text as well as the container. It's easy to map a transparent gradient to the background property, as lots of people have shown, but that will leave the text unchanged.

Unfortunately, I don't think there's any straightforward way to get the gradient effect that you want without making some compromises, depending on your needs they may be worthwhile solutions. So to that end, here are two examples of how to achieve the effect shown in your example image, both using the <canvas> .

1. Faking it

Demo on JSLint.

This is simple, you position a <canvas> element over your text block and draw in a gradient from fully transparent to the color of the background below the text block. It's not really transparent, so it doesn't actually reveal any information below, but if you're trying to fade to a solid, predetermined color, then this works pretty well.

2. Canvas text

Demo on JSLint

This example is more complicated, but fully replicates the transparent effect shown in your example. Essentially, it ditches the HTML text block entirely, and just draws the whole shabang onto the <canvas> . However, it has some downsides:

1. The canvas doesn't seem to like wrapping text, so you'd have to specify individual lines.

2. Canvas text may still have somewhat murky browser implementations.

3. Accessibility & SEO, though you could easily write a jQuery plugin for transforming regular DOM elements with text into this solution at runtime.

Answer 5

As bArmageddon pointed out, the accepted solution does not solve the problem - it just fades the background. A simple solution would be to use :before or :after to add the gradient over the text:

div {
    position: relative;
}
div:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: url("transparent_fade.png") repeat-x;
}

Answer 6

不确定你究竟在寻找什么，但看看Gradienter jQuery插件 。

Answer 7

I created this using Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ checkout if u like it

** edit **

I created it by adding a rectagle with gradient and making it as same size as the div