linear and radial gradient positioning - html

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, ...

Related

Background Image with Linear Gradient

I have a couple questions about Linear Gradient:
Is it possible to have an actual image rather than colour display instead of either the #000000 of #ffffff?
background-image: -webkit-linear-gradient(30deg, #000000 50%, #ffffff 50%);
Also would it be possible in the above example (which is black for 50% width then a 30 degree vertical split then white for 50%), so if the image replaced #000000, is it possible to place a border on the right hand of the image along the 30 degree divide that seperated the image and colour?
Thanks!
I am not sure I got right what do you need, but here is an example.
.gradient-image {
width:128px;
height:128px;
background:
linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 60%,
rgba(0,0,0,1) 61%,
rgba(0,0,0,1) 65%,
rgba(0,0,0,0.7) 66%,
rgba(0,0,0,0.7) 100%),
url(https://i.stack.imgur.com/ZXvxw.jpg?s=128&g=1);
}
<div class="gradient-image"></div>

progress element transparent background

i have a <progress> bar and i want to color its track with a linear-gradient.
the effect i want to achieve though is having some portions of it to be transparent, so i styled it this way
progress[value]::-webkit-progress-bar {
background-image:
linear-gradient(
to right,
red 33%,
rgba(0,0,0,0) 33%,
rgba(0,0,0,0) 66%,
yellow 66%,
yellow 100%);
}
this renders as a grey bar in the 33% to 66% portion, instead of plain transparent. i've also tried using the value transparent but it does not seem to work. i still get a solid default color.
here is a fiddle: http://jsfiddle.net/0jaysLzu/
is it possible to apply transparency to the track of a progress element?
short answer background-image: should be background:
long answer
You have
progress[value]::-webkit-progress-bar {
background-image:
linear-gradient(
to right,
red 33%,
rgba(0,0,0,0) 33%,
rgba(0,0,0,0) 66%,
yellow 66%,
yellow 100%);
}
It should be
progress[value]::-webkit-progress-bar {
background:
linear-gradient(
to right,
red 33%,
rgba(0,0,0,0) 33%,
rgba(0,0,0,0) 66%,
yellow 66%,
yellow 100%);
}

How to create multiple background color in my case?

i am trying to create a multiple solid background color in my div.
I have found this post. Can I apply multiple background colors with CSS3?
but not sure what it means.
I have this
background-image:-webkit-linear-gradient(left, grey 20%, red 30%, yellow 10%, blue 100%)
The boundary between red and yellow is solid but grey/red boundary and blue/yellow boundary are blurry. How do I make them all solid?
Thanks
Try this: JS Fiddle
#test {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);
/* Opera */
background-image: -o-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(.25, #6E6E6E), color-stop(.25, #F20000), color-stop(.5, #F20000), color-stop(.5, #FFFF21), color-stop(.75, #FFFF21), color-stop(.75, #1231FF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);
}
Created here: http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker/Default.html
You can; the trick is to repeat the ending position of the previous color as the starting position for your new color. Like so:
background-image:-webkit-linear-gradient(left, grey 20%, red 20%, red 30%, yellow 30%, yellow 80%, blue 80%, blue 100%)
Basically this defines grey as being from 0-20%, red from 20%-30%, yellow 30%-80% and blue 80%-100%.

CSS Background with both gradient and pattern image

I'm trying to make my website's background to have gradient and a repeating pattern image. The gradient works fine as below, but if I remove background-repeat: no-repeat; the gradient doesn't stretch and repeats every few lines. I want to add another pattern image over the gradient but it needs to repeat so conflicts with the gradient.
I thought I can fix it by adding a div which contains the pattern image and stretches all over the body but it was unsuccessful. Is there any way to fix this problem?
body {
...
background-repeat: no-repeat;
background-attachment: fixed;
background-image: linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(255,255,255)),
color-stop(0.53, rgb(171,205,139)),
color-stop(0.77, rgb(171,205,139))
);}
And this is how I'm trying to repeat pattern image
background-image:url('mypattern.png');
background-repeat:repeat;
It seems like you will most likely need to create two elements one positioned absolutely over the other. There is a similar question here on stackoverflow dealing with this issue
LINK
CSS gradient above background pattern
EDIT
something like this may work
.example3 {
background-image: url(../images/plus.png), -moz-linear-gradient(top, #cbe3ba, #a6cc8b);
background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}
LINK
http://www.heresonesolution.com/2010/09/using-a-css-gradient-and-a-background-image-on-the-same-element/

Gradient bottom color for a div

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;
}