On my way to finding a CSS solution to have an evenly colored element with angled beginning to avoid images I stumbled across this simple example: http://dabblet.com/gist/1780333 . This one is working fine, even in IE of the latest, only Safari is reversing it completely, putting it to the end instead of the beginning AND turning the angle partly, at least in my live site it's not consistent. I have, of course, the same values for all browser versions.
Anybody an idea why it is so and what one can do - or an alternative solution without images to come up with an angled left side of an element?
This isn't a bug - there were quite a few changes between the Working Draft and the Candidate Recommendation for the gradient syntax, one of which is the angle of the gradient:
From the IE Blog. Hence the unprefixed version requires a different deg value to the prefixed versions. The CR is much more logical (to me at least), with 0deg being a gradient line pointing to the top and increasing in a clockwise direction.
I think you found a bug! Or at least Safari is interpreting the angles differently.
This isn't surprising as until pretty recently Safari used the -webkit-gradient syntax which is much less flexible. For example, it doesn't allow angles.
Still you can solve your problem by including the old syntax, which still works:
background: -webkit-gradient(linear, 10% 100%, 0% 0%, color-stop(80%, #000000), color-stop(80%, transparent));
background: -webkit-linear-gradient(60% 100%, #000000 80%, transparent 80%);
background: -moz-linear-gradient(60% 100%, #000000 80%, transparent 80%);
background: -o-linear-gradient(60% 100%, #000000 80%, transparent 80%);
background: linear-gradient(60% 100%, #000000 80%, transparent 80%);
Demo
Related
I want to create some flat-UI-like blocks but I need a little help. I got through some guides with linear-gradient(to left, rgba(255,255,255,0) ,rgba(255,255,255,1)); and so on, but I have't found what I actually need.
Is there any way, how to do any layer with linear opacity? I have quite huge database of images, (so I definitely can't photoshop them to have opacity by itself), and I am loading it into many "div" as a background-image. But I need to make the divs to start beeing transparent in about 75% of its width.
Is it somehow possible in CSS?
There is what I need to achieve:
You can set a linear gradient background with an extra stop to make an element transparent for 75% of its width, then linearly increase opacity.
For example:
background: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 75%,
rgba(0,0,0,0) 100%
);
This makes an element have an opaque black (the three first rbga values) background for 75% of its width, then linearly transition to transparent in its rightmost 25%.
I'm afraid something like that is not possible using CSS. Since you have many images, and provided you don't show too many of them at once, you can consider using canvas to render the opacity to each image:
http://jsfiddle.net/u256zkha/
Using linear-gradient, partly from Jon's answer.
#parent{
position:relative;
width:fit-content;
}
#layer{
position:absolute;
width:100%;
height:100%;
background: linear-gradient(
to right,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 100%
);
}
<div id="parent">
<div id="layer"></div>
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=356&d=identicon&r=PG&f=1"/>
</div>
BUG! Left here in hope that it will attract attention and perhaps a fix.
The problem is that chrome, makes(i have checked!) the first half of the gradient smaller than the second one. My code is:
background: linear-gradient(to left, #ffffff 50%, #f5f5f5 50%) fixed;
Also tried:
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3236), color-stop(50%,#ff3236), color-stop(50%,#000000), color-stop(100%,#000000));
background: linear-gradient(to left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 50%,#ffffff 100%);
Edit/Update: It is indeed a bug - updates are for clarity (top 2 blocks are divs, each 50% width, of screen - bottom is split with gradient):
1) Visual representation of the bug:
2) Thanx to #elstgav for a putting up the a Codepen Test
As of now (2016-11-02), This issue ssems to be fixed, I just tested these pens :
http://codepen.io/elstgav/pen/guotz
http://codepen.io/gliesche/pen/GoWMVO
in Chrome Version 54.0.2840.71 m,
and they all work.
However, Chrome still seems to have some issues with scaling gradient backgrounds when they are repeated:
SO link: Chrome not updateing background-size gradient properly on resize
Chrome BT: https://bugs.chromium.org/p/chromium/issues/detail?id=604875
I'm struggling to get the size of CSS3 gradients to work properly. I've set a background-size:800px; yet, as seen in the jsfiddle below, it most certainly isn't 800px. Have I misunderstood the property? It seems to work differently in different circumstances; when used without other headers the background resizes with the browser, when included in the H5BP it doesn't resize, but is far too short in height.
I am very very confused! How on earth do I create a repeating background gradient of a specific size?
body {
background: #0d1a2d;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1b355a), color-stop(50%, #000000), color-stop(100%, #1b355a));
background-image: -webkit-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: -moz-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: -o-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: linear-gradient(#1b355a, #000000 50%, #1b355a);
background-size: 800px;
}
jsfiddle: background-size example
You need to specify the size in both the x and y direction, like so:
background-size: 800px 800px;
View on JSFiddle
With that said, what you've done is compliant with the CSS3 specs. According to the MDN, however -- and what we can gather from your experiment -- browser compliance with this spec is inconsistent and unreliable. So, for now, it's best to explicitly define both directions.
Once browsers' behavior complies with the specs, setting a single value will set the other to be auto.
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread
I want to make pattern background and a white to black (with transparency) gradient above it. How to work it out and also make it work cross-browser? I'm starting with Mozilla and I've tried to use code below:
background: url(../images/bg_pattern.gif), -moz-linear-gradient( rgba(255, 255, 255, 0.5) 5%, rgba(130, 130, 130, 0.5) 95%
Of course this does not work. So how to work it out? How would the code look for other browsers? Does IE support many backgrounds and transparency? I think it doesn't so I'll ask before your answers - how to work it out for IE?
You will need two separate elements, one overlaying the other. The element on top sounds like it should be your gradient. Also FYI here is a great tool for generating cross-browser gradients, just launched this week at An Event Apart:
http://www.colorzilla.com/gradient-editor/
Try this:
background-image: url(images/pattern.png), -webkit-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
background-image: url(images/pattern.png), -moz-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
background-image: url(images/pattern.png), -ms-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
background-image: url(images/pattern.png), -o-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
background-image: url(images/pattern.png), radial-gradient(circle at 0% 100%, rgb(20,150,254), rgb(119,117,174));
I have a working version for everything excepting IE. :/ I don't remember where I found it, so I can not give the proper credit; however, here it is:
background: -webkit-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.8)) fixed, #454040 url(images/grainy2.png) repeat fixed;
background: -ms-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed;
background: -o-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed;
background: -moz-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed;
The first color is your top, the second your bottom, and the third is the color over the pattern (not sure how you would reduce that to transparent). Finally just direct to your pattern.
I'm not entirely sure what ms is for. Like I said, I've been using it for about a few months, but I do not remember the source. I just use them all to make sure they work. Still no fix to IE :/