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/
Related
Is it possible to have those backgrounds work together?
background: url("../images/search.png") no-repeat scroll 9px 4px transparent;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #fdca14), color-stop(1, #ff8d02) );
background:-moz-linear-gradient( center top, #fdca14 0%, #ff8d02 100% );
Thanks :)
You may also want to check out CSS3 Pie if you need to be able to do this in older IE browsers.
CSS3 allows it. Here's an example of multiple background images being used in the same background:
.exampleClass {
background-image: url(images/example1.png), url(images/example2.png);
background-repeat: repeat-x, repeat;
}
It's supported in all major browsers (except for IE8 and before sadly)
CSS
.class{
background: url("../images/search.png") no-repeat scroll 9px 4px transparent,-webkit-gradient( linear, left top, left bottom, color-stop(0, #fdca14), color-stop(1, #ff8d02) ),-moz-linear-gradient( center top, #fdca14 0%, #ff8d02 100% );
}
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
I wanted a gradient bottom color for a div.Something like as shown in below image.Is it possible in css3 or should a image be used.
Any help appriciated.
Yes and No.
Yes, it's possible. Tools like http://www.colorzilla.com/gradient-editor/ make it easy to create the CSS3 code. For instance, this is kinda what you wanted: http://www.colorzilla.com/gradient-editor/#ffffff+75,cccccc+100;Custom
No, you should always have a fall-back image for gradients. Not all browsers support it, and not all support it equally well.
This will create a gradient only on the bottom of the element, and does not stretch with the height of the element. It is fixed 100px.
.style {
padding-bottom:100px;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-position: center bottom;
background-size: 100px 100px;
background-repeat: repeat-x;
}
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.
I have a which I am going to make into a button. The top half should be #ffd41a and the bottom half should be #fac915. Here is a link to the button at present. http://jsfiddle.net/WnwNW/
The problem that I'm facing is how should I deal with two background colors. Is there a way to do what I'm trying to do without the need for addition divs or spans? Can I have two background attributes within the same CSS class?
CSS3 provides a way to do this
background-image: linear-gradient(to bottom, #FFD51A 50%, #FAC815 50%);
background-image: -o-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -moz-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -webkit-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -ms-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
http://jsfiddle.net/WnwNW/1/
Yes and no. You can use two background attributes. However, this is only supported in CSS3. That means that two background images will break in older browsers. That being said, you can do something like this.
background-image: url(color1.png), url(color2.png);
background-position: bottom, top;
background-repeat: no-repeat;
I'm not sure if you can specify multiple background "colors."