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.
Related
I made a grid background for one element using 2 linear gradients. The lines however don't have consistent thickness and appear blurry in some segments, very clear in others, etc. - see this screenshot:FF screenshot.
The actual CSS for the background looks as follows:
background-image: linear-gradient(to right, black 1px, transparent 0%),
linear-gradient(to bottom, black 1px, transparent 0%);
background-size: 22px 22px;
background-repeat: repeat;
A JS script automatically scales the element's width and height to multiples of 22px based on the available space.
I tried to modify the gradient a bit in terms of size and line width, and with those two being comparatively large everything seems to be fine. But that's not what I want. I also tried using an image I made in Paint3D, but it didn't change anything.
I turned to other browsers, and different engines seem to render it in a different manner, but the problem still persists in one way or another (the above screenshot is FF). It appears as though this is an issue with the rendering itself, and needless to say I have no idea what I could do.
I thank in advance for any suggestions on how to fix this problem.
using CSS, i'm trying to blend a background-image with a color.
The image is a PNG with translucent parts though.
How can I apply a blend-mode only to the actually visible parts, so if the PNG has a hole, the elements lying behind can be seen unobstructed there?
Codes like:
background-image: url("Scales/Scale1.png");
background-color: rgba(0, 0, 255, 1);
background-blend-mode: luminosity;
result in an opaque color blending with the image ontop. Fully translucent pixels of the image contain the background-color instead of being translucent on the result.
Anyone having an idea how to solve this?
Thanks in advance :)
Only with filter
filter: hue-rotate(90deg);
and sepia(NN%) probably. No other options and only in browsers that support it.
I have a following situation:
Div has to have a solid color on top, and then at the bottom thee should be a transparent image 1px wide.
(So final look should be that I have a gradient from top to bottom of div)
When I put :
background: #fff url("../../images/bck1px.png") repeat-x scroll center bottom transparent;
white color is shown over transparent image
I have to do this in CSS2 style!
Can anybody help?
Here is a link... maybe this is what you want to do.
If yes, the trick is to use the image and have it align in the bottom of the div and repeat horizontally. The clear is there to make sure to push the bottom of you container div.
http://jsfiddle.net/etienne_carre/GEkFn/
Good luck
It’s not entirely clear what you’re asking — a transparent image is transparent, so it won’t create a gradient.
In the code you’ve posted, you have applied a white background colour as well as an image (background: #fff url...). If you leave out the colour (background: url...) you shouldn’t get white any more. I don’t know if that’ll solve your problem.
If you could post all the CSS applied to the <div>, that might help.
If someone ever arrives here, future has finally come and there is better ways to do it.
Please refer to the following links for a CSS method:
Gradient opacity on the bottom of div
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.
My idea is that a PNG overlaying some text, with transparency ranging from 0% to 100%, all colored in the same color as the CSS background, would fade out the text underlying it.
Turns out the transparent PNG is visible also in the areas where it's supposed to be transparent. Also, the colors of the PNG and the CSS are not the same - even though I create them with the same hex-values.
An image is included. I have tried creating the resource in Illustrator, Photoshop and Fireworks. I have tried removing the gamma-information (gAMA) with pngcrush, PNGSquash and ImageMagick. The problem is the same on Firefox as in Safari.
If anyone knows how to solve this -- or if it's even possible -- I'd love to hear it! Thank you in advance.
I can't immediately solve the issue you're experiencing, but I can offer an alternative text-fading solution, if that's of any use?
.text-to-fade {color: rgba(255,255,255,0.0) /* red: 255, green: 255, blue: 255, alpha: 0 */
}
the value of 0.0 at the end is the alpha value, and can range from 0 to 1, with 0 being opaque and 1 being transparent. rgba has problems on browsers other than Firefox insofar as I've experimented.
perhaps
.text-to-fade {opacity: 0.5; /* for most browsers */
filter: alpha(opacity=50); /* for IE */
}
The reason it appears to be a different color is because it's transparent, not because the colors are actually different. To demonstrate this, open an image editor that supports layers. Create a white bottom layer and a black top layer. Set the opacity of the black layer to 50% and merge the layers down. Use a color picker to check the color. It's going to be #808080, not black.
The reason it's not fading is because that color is additive. Say your text is #808080 too: in places where there's text, you have #808080 overlaying #808080--and that ends up being something like #424242 rather than canceling out as you want. There's really not a great way to do what you're trying to do inside a web browser in only one step.
One thing to do would be to make the text invisible (visibility: hidden;) with javascript. Another option would be to use relative or absolute positioning and set up the z-indices so things look something like this:
3: TRANSPARENT-GREY
2: button/any other objects
1: OPAQUE-GREY
0: text
That will block out the text and leave anything else partially visible.