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;
}
Related
fairly new to doing multiple gradients. I've got a linear gradient, then a radial one on top.
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #033968),
color-stop(1, #408BCD)
);
background-image: url('../img/background-noise.png'), -o-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), -ms-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), -moz-radial-gradient(center top, farthest-side, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100px), -moz-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), -webkit-radial-gradient(center top, farthest-side, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100px), -webkit-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), radial-gradient(farthest-side at center top, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100px), linear-gradient(to top, #033968 0%, #408BCD 100%);
It works fine, but I'm wondering why the radial gradient's size is defined in pixels, but it act's like a %.
Check out: http://jsfiddle.net/tK5Ch/
When you adjust the browser size, the radial gradient moves around. I just want to make it fixed, like 100px x 100px
Any ideas what's happening?
Since you have two separate axes defined, the default shape is ellipse. You need to specify that it is circle:
http://jsfiddle.net/tK5Ch/3/ (Only changed the standard gradient)
radial-gradient(circle farthest-side at center top, ...
I have been experimenting with a top to bottom linear-gradient for a background of a page I am making. The only problem is that there is a footer on the page and I would like to end the gradient before the end of the div.
Is this possible in CSS solely, or should the HTML be changed to create a div which ends before the footer begins? Or should jQuery calculate the percentage at which the footer begins?
The pages are all different lengths, so ending by percentage would not work for all pages. Can a linear gradient be ended, say 500px before the end of the div?
My code is here, the wrapper div extends for the full width of the page.
div#wrapper {
background: #ffdf96; /* Old browsers */
background: -moz-linear-gradient(top, #ffdf96 0%, #a67f25 50%, #000 60%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdf96), color-stop(50%,#a67f25), color-stop(60%,#000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* IE10+ */
background: linear-gradient(to bottom, #ffdf96 0%,#a67f25 50%,#000 60%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdf96', endColorstr='#a67f25',GradientType=0 ); /* IE6-9 */
}
The page in context is here: http://bit.ly/1ar6KuR
Many thanks for any help that you can give :-)
Why not reverse the gradient color stops and reverse the direction from top --> bottom to bottom --> top and have the first color stop at the required pixel value.
Codepen Example
Or am I overthinking this?
Perhaps the best way is to add :before pseudoclass and apply gradient to that, like:
#wrapper:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
content: "";
... and background here ...
}
or DIV inside #wrapper as first child with the same CSS settings.
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%);
I want to make a CSS3 gradient that consists of a 1px line.
How can I do this?
I have tried the following code, but the gradient that is produced is too thick:
background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 51%);
(see here)
How can I make the line smaller, so its only 1px wide? The percentage values seem to control the positioning of the line, but no matter how much I adjust them, I can't get it to 1px wide!
(Essentially, I am using the line to act as a 'faux columns' background [i.e. to visually separate a left and right column. (Although, to keep the jsFiddle simple, I have removed the columns)] I know there are other ways of doing columns, but this method is the best for my situation)
EDIT: Just to clarify, this is for a slightly odd use case, where the width has to be 100% and no psudeo-elements can be used.
/* Opera Mobile */
background: -o-linear-gradient(left, #d1d1d1 1px, white 1px);
/* Firefox for Android */
background: -moz-linear-gradient(left, #d1d1d1 1px, white 1px);
/* WebKit browsers */
background: -webkit-linear-gradient(left, #d1d1d1 1px, white 1px);
/* new syntax: IE10, Firefox, Opera */
background: linear-gradient(90deg, #d1d1d1 1px, white 1px);
background-position: 100% 0;
background-repeat: repeat-y;
background-size: 50%;
demo
[I used 2px instead of 1px in the demo as 1px was not visible. I only tested in Chrome though.]
You should always put the unprefixed version last. There is no need for -ms-linear-gradient. IE10 now supports the standard syntax with no prefix and IE9 doesn't support gradients at all.
If you don't care about IE8 (which you probably don't if you're using gradients) you can use calc().
background-image: linear-gradient(left, transparent 50%, rgb(255,255,255) 50%, rgb(255,255,255) calc(50% + 1px), transparent calc(50% + 1px));
This is will work with any width element, whereas just using percentages will break down on smaller and wider elements.
.style {
background-image: -o-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
background-image: -moz-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
background-image: -webkit-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 0%, rgb(255,255,255) 50.5%);
background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
}
You are not dealing with pixels, you are using percentages. So 1% of your width, which must be 200 is 2px. (I think that is why this works, maybe I'm wrong.) You can use percentages decimals, so .5% == 1px.
I had use this earlier, change it according to your need. I mean change colors and angle as you want
background-image: liner-gradient(to bottom, white, white 14%,blue 1%,white 15%);
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/