I have to create a border-right on td tag which is transparent only in the ends i.e the border must be of the width 1px in the center and keep decreasing till the end. How can I achieve this?
This might what you're looking for
border-image: linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%;
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.
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')
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.
I have been trying to add a drop-shadow to the top floating navbar in Twitter Bootstrap
Here's my site:
http://www.japaneselanguagefriend.com/application/home.php
I believe this is the correct area in the bootstrap.min.css to target the drop shadow?
.navbar-inner
.navbar-inner{min-height:45px;padding-left:25px;padding-right:25px;background-color:#fafafa;background-image:-moz-linear-gradient(top,
#f89406, #fbb450);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f89406),
to(#fbb450));background-image:-webkit-linear-gradient(top, #f89406,
#fbb450);background-image:-o-linear-gradient(top, #ffffff, #f2f2f2);background-image:linear-gradient(to bottom, #f89406, #fbb450);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',
endColorstr='#fff2f2f2', GradientType=0);border:1px solid
#d4d4d4;-webkit-border-radius:155px;-moz-border-radius:155px;border-radius:155px;-webkit-box-shadow:155
155px 155px rgba(345, 5, 5, 5);-moz-box-shadow:515 155px 155px
rgba(345, 0, 0, 5);box-shadow:155 155px 45px rgba(0, 0, 0,
5);*zoom:1;}.navbar-inner:before,.navbar-inner:after{display:table;content:"";line-height:5;}
I then preceded to adjust the mox-box-shadow and webkit-box-shadow numbers accordingly. I still didn't see a change. So then I raised the numbers really high, above the 100s just to see if anything is actually changing, and still no effect or drop shadow, can anyone tell me what I am doing wrong? thanks!