I've seen a neat effect at the end of the describing text here where the last line of the text is gradually increasingly transparent and i'm curious on how it's done.
There's been a discussion on the subject but i don't get the jsFiddle to work as supposed to and many of the other replies seem to miss the OP's intention.
Is it doable? And if so, is it doable without vendor prefixes?
Yes, you can do it, and without the vendor prefixes:
Place a div over the text area. In this div class="fadeout"> you put an image that has a gradient of increasing white, being transparent in the top of that image and only white (or the background-color of your page) at the bottom. The text in the underlying text area will look like being faded out.
The Image can be replaced by CSS-Gradient:
.fadeout {
background-image:
-moz-linear-gradient(center top , rgba(255, 255, 255, 0) 20%, #FFFFFF 95%);
}
but this has vendor-specific prefixes.
They're doing it using CSS3 background gradients but you could achieve the same effect using an image. Just a little png image would sort you out.
Let me explain.
I have a single div, called main. In this div you will find h1 tags and p tags.
At the top of the div, there is a gradient. Lower down, the image will fade into plain white with a border (meaning I can't just have no-repeat and then #FFF as background colour).
Therefore, I was wondering if it's possible to have the white section to continue forever without making an extremely large image and without creating a new div.
Note: The h1 and p tags will be transparent.
Yes it is...see this example.
http://techknack.net/css-trick-two-background-images/
You can do it this way also..
#id_test{
background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
}
Right now I have this CSS for a button:
background: #19558D url(../images/gradient.gif) repeat-x top left;
The gradient appears, but the background color doesn't. When I reload the page, the color appears for a split second, but then disappears to the gradient. How can I get both of them to work?
Ok, so you have several options:
1. Use Only Images:
You can do the job by editing the gradient so that it looks exactly how you like it to be, without any new CSS. (This would be the one you used to solve the problem).
2. Use Image on the top and the rest in solid color:
element{ background:#000 (url) top left repeat-x; }
This will place the image in url at the top, and make the rest of the element of a certain solid color. Be aware that if the image covers all of the element and isn't transparent, then the solid color will not be visible.
3. Make the gradient transparent/alpha:
If the gradient covers all of the element, you can make it transparent, or semi transparent, so that the CSS background-color is visible behind it. For example, if you make a gradient that goes from black to transparent, and then add a white CSS bg, then you will get a black to white gradient. Be aware that the only images that will work with this method are .png ones because they are the only ones that support alpha levels (partial transparencies).
is the GIF transparent? I use PNG format as PNG-24 allows alphablending masks, where as GIF only supports transparent or not (1/0)
But I think you need to post a link to it or a image of what it looks like, including the GIF.
We need some pixels specs, such as width and height to fully understand the problem.
I have a page setup that looks similar to this:
<body>
<div id="wrapper">
<!--- ... content ... -->
</div>
</body>
The body has a background color and a tiling image that adds some noise and grain to the background. On top of that, #wrapper has a linear gradient as background that goes from rgba(0,0,0,.3) to rgba(0,0,0,0) and the gradient expands over 24 pixels at the top of the div, which is at the top of the page --- to add a shadow.
My problem is, that the color that the background of #wrapper holds after the 24 pixel gradient is done, is not true transparency, even though the end color of the gradient has an alpha value of zero. What this leaves me with, is a not true transparent background on #wrapper, that leaves a visible "split-line" on the body-background at the spot where #wrapper stops.
How do I get the gradient to go in to full transparency? I would guess an alpha value of zero would do this. Also, using the transparent keyword doesn't solve it either.
Update
I have added pictures to show the problem. The first picture is the actual look, and the second significantly shows where the line is, because it's there, though very unclear on the first picture.
As you can see, the gradient doesn't go in to true transparency. Not when the to-color is specified as rgba(0,0,0,0) or transparent.
-- Chris Buchholz
Are you testing it in a webkit browser (chrome/safari), firefox, IE or Opera? As they all treat gradients differently.
I don't fully understand though I believe you should consider using CSS gradient generators online, most of them use solid colors, just replace the hex decimal with the new RGBA().
That's the best way to learn how you're going wrong.
Other then that If you've defined opacity on the wrapper div that could be the Issue.
That's the best I can do
You didn't supply your CSS code. That will help spot the problem better. But one of possible issue is probably the stacking of CSS properties.
#wrapper {
background: rgb(174,188,191);
background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
}
Sample expected
#wrapper {
background: rgb(174,188,191);
background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
background: #111; /*Overrides the above properties*/
}
You overrode the first with another background property, maybe somewhere in your CSS with higher priority, causing your transparency overriden:
Sample overriden
I had the same kind of problem... and realized it was because I was saving the images as JPGs. You need something that supports transparency.
I folks. This might be more of a design question but I thought I'd give it a whirl in case someone had some masterful CSS techniques I could use. If not, I'll brace myself for the onslaught of down-voting and nay saying!
You can see the logo holder here has a background image with a nice gradient to the right, and is obviously semi-transparent. My client is looking for a gradient at the top and right side. Any ideas on how I can accomplish this?
alt text http://www.linkhostmedia.com/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-28-at-4.31.45-PM.png
Thanks in advance.
The most obvious solution would be to use a partially-transparent image as the background-image for the container-div.
#container_div {background: transparent url(path/to/image.png) bottom right no-repeat; }