[CSS] Gradient border with three colours?

[Axel]

Hi all.

 

I've been googling around and found many tutorials which show how to create a css border gradient with 2 colours but none with 3.

 

http://jsfiddle.net/MJhuw/

 

That's as far as I can get, I'd like to have it fade back to the original.

 

Many thanks.

 

 

[SinsOfCube]

http://jsfiddle.net/MJhuw/4/

 

Added a color-stop, set to halfway( 50% ) and switched color values, so that the beginning and end are the same and only the halfway color is differant.

[Axel]

That's brilliant thank you! Do you mind breaking down the gradient for me? The numbers at the end and the beginning?

[SinsOfCube]

.left-to-right {
    border-width: 0 0 3px 0;
    -webkit-border-image: 
        -webkit-gradient(linear, 100% 0, 0 0, from(#4cd964), to(#4cd964), color-stop( 50%, #007aff)) 100% 1;
}

From() defines the color at the start, so the border starts with the color #4CD964.

To() defines the color at the end, so the border end with the color #4CD964.

Color-stop() defines a color somewhere inbetween the start and end. You can use more color-stops to add more colors to the gradient, the first value of color-stop defines the location, in this case 50% of the length of the border. The second value defines the color at that location, so halfway the border the color is #007AFF.

 

I hope that's clear enough, I tend so suck at explaining myself :P

Edited December 21, 2013 by SinsOfCube

[Axel]

  On 21/12/2013 at 16:04, SinsOfCube said:

.left-to-right {
    border-width: 0 0 3px 0;
    -webkit-border-image: 
        -webkit-gradient(linear, 100% 0, 0 0, from(#4cd964), to(#4cd964), color-stop( 50%, #007aff)) 100% 1;
}

From() defines the color at the start, so the border starts with the color #4CD964.

To() defines the color at the end, so the border end with the color #4CD964.

Color-stop() defines a color somewhere inbetween the start and end. You can use more color-stops to add more colors to the gradient, the first value of color-stop defines the location, in this case 50% of the length of the border. The second value defines the color at that location, so halfway the border the color is #007AFF.

 

I hope that's clear enough, I tend so suck at explaining myself :p

 

 

That's great thanks.  But I was thinking more specifically these highlighted numbers:

 

  Quote

linear, 100% 0, 0 0, from(#4cd964), to(#4cd964), color-stop( 50%, #007aff)) 100% 1 

[Axel]

Also, If I try to make the border full.  It doesnt appear to take into account the left and right side?

 

http://jsfiddle.net/7493Y/

 

Thanks for your help so far, very much appreciate it.

[SinsOfCube]

http://jsfiddle.net/7493Y/1/

 

Old code:

 

 

  Quote

.left-to-right {

    border-width: 3px 3px 3px 3px;

    -webkit-border-image: 

        -webkit-gradient(linear, 100% 0, 0 0, from(#4cd964), to(#4cd964), color-stop( 50%, #007aff)) 100% 1;

}

 

New Code:

 

 

  Quote

.left-to-right {

    border-width: 3px;

    border-image: 

        -webkit-gradient(linear, left center, right center, from(#4cd964), to(#4cd964), color-stop( 50%, #007aff)) 3 repeat repeat

}

 

Changes:

• Changed -webkit-border-image to border-image, for some reason -webkit-border-image also fills the background with the gradient.
• Changed to reflect what the values there mean, "left center" defines the location of where the gradient starts and "right center" defines the location where the gradient ends. If you change these values you can pick how the gradient flows, from left to right, top to bottom or even left bottom, to right top to get a 45 degrees gradient.
• Changed the 2 numbers after the gradient definition to adjust the locations the image is cut

 

More information about border-image: http://css-tricks.com/understanding-border-image/

[Seahorsepip Veteran]

Just to make gradients easier to create crossbrowser: http://www.colorzilla.com/gradient-editor/