Alex Khomenko

Gradient border

Here I’ve done some kind of border with gradient, maybe it would be useful for someone http://jsfiddle.net/okhomenko/HdaRE/6/

Code is pretty simple - we create box, put background-images on it and crop its with background-size. Also we should set bakground-repeat: no-repeat.

#bordergradient {
    background-image:
        -moz-linear-gradient(left   top, red,     #7BCBEF),
        -moz-linear-gradient(center top, blue,    #7BCBEF),
        -moz-linear-gradient(right  top, green,   #7BCBEF),
        -moz-linear-gradient(center top, #7BCBEF, rgba(123, 203, 239, 0));

    background-size:
        100% 1px,
        3px 100%,
        100% 2px,
        5px 100%;
        
    background-position:
        left top,
        right top,
        left bottom,
        left top;

    background-repeat:
        no-repeat;
}

I used this technique like this

Inset shadow from one side

Update: It’s appeared as it should be much simpler than my solution, we can just use: box-shadow: inset 0 10px 20px -10px #444;

Thanks to @LeaVerou for help

---

Some time ago I needed shadow inside block, but inset shadow by box-shadow: inset I didn’t like because it render from all sides and I wanted only top-side shadow, so I’ve tried to do it with gradient. And here is what I get - http://jsfiddle.net/okhomenko/fUWPu/5/.

It’s not so g0od in Opera (right image). I would be appreciated if someone know how to modify my code for work good in Opera and make it render in IE