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
Related
I have 2 div's and the upper div is transparent with a border radius on every corner, there is a div which is using solid background gradient underneath this and has been pushed up under the transparent div using a negative margin and z-index to put it behind the upper div.
Is there a way with CSS to hide the part of the div which is up underneath the div above it?
I did it this way because I need to maintain the corners which are highlighted in the second image.
Problem using color stops illustrated here:
jsfiddle.net/PKy8B/3/
As someone asked this would be the desired result:
Thanks everyone for the help but it looks like this is not possible to do this with a transparent div above and one behind, I have changed the top div to no longer be transparent just as a "best fix" option.
Unfortunately, the div is transparent and there's not much you can do about it. What you could do is not start the background-gradient until after the div has cleared the 'overhang' using a color-stop.
JSFiddle Demo
HTML
<div class="top"></div>
<div class="bottom"></div>
CSS
.top {
height:75px;
background-color: rgba(0, 0, 0, 0.25);
}
.bottom {
height:75px;
margin-top: -10px;
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(255,0 ,0 ,0.25) 10px, /* start visible section */
rgba(255,0,0,.25) 100%);
border:1px solid black; /* added for visual reference */
z-index:-1
}
NOTE: The color stop must be the same as the amount you have moved the bottom div
Can you do the same to the top just like you do to top-
I mean -
if you have added linear-gradient(to bottom in bottom div
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(255,0 ,0 ,0.25) 10px, /* start visible section */
rgba(255,0,0,.25) 100%);
then you can also also do the same for Top:
i mean do something like that with top
add this - linear-gradient(to top
background: linear-gradient(to top,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(0,0 ,0 ,0.25) 10px, /* start visible section */
rgba(0,0,0,.25) 100%);
CHECK it here - DEMO
And i think your See More blue button will be an image. so there will be no issue with it.
Is it possible to fade the text horizontally near the end of the div using the CSS.
For example like this:
CSS gradients and rgba will do the job for this
Demo
Extended Text Version (Updated)
div {
position: relative;
display: inline-block;
}
div span {
display: block;
position: absolute;
height: 80px;
width: 200px;
right: 0;
background: linear-gradient(to right, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
top: 0;
}
Note: I've stripped off cross-browser CSS gradient code, you can get
it from http://www.colorzilla.com/gradient-editor/
About the rgba() it's introduced recently in CSS3 spec, where I hope you know what RGB stands for and a stands for alpha, so instead of using HEX I am using RGBA and am just playing with the alpha part here
Skipping IE9-, which may require an image or SVG, you can add a position: absolute div that covers the full width and has a partially-transparent gradient that fades to white. This div must be contained by the element you want to cover, which must be position: relative.
http://jsfiddle.net/JcPAT/
Not really cross browser friendly but you can use something like:
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);
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 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 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.