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.
Related
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?
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?
Consider this page: http://d.pr/i/GA5V
The problem is about these gradient of the page content. In this screenshot, the gradient is as follows:
linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 970px, rgba(0,0,0,1) 1000px);
There are 2 problems:
1 - The extremes of the gradient (0px and 1000px) should not go black. They should go transparent, but by this I mean that the extremes of the white div that is wrapping the page content should be transparent and show the background of the main page (which is a sort of dark image texture). If I put rgba(0,0,0,0) in the extremes, the background will be transparent to the white div (resulting in a completely white div). It should be something like:
linear-gradient(to right, MakeCurrentElementTransparent 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 970px, MakeCurrentElementTransparent 1000px);
2 - The gradient doesn't seem to be very smooth. I can see vertical color bars in it. Is there a way to make these linear-gradients more smooth (I mean, make the color transition more smooth) in CSS3?
Solving problem #2, I got it to be smoother by doing it with percents, instead of pixels:
linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) calc(100% - 30px), rgba(0,0,0,1) 100%)
Original
New
Old:
New:
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.
http://www.templatemonster.com/demo/39055.html
I've seen bunch of websites having those natural gradient on their backgrounds while surfing the internet. The thing I do not understand is... how did they do that? I don't think it's a photoshop-created image file cuz the gradient seems like re-sizing naturally and properly according to the screen size of my web browser... So, I thought it must be CSS... but I cannot find which code is actually doing the job :/
Could someone tell me how it's done?
It is a simple background image.
style.css, line 6:
body {background:#fff url(../images/body-bg.jpg) 50% 50%; ...
Here is a CSS3 solution on jsFiddle.
Over time this will be preferable to heavy background images: creating them, maintaining them, serving them, downloading them, caching them. With CSS3, these steps are no longer necessary.
Instead, just use CSS3 radial-gradient, and look up what you need with a generator.
Here is the code:
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #00A3EF 100%);
A. For now, it requires vendor prefixes, so that it can render cross browser.
B. Is it hard to write? No. It is trivial! This is also the new way of CSS3. Look up a "CSS3 Generator #what you need#' In this case it was a radial-gradient. But you can do the same for box-shadow, text-shadow, transform, animation, etc.
Here is one example of about a hundred diverse CSS3 generators.
Here is another jsfiddle involving opacity, it is getting closer to the example image.