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.
Related
This is my design layout. Structure like this
<div class="outer">
<div class="container">
<div class="content"></div>
<aside></aside>
</div>
</div>
The css for that layout is
.container{width:1000px; margin:0 auto;}
.content{width:70%; float:left;}
aside{width:30%; float:left;}
Okay, now I need to set up a gradient background for the sidebar. I can use a gradient image repeat-y to make that for the sidebar. But the margin-right space of the container also have the same gradient.
I have used the background gradient for .outer div. It is okay for normal desktop. But when it is visited from a higher resulation it shows something like that.
I know the gradient displacement is happening because of the % used to generate the gradient. I am giving you the default gradient line I have used without prefix.
background: linear-gradient(to right, #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
What is the probable solution for that???
** This is a long page with short sidebar. But the background should be from top to bottom.
If you need live link, I have that. https://blog.measuredsearch.com/
Try this background for container_wrap class
#main .container_wrap
{
background:-webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}
Rather than applying the background to the entire container and setting percentages at which the gradient should start so that it fits over the aside I recommend applying this only to the aside and adjusting the styling accordingly.
As well as issues with resolution, you also have duplicate percentage values being stored.
aside{
width:30%;
float:left;
//background gradient definition here
}
http://jsfiddle.net/ky9enkb4/
Browser show you correct result. As a fast variant media queries for wide-screens
#media screen and (min-width: 1500px) #main .container_wrap {
background: linear-gradient(to right, #ffffff 0%,#ffffff 62%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}
Or just give width for white gradient width 62%. It will be normal.
I believe this is what you are trying to achieve
The whole page with background gradient from top to bottom. Starting with #fff to accommodate content section
The dark region to accommodate sidebar.
To maintain the stability with large and small screens.
What I have done
I have added the gradient to the body so that the left is white and right is dark color.
Different gradient whit only dark colors and ending with the same color that the body is ending with (You might have to check with really large screen if the shade difference occurs outside the container).
The container, aside to occupy height from top to bottom of the screen
Check out the Fiddle
body{background: linear-gradient(to right, #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#cfd7da 72%,#cfd7da 100%);margin:0;}
.container{width:400px; margin:0 auto;background:#fff;height:100vh;border:1px solid #999;}
.content{width:70%; float:left;height:100vh;}
aside{width:30%; float:left;background: linear-gradient(to right, #acb9bf ,#cfd7da 72%,#cfd7da 100%);height:100vh;}
hi you may try this may this work for you
background: linear-gradient(to right, #ffffff 0%,#ffffff 0%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
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'd like to have a css background-image be a top-to-bottom gradient, and then a color. For example, if I wanted gradient that's #FF0000 at the top, #00FF00 400 pixels from the top, and immediately cuts to #EFEFEF after that, how would it be done? Is there some form of background-image-repeat I could use?
The actual property is called background-repeat. You need to use it in conjunction with background-size to restrict the gradient to 400 pixels tall and prevent it from tiling:
html {
background-color: #efefef;
background-image: linear-gradient(#ff0000, #00ff00);
background-repeat: no-repeat;
background-size: 100% 400px;
}
jsFiddle preview
Of course, this assumes you're using a CSS3 gradient, in which case browser support isn't an issue as all browsers that implement CSS3 gradients also implement background-size. But if you're using an image file for your gradient and you need to support older browsers, you're going to have to create an extra element or a pseudo-element with the appropriate height and position, to contain just the gradient.
Yes, use background-color and a gradient, set the proper background-repeat & background-size.
DEMO
background: #EFEFEF linear-gradient(#FF0000, #00FF00) repeat-x;
background-size: 1px 400px;
Adding a 3rd stop to your gradient is also an option (in case there are browsers that support gradients but not background-size). Place the 2nd and 3rd stops right at 400px, with the color for the 3rd gradient as your desired bg color.
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.)