Axel Posted December 20, 2013 Share Posted December 20, 2013 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. Link to comment Share on other sites More sharing options...
0 SinsOfCube Posted December 20, 2013 Share Posted December 20, 2013 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. Link to comment Share on other sites More sharing options...
0 Axel Posted December 21, 2013 Author Share Posted December 21, 2013 That's brilliant thank you! Do you mind breaking down the gradient for me? The numbers at the end and the beginning? Link to comment Share on other sites More sharing options...
0 SinsOfCube Posted December 21, 2013 Share Posted December 21, 2013 (edited) .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 Link to comment Share on other sites More sharing options...
0 Axel Posted December 21, 2013 Author Share Posted December 21, 2013 .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: linear, 100% 0, 0 0, from(#4cd964), to(#4cd964), color-stop( 50%, #007aff)) 100% 1 Link to comment Share on other sites More sharing options...
0 Axel Posted December 21, 2013 Author Share Posted December 21, 2013 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. Link to comment Share on other sites More sharing options...
0 SinsOfCube Posted December 21, 2013 Share Posted December 21, 2013 http://jsfiddle.net/7493Y/1/ Old code: .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: .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/ Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted December 30, 2013 Veteran Share Posted December 30, 2013 Just to make gradients easier to create crossbrowser: http://www.colorzilla.com/gradient-editor/ Link to comment Share on other sites More sharing options...
Question
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.
Link to comment
Share on other sites
7 answers to this question
Recommended Posts