Newbi Newbi - 2 months ago 10
jQuery Question

Border Image with Linear Gradient

I not expert in Jquery, but I tried build underline color with random color for

each li
like example this is a rough structure : Jsfiddle here

I use function random color in Jquery, how to set
Linear gradient
in
function random color
to looks like example ?

I try

FROM
return 'radial-gradient(at top left, '+c1.rgb+'25%,'+c2.rgb+'50%,'+c3.rgb+'100%)';

TO
return 'linear-gradient(left, '+c1.rgb+'25%,'+c2.rgb+'50%,'+c3.rgb+'100%) 0 0 100% 0/0 0 5px 0 stretch';


And change function Jquery from
background
to
border
, but not working

Could you please tell me where I am doing wrong?

Thanks Advance

Answer

There is a css property called border, it takes as a param the thickness, the type of border and the color of the border

if you want to use a gradient use the css property border-image

<div class="box">

  hey there
</div>

css:

.box{
      width: 250px;
      height: 20px;
      background: transparent;
      border-bottom: 5px solid transparent;
      -moz-border-image: -moz-linear-gradient(left,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0) 100%);
      -webkit-border-image: -webkit-linear-gradient(left,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0) 100%);
      border-image: linear-gradient(left,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0) 100%);
      border-image-slice: 1;
    }

http://jsfiddle.net/agkety8w/

in your case do the following: the gradient:

 return 'linear-gradient(to left,  '+c1.rgb+' 0%, '+c2.rgb+' 50%, '+c1.rgb+' 

the function:

function PPAP() {
    elements = $('li');
    elements.each(function() { $(this).css({"borderImage":random(), "borderImageSlice": "1","borderBottom": "5px solid transparent"}); });
}

https://jsfiddle.net/tdeqvoaa/

Comments