linear-gradients

I generated a gradient colobar with CSS3 styles ( fiddle ) and now want the color value of a specific location (by x and y coords) in that colorbar. As far as I know there is no direct way to do that. I see two options: Implement the gradient algorithm in JavaScript and calculate the value from scratch. Is there an exact definition how that algorithm works for multiple colors? Does the gradient look the same in every browser? Use a canvas and createLinearGradient method to draw the gradient and access the canvas directly to get the color value. Any other options? I chose to implement your

I have a table that has a column that shows a % value. To make it more visually appealing, I'd like to display a linear gradient background that corresponds to the % value (e.g. 50% would fill half of the width of the cell). I figured out how to make gradient background (using ColorZilla's gradient generator) but don't know how to set the width of the background fill.... Current code: <table border="1" cellpadding="0" cellspacing="0"> <tr> <td width="100" style="background: linear-gradient(to right, rgba(0,150,0,1) 0%,rgba(0,175,0,1) 17%,rgba(0,190,0,1) 33%,rgba(82,210,82,1) 67%,rgba(131,230

I want to create a striped border. I want to use the img tag or div tag to include the image on top of the Striped Border. This is how it needs to look like: Now I am trying like this with border image as svg. .feed-item:after { background: #0055b9; background: url(../images/studentslab_hover_stripe_bg.svg); background-repeat: no-repeat; background-size: 100% 100%; padding: 4vw 2.7vw 2vw 2vw; width: 104%; opacity: 0; } .feed-item:hover:after { opacity: 1; z-index: -1; } But in responsiveness, it's not covering full sometimes because my striped background image has dimension height and width.

There is a little SASS to LESS convergence here... Does anyone know what is the correct syntax for these? The code below is the pure SASS mixins I used to use. Thanks for helping @mixin linear-gradient($left, $right, $optional:false) { @if $optional and type_of($optional) == number { background: -webkit-linear-gradient($optional + deg, $left, $right); background: -o-linear-gradient($optional + deg, $left, $right); background: -moz-linear-gradient($optional + deg, $left, $right); background: linear-gradient($optional + deg, $left, $right); } @else { @if $optional == "right" { background:

I want to do this essentially in CSS: div { background: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); width: 1000px; height: 1000px; } <div>hello</div> But instead of a color , I want to gradient-fade-in-and-out a background image, like this: background: linear-gradient(to top, transparent, url(/myimage.png) repeat, transparent); How to accomplish this in CSS, or if it's not possible in CSS, in JS. My image is a seamless texture, so maybe that might factor into the equation since it is repeated. I also want to set the background-size to different sizes to figure

I made a gradient background and I want to centralize this block of text. My objetive is to create a header that centralizes in the middle of the screen no matter the resolution of the viewport. So I made this header an absolute position and used this centralization method I found online. It centralized perfectly, the problem is, the gradient background turns white (looks like the header is above the background on the body, I don't know). I've already tried using position fixed, but the problem persists, other types of position don't centralize. * { margin: 0px; padding: 0px; } body {