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.)
Related
I'm trying to centre an image with a linear gradient. But the image either disappears or the gradient shifts.
I've tried using float: left; putting the image in a div container in an Html file then adding a gradient but if I do that the gradient doesn't show.
width:750px;
height: 1300px;
background: linear-gradient(to top,black,transparent 30%), url(/images/ian-dooley-iD5aVJFCXJg-unsplash-750x1300.jpg) no-repeat;
I hope to be able to centre or move around my image on my website while maintaining the gradient overlay.
Any help would be appreciated
background-position: 0px 0px;
background-image: linear-gradient(to bottom,
#FFFFFF 0px, /* Have one solid white area */
#FFFFFF 255px, /* at the top (255px high). */
#C4C7C9 255px, /* Then begin the gradient at 255px */
#FFFFFF 100% /* and end it at 100% (= body's height). */
);
Also see the link, this will surely help you
http://jsfiddle.net/ExpertSystem/yyvT3/
For a client I am trying to implement a background on an HTML element, which contains 2 radial gradients. One is located in the top right, one is located in the bottom left. My CSS only renders one of the radial gradients.
I have tried putting two radial gradient elements as a background:
body {
width: 100vw;
height: 100vh;
background-color: green;
background:
radial-gradient(
circle at top right,
red,
black 20%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%
);
}
Only the first radial-gradient appears, but the second one doesn't. When I switch the position of both gradients in de CSS markup, the colors change. So it appears as if only the first gradient is recognised.
I'm not sure which amount of color you want to see in the result, but my guess is you are after something like this.
body {
width: 100vw;
height: 100vh;
margin:0;
background-color: green;
background-image:
radial-gradient(
circle at top right,
red,
black 20%,
transparent 40%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%,
transparent 40%
);
}
One problem with your code was that you used the background shorthand for the background images, which resets the background color, so the green was no longer there. Use background-image instead.
Another was that both gradients covered the whole page, while you apparently want them to take up only the top right corner and bottom left corner instead. I solved this by giving them both transparent from 40%.
And I took the liberty of giving the body 0 margin, to get rid of the scrollbars.
My CSS only renders one of the radial gradients.
Simply because you are using opaque colors and by default a gradient will cover all the element so your will only see the top layer.
In addition to the answer of Mr Lister, you can adjust background-size to control the space each gradient should take:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right, red, black 40%) right,
radial-gradient(circle at bottom left, yellow, orange 40%) left;
background-size:50% 100%;
background-repeat:no-repeat;
}
This looks a bit ugly but if you want to have a continuous background make sure both end color are the same:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right , red, black 40%, green 60%) right,
radial-gradient(circle at bottom left, yellow, orange 40%, green 60%) left;
background-size:50.5% 100%;
background-repeat:no-repeat;
}
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/
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 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.