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%);
}
Related
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>
I want a design like this on my <div>
But not getting this structure.
My CSS code is :
background: linear-gradient(to right, #406884 22%,#3b5261 50%, #38464f 80%);
Any kind of help would be appreciated.
Create 2 gradients, one with a step for the diagonal part and another with a transparent part for the horizontal part
.test {
width: 100%;
height: 100px;
background-image: linear-gradient(to top, black 40%, transparent 40%),
linear-gradient(-35deg, black 50%, tomato 50%, tomato 60%, lightgreen 60%, lightgreen 100%);
}
<div class="test"></div>
you can generate any type of gradient from below link
http://www.colorzilla.com/gradient-editor/
I am having problems inserting a background image and making my header and footer sections have a gradient background. My background image has to repeat. Does the .gif picture have to be in the same folder as the css? This is the css for it.
body {
background-image: url("folder1/pic.gif");
background-repeat: repeat-x repeat-y;
}
I am also working on a linear gradient that goes from white to orange to black. This gradient would then be the background for the header and footer sections. I am able to split and provide the header and footer section a linear gradient background but it does not extend all the way to the border of my header and footer. This is the html section for the header
<header>
<div id="eg1">
<img src="images/pumpkin.gif" alt= "pumpkin" height="78" width="85">
<h1>The Halloween Store</h1>
<h3>For the little Goblin in all of us!</h3>
</div>
</header>
The css formatting the html I have as
/*gradient header*/
#eg1 {
background-image: -webkit-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
}
As you can see in this example the gradient shows fine and the background image also shows.
Be aware: On some browsers the gradient may not appear because of the browser version or the syntax.
So I used all the prefixes for gradient to be as many brosers as possible are supported:
background-image: linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
background-image: -webkit-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
background-image: -moz-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
background-image: -o-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);
For more about browser support check this
I'm still learning parts of gradients, and I want to accomplish something that would enable certain colors of gradients to be certain sizes.
Example
Let's say I have a gradient with 3 colors: red, purple, and blue, in that order, from top to bottom. I want red to be around for 10%, and purple as 80%, and blue again as 10%. I have tried to create this with a JSFiddle, and it doesn't work out how I planned for it to. Along with the code I attempted to use, and the result is funky. In fact, the gradient isn't even a gradient any more, it's just goes from one color to another:
.gradient-square {
width: 100px;
height: 100px;
background: -moz-linear-gradient(red 10%, purple 80%, blue 10%);
background: -o-linear-gradient(red 10%, purple 80%, blue 10%);
background: -webkit-linear-gradient(red 10%, purple 80%, blue 10%);
background: linear-gradient(red 10%, purple 80%, blue 10%);
}
Accomplishing
What I want to accomplish is to have a gradient that starts off having, say 10px of a color, and then at the bottom is another 10px of a different color, while in between those two colors will be a single color, so the size of the element doesn't affect the length of the gradients.
Thank you for your help ahead of time.
Solution given by OP:
----- SOLVED -----
Thanks to #Joeytje50 for the help. I never thought towards how the percentages were actually used, and thank you. The correct way on what I was trying to accomplish ~ JSFiddle
.gradient-square {
width: 100px;
height: 100px;
background: -moz-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: -o-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: -webkit-linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
background: linear-gradient(red 0%, purple 10%, purple 90%, blue 100%);
}
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%.