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%);
Related
I have only basic knowledge on the CSS. I'm trying to give gradient color for one of my ITEM as per below guidelines and the gradient should be vertical.
I tried the below , but only the first color is coming all over the region. I dont understand that 30% and 50%. How to achieve this?
.myheader {
background: linear-gradient(to bottom, #mycolor1 85%, #mycolor2 45%, #mycolor3 10%);
}
Eveyrone is giving the to bottom solution but the trivial solution is to consider to top and keep the percentage values you are using in the picture:
linear-gradient(to top, #mycolor3 10%, #mycolor2 45%, #mycolor1 85%);
example:
body {
background: linear-gradient(to top, red 10%, purple 45%, blue 85%);
margin: 0;
height: 100vh;
}
Concerning the percentage between (50% and 30%), they are probably the color hints (also called color interpolation hints). From the new specification
Between two color stops there can be a color interpolation hint, which specifies how the colors of the two color stops on either side should be interpolated in the space between them (by default, they interpolate linearly). There can only be at most one color interpolation hint between any two given color stops; using more than that makes the function invalid.
example:
body {
background:
/* First gradient with hints*/
linear-gradient(to top, red 10%, purple 45%, blue 85%) left /45% 100%,
/* Second gradient with hints*/
linear-gradient(to top, red 10%,27.5% ,purple 45%, 57% ,blue 85%) right/45% 100%;
background-repeat:no-repeat;
margin: 0;
height: 100vh;
}
You need to specify the points in ascending order. Just invert the values you have (you don't really need the purple but could add it if desired):
body {
height: 100vh;
overflow: hidden;
background: linear-gradient(to bottom, blue 15%, red 90%) center/cover no-repeat;
}
.myheader {
width: 100px;
height: 100px;
background: linear-gradient(to bottom, blue 15%, purple 45%, red 90%);
}
<div class="myheader"></div>
The to bottom direction tells you that your gradient is going from top to bottom. So if the first color is 85%, that means that it goes down to 85% of the height of the container.
By inverting the percentage (85% -> 15%), you can achieve the result you want.
This is an example , use your rgba colors.
.myheader {
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%
}
The percent values must ascend in order. ( https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient )
$mycolor1: blue;
$mycolor2: purple;
$mycolor3: red;
.myheader {
background: linear-gradient(to bottom, $mycolor1 0%, $mycolor2 50%, $mycolor3 90%);
height: 200px;
width: 100px;
}
https://jsfiddle.net/qa1kLmfc/3/
For your gradient you probably could use just blue and red.
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>
This is how it looks in Chrome :
and this is a screenshot from Firefox :
It is clear from the screenshots that the gradient boundaries are jagged in Chrome. How can I make them smooth?
Here is my gradient in case that matters:
background-image: linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, red),
linear-gradient(-45deg, red 25%, transparent 25%, transparent 75%, red 75%, red);
background-size: 60px 60px;
background-position:0 0, 30px 30px;
EDIT:
Changing the background-size to 40px makes the gradient smooth but I want it to be smooth at all sizes.
Let me know if I need to provide additional code. Thanks.
Reason:
As I had described in comments, when the end point of one color is the start point of another (that is, a hard-stop gradient), the change of colors is sudden and such a sudden change at an angle is known for producing rough edges even in other browsers (which has maybe got fixed by now). Giving a gap between end point of one color and start of the next produces a smoother change of color and thus minimises rough edges.
Not much experimentation is required for this (or trial and error), a 1 or 2% gap is almost always sufficient.
Workaround:
Changing the color stop points to produce a more smooth change of colors instead of giving it a hard stop seems to be helping.
body {
background-image: linear-gradient(45deg, red 24%, transparent 26%, transparent 74%, red 76%, red), linear-gradient(-45deg, red 24%, transparent 26%, transparent 74%, red 76%, red);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
It is produced by a bug in chrome, that treats that kind of backgrounds as a 3D element. You can avoid that writing a border (it converts to flat the element), or with this property.
transform-style: preserve-3d;
OR
-webkit-backface-visibility: hidden; /* Webkit specifically! */
The border solution
border: 1px solid #fff;
See more about this bug:
http://adrianroselli.com/2014/10/linear-gradient-problems-in-chrome.html
Try this on the elements the gradient is in.
transform: translateZ(0);
It smoothens the gradient. See below.
td.normal {
width: 50px;
height: 50px;
background-image: linear-gradient(to top right, red 25%, transparent 25%, transparent 75%, red 75%, red),
linear-gradient(to top right, red 25%, transparent 25%, transparent 75%, red 75%, red);
}
td.smooth {
transform: translateZ(0);
}
<table>
<tr>
<td class="normal"></td>
<td class="normal"></td>
<td class="normal smooth"></td>
<td class="normal smooth"></td>
</tr>
</table>
Try adding backface-visibility: hidden
This happens sometimes when we ask a browser to skew an image.
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 have a which I am going to make into a button. The top half should be #ffd41a and the bottom half should be #fac915. Here is a link to the button at present. http://jsfiddle.net/WnwNW/
The problem that I'm facing is how should I deal with two background colors. Is there a way to do what I'm trying to do without the need for addition divs or spans? Can I have two background attributes within the same CSS class?
CSS3 provides a way to do this
background-image: linear-gradient(to bottom, #FFD51A 50%, #FAC815 50%);
background-image: -o-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -moz-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -webkit-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -ms-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
http://jsfiddle.net/WnwNW/1/
Yes and no. You can use two background attributes. However, this is only supported in CSS3. That means that two background images will break in older browsers. That being said, you can do something like this.
background-image: url(color1.png), url(color2.png);
background-position: bottom, top;
background-repeat: no-repeat;
I'm not sure if you can specify multiple background "colors."