I used a css generator to create
background: radial-gradient(ellipse at center, rgba(49,35,174,1) 0%, rgba(125,72,195,1) 50%, rgba(125,72,195,1) 50%, rgba(201,109,215,1) 100%);
It is not displaying correctly. The gradient is rendering as stripes of the two colors. Is there a way to fix this?
Related
I am having an issue where a gradient which transitions from transclucent (~.1 opacity) on the edges of the page to solid white appears lighter on the edges in Safari. In Chrome and Firefox the edges are the darkest. In Safari it seems that a white background is being assumed that it added to the gradient. Thus, the edges are lighter than the middle of the gradient, as the gradient transitions from translucent to opaque white.
The page in question can be found here.
The relevant CSS is:
background: linear-gradient(to right,
rgba(100,100,255,0.15) 0%,
rgba(255,255,255,1) 20%,
rgba(255,255,255,1) 80%,
rgba(100,100,255,0.15) 100%);
A screenshot of this CSS looks like this: I have tried adding a "fallback color" (really a background-image) to the CSS to help Safari, since it seems to be assuming a white background which, when added to the translucent rgba(100,100,255,0.15) makes for lighter edges. However, this just makes everything darker and doesn't overcome the lightness of the edges. The result of that can be seen in the below screenshot. The CSS for this was:
background: linear-gradient(to right,
rgba(100,100,255,0.15) 0%,
rgba(255,255,255,1) 20%,
rgba(255,255,255,1) 80%,
rgba(100,100,255,0.15) 100%)
rgba(100, 100, 255, .15);
This looks like:
Just noticed that gradient in Chrome is't equal. Using this css
background: linear-gradient(to right, #00a4e4 0%, #00a4e4 50%, #369044 50%, #369044 100%);
In my case the left part is 657px, and the right part is 650px. This happen only in Chrome.
Fiddle
Any fix for this?
I need help to create the styling shown in the image above which is a graphic design of what I am needing to do. The bottom left hand corner shading for the panels shown in the image above is my real sticking point.
I have tried all sorts of generators but I just can't get close enough with radial gradients.
As you can see I have a number of panels (actually 5 in total) lined up next to each other, each panel is a different width potentially and will resize with borwser view port sizing so providing a background image is not really an option.
I have a repeating transparent background image that creates the texture effect that works fine so I am not concerned about the texture effect but I am totally unable to create the bottom left corner darker shading effect and I need to get as close as absolutely possible using css. I have been tearing my hair out over this for days.
The main green colour hex code is #3F4B0B
My css currently looks like this
#mixin forest-green-texture{
#include background-image(url("texture.png"), linear_gradient($dark-green, $light-green));
}
.footer-box{
#include banner-color;
#include forest-green-texture();
width:18%;
float:left;
}
The linear gradient just doesn't cut it! It was my last attempt and totally wrong
I am using SASS if that makes a difference
I got pretty close using this tool http://ie.microsoft.com/TESTDRIVE/Graphics/CSSGradientBackgroundMaker/Default.html
which gave me
/* IE10 Consumer Preview */ background-image:
-ms-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* Mozilla Firefox */ background-image: -moz-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%,
#000000 100%);
/* Opera */ background-image: -o-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* Webkit (Safari/Chrome 10) */ background-image:
-webkit-gradient(radial, right top, 0, right top, 970, color-stop(0, #3F4B0B), color-stop(0.7, #3F4B0B), color-stop(0.9, #3F4B0B), color-stop(1, #000000));
/* Webkit (Chrome 11+) */ background-image:
-webkit-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle farthest-side at right top, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
I know the colours are slightly wrong, I'm not bothered about that I can adjust them but the above wasn't really much better than a linear gradient.
UPDATE
This is a screen shot of what I have managed to achieve so far
As you can see, the shading just isn't right.
The css I have for this is
background-image: url("texture.png"), linear-gradient(to right top, black 0%, rgb(70, 84, 12) 50%, rgb(82, 97, 14) 100%);
All help greatly appreciated
I would suggest putting the textured image on the background of the container div of the columns then for each column use that line shadow image with transparent background as the background property for each colum.
<style>
.container {
background: url(textureImg.png) repeat;
}
div[class^="col"] {
background: url(lineShadowImg.png) no-repeat;
}
</style>
<div class='container'>
<div class='colOne'>
//your content
</div>
<div class='colTwo'>
//your content
</div>
<div class='colThree'>
//your content
</div>
</div>
If you need to tweak the positioning of the line just use background-position. This will allow your columns to be as wide as they need to be without having to change your image for each.
I need to create a square element with gradients to achieve same way as border or box-shadow, because when skewing and rotating the element a slight line appear on the border.
As far as I can get is using multiple gradients with different directions, but it looks like it's not possible (or I don't know how)
I have tried with this but it doesn't work (with its vendor-prefixes):
background:
linear-gradient( top, white 0%, white 5%, red 5%, red 95%,white 95%, white 100%),
linear-gradient( left,white 0%, white 5%, red 5%, red 95%,white 95%, white 100%)
;
Have created a codepen to show what want to achieve and why can't use border (with box-shadow still the same issue)
I have also tried with an :after and it works, but I need an approach without :after pseudo-element.
Thanks!
Try using the :after element with the middle color set as transparent.
Thanks to Ilya Streltsyn I solved the problem.
The thing is, when using gradients, the order of the code is important. So basically will work:
background:
-webkit-linear-gradient( top,white 0%, white 5%, transparent 5%, transparent 95%,white 95%, white 100%),
-webkit-linear-gradient( left,white 0%, white 5%, red 5%, red 95%,white 95%, white 100%);
}
Codepen here
I've got some strange problem around multiple backgrounds. I use a combination of linear gradient, radial gradient and a repeated gif picture to make the background for page.
Here is the css I assign to main container (first inside the body):
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,.8) 100%), -moz-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.8))), -webkit-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), -o-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), -ms-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-repeat: no-repeat, no-repeat, repeat;
I used css3generator for it, so I'm almost sure that gradients are OK.
Next, I use modernizr to make a fallback for ald browsers. This style is assigned to the container, if it is nside .no-js, .no-multiplebgs or .no-cssgradients html:
background-image: url("../img/bodyBackground.gif")
All browsers seem to work perfectly, IE9 falls back correctly, but opera... I test in Opera 11.11, and it displays no background at all. Same time, modernizr says it has multiple backgrounds AND css gradients feature. I just can't find out what am I doing wrong.
Look at my site please, and help!
I think I can help a little (just ran into the same problem)...:
Opera as of now only supports linear-gradients (see here, note on radial-gradients; Mar2011). To get the linear part working in your example you need to add a dot for opacity 0 like so:
-o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),
into this:
-o-linear-gradient(top, rgba(0,0,0,.0) 75%,rgba(0,0,0,.8) 100%),
You can add linear gradients as background images just like regular images, so I guess we will just have to wait for radial-gradient support.
Cheers
EDIT: Try this link showing how to make radial gradients in Opera via SVG.