I have the following style applied to my div element:
background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);
This has the desired effect (being an inner drop shadow only at the top of the div). I would like to apply the same effect at the bottom of the div. The following line does it well, but it seems to override the first, so I can only get one or the other.
background-image: -moz-radial-gradient(50% 110%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);
Can someone show me how I can have multiple radial gradient backgrounds per element? I notice that webkit can do this easily, but I'm looking for a cross browser implementation/alternative.
Thanks
The best way to do that is to list them in the background property. But keep in mind that the order of properties is extremely important.
background:
radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background then -size and -repeat, otherwise it won't work. It took me something like 30 mins to get it. Hope it will be helpful for someone.
Just sepereate each one with a comma.
Something like this :
background-image: url(),url(), url();
Ofcourse instead of url you can put gradient.
And all modern browsers support this feature ( meaning IE does not).
In order to make it available in IE, you can use pie.htc
You just list them one after the other - like this:
background: radial-gradient(top left,
rgb(205, 230, 235) 34%,
transparent 34%),
radial-gradient(center,
rgb(205, 230, 235) 34%,
transparent 34%);
You can see it working at http://dabblet.com/gist/2759668
You have to set the value of the radial gradient to transparent in order to let the other background come through:
background-image: radial-gradient(closest-corner at 40% 70%,#FFFFFF 0%, rgb(171,171,171),50%,transparent),
radial-gradient(closest-corner circle at 80% 20%, #FFFFFF 0%, rgb(171,171,171),20%,transparent),
radial-gradient(closest-corner circle at 10% 10%, #FFFFFF 0%,rgb(171,171,171) 25%);
Related
This is what I currently have. The image and radial-gradients so far are working, but I'm not sure how to add the horizontal and vertical radial-gradients. What I still need to add are radial-gradients with a size of 5% in the vertical and horizontal positions placed at 90% and 10%. with the color being white stopping at 15% followed by the color rgba(0,0,0,0) stopping at 40%. I'm just unsure how to get the vertical and horizontal positioning. The problem doesn't specify a shape for the radial-gradient either. enter image description here
body {
background: radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%), radial-gradient(circle closest-corner at 80% 40%, white 15%, rgba(0, 0, 0, 0) 30%), url(https://i.stack.imgur.com/epG4I.jpg);
background-color: rgb(151, 151, 151);
}
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 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%);