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.
Related
I'm using the background-image: linear-gradient css property to create multiple color strips for a site background.
Usually gradient stops are defined by percentage, but I needed pixels in my site, so I managed to change it to pixels using the method lea Verou used in her patterns
The problem is that the end of each color is a bit blurry. In Firefox it's less noticeable, but in Chrome it's very noticeable.
Is there a way to handle it?
I noticed that when I change the 'deg' from 180 to 45 the ends look great. But unfortunately I need the stripes to be horizontal :)
My code: http://cssdesk.com/c6mGM
Almost a year later and I run into the same bug in chrome v36. I produced a work around here: http://codepen.io/davidgailey/pen/ncrKB
or here if you prefer:
https://gist.github.com/davidgailey/8fc1bd1a09747429a3ad
The work around uses background-size, background-position, and linear gradients.
background-size: 100% 150px, 100% 150px;
background-position: 0 0, 0 bottom;
background-image:
linear-gradient(#000,#000),
linear-gradient(green, green);
Viola! nice crisp horizontal stripes. It could use some work to be more future-friendly.
I hope this bug is fixed soon but in the mean time, feel free to use my pen as a start.
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.
My Firefox is acting weird. I use a simple 4x4px transparent PNG for a div background (as usual). In Chrome, Safari, Opera and even IE it looks great but in FF it's "broken". Here is a picture to show you what I'm talking about: http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G.
I use image and gradient for the background but if I only used the image, it causes the same result.
Here is the code:
#wrap {
background-color: #f5f5f5;
background-image: url(../images/general/bg-wrap.png);
background-image: url(../images/general/bg-wrap.png), -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ebebeb));
background-image: url(../images/general/bg-wrap.png), -moz-linear-gradient(top, #f5f5f5, #ebebeb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ebebeb');
background-position: 0 0; background-repeat: repeat;
}
When I used only the background-image, it looked like this:
#wrap {
background: #f5f5f5 url(../images/general/bg-wrap) 0 0 repeat;
}
And this is the bg-wrap.png: http://cl.ly/0i3i1R0P2R0i1K1h1V1P. I don't understand what's going on...
Everyone's right about the Firefox bug and background image tile dimensions -- I was having the identical problem with a tile that was 16p x 16px. Nealio's answer seems to be correct, but it's not a question of resolution. Rather, take your tile and literally duplicate it so it repeats itself horizontally and vertically, and then use that tile as your background image.
For example, my background image is a simple tile of a very small "checkerboard" with alternating gray and white squares. The first image was the bare minimum to tile the pattern infinitely, so each "checker" measured 8px x 8px, resulting in a background image of 16px x 16px. This looks fine everywhere except Firefox, where it displays the same zig zaggy jaggy rendering as yours did.
After reading Nealio's response, I took that first pattern tile and doubled it so that it was 4 checkers x 4 checkers (8px X 4 = 32).
And voila! Same background appearance, but just a slightly larger tile.
The only thing I can think of is that a number of years ago, early versions of Firefox had trouble repeating background images that were too small (less than about 16x16).
Perhaps this is a new incarnation of that bug when combined with a gradient fill css..?
Just rule this out by testing it with a larger background image.
That is weird...
I set up a fiddle, and it works fine like this: http://jsfiddle.net/will/KMVvT/
Do you think it could be something else interfering?
You should not seperate the mozilla and webkit features with a comma after the closing bracket. Also the image path should be encapsuled within quotes.
I had the problem, that the image was not displayed, but could be viewed with in FireBug. The reason was the adblock plus extension. After disabling for that page (or general) it was displayed, again.
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.