Okay, basically I've created a design in photoshop, it has a noise background with a centred radial gradient (to create some light) What is the best way of creating this within CSS and allowing support in all browsers?
This question is answered in the following thread: Adding images when CSS gradients are used?
To summarize: you should likely just use an image, if you require loading an image, it is simpler to just include more information in the image (i.e. a radial gradient as well as the noise) than to overlay the two and deal with the complexity of the not-yet finalized css3 standard and non-webkit browsers not supporting multiple backgrounds.
<style>
#element {
background: url("10x10pxnoiseimage.png") repeat, -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: url("10x10pxnoiseimage.png") repeat, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: url("10x10pxnoiseimage.png") repeat, -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: url("10x10pxnoiseimage.png") repeat, -o-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Opera 12+ */
background: url("10x10pxnoiseimage.png") repeat, -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: url("10x10pxnoiseimage.png") repeat, radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* W3C */
}
</style>
<!--[if lt IE 9]>
<style>
#element {
background: url("bigimage.png");
}
</style>
<![endif]-->
The "10x10pxnoiseimage.png" is transparent with a few
white/grey/black pixels.
You can also decide to sue css3pie so you can also use these new
image tags in IE8/7/6.
And the radial dummy gradients are taken from:
http://www.colorzilla.com/gradient-editor/
If you send me the image I can make a dummy html for you if wanted ^^
There's a CSS3 property called background-size, which basically allows the background image to stretch across the container. However, it's still not universally accepted.
Since you can only use one background image (currently), there are 2 options I know about:
1) Use an image tag since the image will stretch to fill the container if its height and width are 100%, you can then create an inner container (for the content), set its position to absolute, and its top/left properties to 0, and give it a z-index of higher than that of the image. Any number greater than 1 should work. That will place the container above the image, and will solve your problem. However, the image will be greatly stretched, depending on the dimensions of the container.
2) Use 3 images: 1 for the left side of the image, 1 for the right side, and the last 1 for the middle part. Float 3 divs, using the first and third images as the background of the first and third divs. Use the 2nd image as the background of the middle div. How seamless your images look will depend on how you cut it.
Those should work nicely.
Related
How can I specify where color gradient starts in a div.
I have the below gradient:
style="background: linear-gradient(to bottom, white,#B8DBFF)
I would like the div to be purely white from top to around 200px down then have the gradient starts at that point.
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 200px,#b8dbff 100%);
Example: http://jsfiddle.net/CEFkZ/
(I used this gradient generator)
You can use degree to define the starting point.
Refer this to learn more about CSS3:
http://www.css3files.com/gradient/
I am making a naviagtion bar with a gradient as follows:
/* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b49931), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f; /* Fallback */
it works great in safari but does not work firefox. I know making an image would be better but is there any easy way that it will work in firefox aswell as safari?
I have made a JSFiddle http://jsfiddle.net/BVbfQ/
You can use Safari to make a screenshot of the result and crop it to make a repeatable image.
Use this tool. Works in all browsers
http://www.colorzilla.com/gradient-editor/
i am using this in my body code
body {
margin:50px;
text-align:center;
padding: 0px;
background: #2a6da9;
background: -moz-linear-gradient(top, #1D1D1D, #1F1F1F);
background: -webkit-gradient(linear, left top, left bottom, from(#1D1D1D), to(#1F1F1F));
}
in the background, the gradient displays in blocks that look rough and pixelated. How do i fix this to where it is smooth. I also have tried making an image the background, but had no luck. Thanks
It is browser dependent and I do not see it on mine with the same css. You could try changing it to:
background: -moz-linear-gradient(top, #1d1d1d 0%, #1f1f1f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d1d1d), color-stop(100%,#1f1f1f));
But it is such a slight change in color, I even set the height to over 300px.
Using a 1 X 100 pixel image made the quality look much better
See the radial gradient flowing around the center of the navigation? Lets suppose I made a div that is the navigation. How would I create a gradient that looks like in the picture?
Note: Look at the background behind the menu.
If you talk about the lighter brown glow that is behind the navigation you can do this with CSS3...: http://jsfiddle.net/Jg8ZC/
background: #45392d;
background-repeat: no-repeat;
background-image: -webkit-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* New WebKit syntax */
background-image: -moz-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* Firefox */
background-image: -ms-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* IE10+ */
background-image: -o-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* Opera (13?) */
background-image: radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%; /* standard syntax */
This way it will work in every modern browser.
This is not a radial gradient. It seems to be a graphic.
As for CSS, Look her http://www.the-art-of-web.com/css/radial-gradients/ or in google. Theres plenty of resources out there
Here is a editor http://www.westciv.com/tools/radialgradients/index.html
Example
If you want to do this with CSS, you could use a radial gradient:
background-image: -webkit-radial-gradient(contain, #bf8230 0%, #a65f00 100px);
Example (jsFiddle).
The above will create a circular glow with a radius of 100px centered in the padding-box of the <div>.
If you want to make a glow "around" an element, you could nest an element with a semitransparent gradient background inside one with a solid background, as in this example. You'd have to make sure that the nested element doesn't fill its container, and that its padding box can include the entire glow, or it will appear "cut off".
(The example was only done for Chrome Beta, and will probably require appropriate vendor prefix incantations and testing for other browsers.)
I am trying to create a button using CSS Gradients plus a icon that goes on top of the gradient. I tried 2 ways and both was a failure.
First:
.btn {
background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));
background: url(../images/btn.png);
}
I should of knew that wouldn't of worked! But I also heard about CSS3 multiple background images, so I tried it that way.
Second:
.btn {
background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)), url(../images/btn.png);
}
Still didn't work :(. Is there any way to actually do this? With adding a <img> tag in the <button>?
only webkit browsers allow multiple background effects (CSS3) .. generally speaking you can have a gradient OR and image but you can't have both (yet)
you could overlay 2 divs tho and have the image for the topmost be transparent PNG or such
I think it'd be better and more compatible if you just put the gradient and button together in the same image, but if it's not practical in your situation, you can achieve the same effect using multiple divs:
<div style="width:256px; height:256px; background:-webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));">
<div style="width:100%; height:100%; background:url('btn.png') "></div></div>
Make sure you change the width/height parameters I set if you use mine.
Hi to all :) I've been trying the png transparancy layering / css3 gradient technique for a while and accross the browsers this seems to be most reliable:
background:url(images/bkgd1.png) top center repeat-x, url(images/bkgd2.png) top right repeat-x, -moz-linear-gradient(top, #F3F704 0%, #FFFFFF 100%);
background:url(images/bkgd1.png) top center repeat-x, url(images/bkgd2.png) top right repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3F704), color-stop(100%,#FFFFFF));
I hope this helps anyone even if just one person then i'll be smiley all day today :)
You should use your first example, but reverse the lines so that the image is applied before the gradient. All browsers will get a background image, but only browsers that understand -webkit-gradient will use the gradient. All others will ignore it.
.btn {
background: url(…);
background: -webkit-gradient(…);
}
You could flatten your icon onto a gradient background meaning you'd only need to set the background-image. Other than that, I think you're going to have to put an tag (or a container with the image as background) inside your gradient-ified container.