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>
Related
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 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%);
}
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 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%);