My goal is to give some divs a top and left inner shadow. To do that, I have given the divs two background-images with linear-gradient:
background-image: linear-gradient(90deg, #263B4B 0, transparent 50px),
linear-gradient(180deg, #263B4B 0, transparent 50px);
This looks fine in Chrome 39 and IE 11, but not in Firefox 32.
Firefox doesn't display it correctly.
At first, I had the following CSS, which worked fine, but since there are many divs with this shadow, the page rendering was extremly slow to unusable, especially on mobile. So I don't want to use box-shadow.
box-shadow: 18px 31px 95px 0px rgba(0, 0, 0, .2) inset;
How do I get this to work on Firefox without using an image file?
JSFiddle: http://jsfiddle.net/eLkhwoqg/2
Firefox's interpolation between other color stops and the transparent keyword isn't quite right. Because transparent corresponds to rgba(0, 0, 0, 0), Firefox is using that value to calculate the gradient, except it is doing so in non-premultiplied RGBA space, which results in the gradient transitioning from your given color to black. We know this behavior is in fact incorrect, because the spec says so.
Fortunately, the workaround is easy: simply use a zero alpha version of the same color you're using and Firefox will interpolate the gradient correctly:
background-image: linear-gradient(90deg, #263B4B 0, rgba(38, 59, 75, 0) 50px),
linear-gradient(180deg, #263B4B 0, rgba(38, 59, 75, 0) 50px);
Once this is fixed, you will be able to use the transparent keyword going forward.
Related
I need to create a gradient from left to right with three vertical colors and another gradient on an angle. Apologies for the poor image below. The black line would represent the angle gradient (if you could imagine it fading into black).
I have tried numerous ways, However, I seem to not be able to do this.
I would require this in CSS. Any help would be much appreciate, any further information required please ask.
Thanks for your time.
Roddest.
Something like this, you can adjust the values as you want:
background: linear-gradient(45deg, rgba(0, 0, 0, 255), rgba(0, 0, 0, 0), rgba(0, 0, 0, 255)) no-repeat border-box, linear-gradient(to right, #0ff 10%, #f00 50%, #0ff 90%) no-repeat border-box;
There are two gradients, one black and transparent in the middle and from top right to bottom left, and a second from left to right, cyan, red and cyan.
I have the following table:
and this css for the table border:
border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #B3B3B3 20%) 0 0 0 1;
i want the border ends where the last list item bullet ends. Can i achieve this with the border-image property? Or is this possible at all? By the way the height of the list items may vary, not every item has the exact same height.
So this should be the result:
If you would be able to know the height of the either the ul or at least the last li, then a css only solution is definitely possible; otherwise, it gets tricky.
The linear-gradient function takes four values (see https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Values), one of which is the color-stop-list. If you set one stop to end and another to begin at the same point (either a percentage or a length, such as pixels), then you get a solid line at that stop with the defined or default angle.
So, you can get the gradient to stop at a fixed pixel point as follows:
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #b3b3b3 20%, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px))
Here, I am changing from the main color to a color with opacity: 0 at a point 25px from the full height of the box (since we are using to bottom). You can try to eyeball this for you project, or use JavaScript via Element.getBoundingClientRect().height (see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) on the last li to calculate the position of the list-item-type based on how you define that in your css.
To answer the question in your last comment, use the same logic and set a stop point 20px in:
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #b3b3b3 20px, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px))
Having said this you may consider handling the border on each individual li rather than on the ul, which would make it much easier to handle without JavaScript. You would then only need to supply linear-gradient values on the ul>li:first-child and ul>li:last-child using the principles above. Just keep in mind that if you use margin-top or margin-bottom on any li in the list, you will see gaps in your border.
Say we have two divs partially overlapping each other, of which the one has background-color: rgba(128, 0, 0, 0.3); z-index: 2 and the other background-color: rgba(0, 128, 0, 0.7); z-index: 1. Now I want to calculate the bgc value of the overlap area.
I performed a test on Chrome 62#MacOS, using the color picker to get the composite color value, ant the result is rgb(97, 115, 61). And I find that if I use opacity instead of the alpha channel of rgba, the value will slightly change to rgb(98, 117, 63). I can figure out neither one.
As I speculate, the red layer should take up 30%, the green one (1-30%)*70=49%, and the white background 21%, so that the result should be rgb(92, 116, 54), where the margin of error seems pretty large?
So why does this happen? Do other browsers behave alike? Is there a spec about it?
Check the demo here
I have the following CSS code:
background: rgba(0, 0, 0, 0.5) url(bg1.png) top left/auto 50em repeat, url(bg2.png) top left/50% 100% no-repeat;
I think it's syntactically right according to this w3schools reference.
However, neither Chrome nor Firefox shows any background for the div it is applied to. What can be the issue?
According to Mozilla MDN:
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
selector {
background: url(bg1.png) top left/auto 50em repeat,
rgba(0, 0, 0, 0.5) url(bg2.png) top left/50% 100% no-repeat;
}
try with
background: rgba(0, 0, 0, 0.5) url('bg1.png') top left 50em repeat, url('bg2.png')
I would like to make a gradient for a QStyleSheet that does the following:
1) Transparent top 40%.
2) Opaque middle 20%, going from black to white.
3) Transparent bottom 40%.
A good example would be thinking of a 3-color flag, but I want the top and bottom transparent, and where the top and bottom are transparent, and the center is going from solid-black to white.
Basically I would like to somehow merge the following two linear gradients together, but I lack the knowledge to do so.
background-color: QLinearGradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0.39 rgba(0, 0, 0, 0),
stop:0.4 rgba(0,0,0,255),
stop:0.6 rgba(0,0,0,255),
stop:0.61 rgba(0, 0, 0, 0)
);
and...
background-color: QLinearGradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
stop:0 rgba(0, 0, 0, 255),
stop:1 rgba(255, 255, 255, 255)
);
I think you might be able to use a gradient to achieve this, but it would be difficult.
However, the easier way would be to override the style's drawing for the scroll bars, and paint your black/white gradient while clipping it to ensure the desired areas are still transparent. Unfortunately, that solution doesn't rely solely on style sheets.
A third option, depending on your platform and capabilities, might be to create an image and set the background to that image, stretched (where necessary).