• 0

[CSS] Gradient border with three colours?


Question

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.

 

 

7 answers to this question

Recommended Posts

  • 0

.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 by SinsOfCube
  • 0
  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 
  • 0

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/

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • it is delayed and has no definitive release date... that is "delayed indefinitely".
    • About that Trump's mobile 🤣🤣🤣  
    • AliExpress faces EU crackdown, makes promises to fight illegal products by Paul Hill The European Commission has taken two significant actions against the Chinese online marketplace AliExpress under the Digital Services Act (DSA) in a bid to enhance user and consumer safety online. The first action was to get AliExpress to commit to several legally binding commitments to address issues related to advertising and recommender systems. The second action was the publication of preliminary findings which found that AliExpress had breached obligations regarding the spread of illegal products. AliExpress can now respond to the Commission but if the broken rules are confirmed then AliExpress can expect to be fined. The Digital Services Act is a new tool that the EU has to regulate large online platforms. It aims to level the business playing field, protect fundamental rights of users, create a safer digital space, and improve transparency from businesses. AliExpress's pledges: More transparency, safer shopping As part of the pledges made by AliExpress, it will do more to monitor and detect illegal products such as medicines, food supplements, and adult material propagated through hidden links and affiliate programs. To help flag illegal items, AliExpress has promised to improve its notice and action mechanism. Other pledges include enhancements to the internal complaint handling system; more transparency for advertising and recommender systems; better traceability of traders on the platform; and improved data access for researchers. By implementing these rules, the European Commission hopes it can make AliExpress safer for registered and non-registered users by limiting the exposure to illegal content. Deep dive into AliExpress's alleged failures With regards to the preliminary findings, the Commission found that AliExpress had underestimated the risks because it had not allocated enough resources to moderation systems for illegal products. It also found that the company had failed to consistently enforce its penalty policy against those publishing illegal content. The Commission also discovered systemic failures in AliExpress’s proactive content moderation systems that allowed malicious traders to continue to operate or start operating on the platform. AliExpress is designated as a Very Large Online Platform (VLOP) which means it has to meet certain standards set out by the EU. The aforementioned violations are against the quality of operation that the EU expects from VLOPs. The company now has the right to defend itself against the EC’s findings, it can examine the documents and reply in writing, but if the findings are confirmed, AliExpress could face fines and be required to submit an action plan.
    • Author/Neowin... The title is incorrect and misleading... By the official blog post, it's not "indefinitely". There's a clear statement that development continues with a few specific target areas, and a new release date TBD and announced later. If it is later announced to be cancelled or delayed indefinitely, that's another story.
  • Recent Achievements

    • First Post
      xuxlix earned a badge
      First Post
    • First Post
      Tomek Święcicki earned a badge
      First Post
    • One Year In
      carlitin86 earned a badge
      One Year In
    • Reacting Well
      Peterlll06 earned a badge
      Reacting Well
    • Week One Done
      Peterlll06 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      674
    2. 2
      ATLien_0
      283
    3. 3
      Michael Scrip
      225
    4. 4
      +FloatingFatMan
      192
    5. 5
      Steven P.
      145
  • Tell a friend

    Love Neowin? Tell a friend!