Skip to content

CSS border gradients

Blog
  • Some of you might have noticed a feature on this forum that further extends the .highlight class in NodeBB from the default of a different colour border such as border-left: 1px solid blue; to something that looks like the below

    57b892b1-296a-4e42-8f05-e0a08efa2068-image.png

    And, as Sudonix has a number of “swatches” or “themes”, these are also colour coordinated to match. For example

    d0368af2-425b-48bf-ad62-f9df5a5450c8-image.png

    9524e9d0-91d7-41e3-9153-2b27aff26a74-image.png

    There are more - try changing the swatch, and then view the last post in each thread, and you’ll see where and how this is being applied.

    I want this effect!!

    Sure you do 🙂 Here’s how to get it. We are going to be extending the .highlight class of NodeBB and will be leveraging the :before pseudonym class as below.

    .highlight:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 0.375rem;
        padding: 3px;
        background: var(--bs-progress-bar-bg);
        -webkit-mask: linear-gradient(var(--bs-body-bg) 0 0) content-box, linear-gradient(var(--bs-body-bg) 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    

    What does this do?

    In summary, this CSS snippet creates a highlighted effect around an element by using an absolutely positioned pseudo-element with a special mask to create an outline or glowing effect. The actual visual appearance would depend on the colours defined by the --bs-progress-bar-bg (note that this is not a NodeBB variable, but one I’ve defined which this forum uses - you’ll need to factor this into your colour scheme) and --bs-body-bg variables, but the technique is quite clever and allows for flexible styling.

    What does your --bs-progress-bar-bg class look like?

    Here’s an example

    --bs-progress-bar-bg: linear-gradient(45deg, #5E81AC, #88C0D0, #8FBCBB, #A3BE8C, #D08770, #BF616A);
    

    Let’s break down the properties to understand how all of this works…

    • content: ""; - This rule sets an empty content for the pseudo-element. This is necessary for the pseudo-element to be rendered.
    • position: absolute; - This rule positions the pseudo-element absolutely within its containing element.
    • inset: 0; - This shorthand rule sets the top, right, bottom, and left properties to 0, effectively making the pseudo-element cover the entire space of its containing element.
    • border-radius: 0.375rem; - This rule sets the border radius of the pseudo-element to create rounded corners. The value “0.375rem” is equivalent to 6 pixels.
    • padding: 3px; - This rule adds padding of 3 pixels to the pseudo-element.
    • background: var(--bs-progress-bar-bg); - This rule sets the background color of the pseudo-element to the value of the CSS custom property “–bs-progress-bar-bg”. Custom properties are a way to define reusable values in CSS.
    • -webkit-mask: linear-gradient(var(--bs-body-bg) 0 0) content-box, linear-gradient(var(--bs-body-bg) 0 0); - This rule applies two linear gradients as masks to the pseudo-element. These gradients essentially create transparent regions in the pseudo-element, revealing the background color underneath.
    • -webkit-mask-composite: xor; - This rule sets the compositing mode for the masks. The “xor” mode combines the two masks using the XOR (exclusive OR) operation.
    • mask-composite: exclude; - This rule sets the compositing mode for the mask to “exclude”. This means that areas where the mask and the content overlap will be excluded, effectively creating a cutout effect.
    • pointer-events: none; - This rule ensures that the pseudo-element does not respond to pointer events, allowing clicks and other interactions to pass through to the underlying elements.

    Using this approach, it’s possible to extend the capabilities of CSS much further than you probably imagined. Obviously, this isn’t something you’d want to overuse, but it can certainly provide a much needed edge for when you are trying to draw attention to a specific object or element.

    Enjoy.

  • i do it but not working last message highlight.

  • @cagatay said in CSS border gradients:

    i do it but not working last message highlight.

    Can you provide the CSS you used?

  • .highlight:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 0.375rem;
        padding: 3px;
        background: var(--bs-progress-bar-bg);
        -webkit-mask: linear-gradient(var(--bs-body-bg) 0 0) content-box, linear-gradient(var(--bs-body-bg) 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    
    

    this one

  • @cagatay Yes, that’s because you do not have a variable called var(--bs-progress-bar-bg) in your swatch.

    See below for example

    --bs-progress-bar-bg: linear-gradient(45deg, #5E81AC, #88C0D0, #8FBCBB, #A3BE8C, #D08770, #BF616A);
    
  • where i should add this code? in css also?
    added light.css 🙂

  • @cagatay Yes, that works as intended, although you have an extra border being added. To remove that, in your custom CSS, locate the below block

    .page-topic .topic .posts.timeline .timeline-event.highlight, .page-topic .topic .posts.timeline > [component="post/placeholder"].highlight, .page-topic .topic .posts.timeline > [component=post].highlight
    

    and remove it.

  • i deleted nothing changed.

  • @cagatay It has changed as the extra border is no longer present

    23854655-2b10-48cb-a1af-8b4a2ec64833-image.png

  • ah f5 need 🙂


  • 3 Votes
    4 Posts
    76 Views

    @crazycells said in CSS code customization for the link preview plugin:

    does OGProxy show the pdf previews as well?

    Not yet, but it could with a bit of additional code.

  • 15 Votes
    51 Posts
    2k Views

    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS

  • Rotating Star Effect

    Solved Let's Build It
    17
    12 Votes
    17 Posts
    460 Views

    @phenomlab thanks a lot for these, both of the below are awesome! ♥

    https://codepen.io/bennettfeely/pen/vYLmYJz

    https://codepen.io/C-L-the-selector/pen/MWZbWBo

  • hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    604 Views

    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function

    document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); })

    The CSS for start is below

    .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; }

    And this is the corresponding keyframe

    @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } }

    It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.

  • chat list navbar

    Solved Customisation
    30
    3 Votes
    30 Posts
    2k Views

    No no it’s ok @phenomlab
    I just comment the 2 lines mentionned aboves 😉

  • 1 Votes
    1 Posts
    160 Views
    No one has replied
  • 5 Votes
    4 Posts
    351 Views

    @crazycells love this article. You’re absolutely right about people using colors that are either completely at odds with the scheme on their own site, or have no real concept of theming itself or swatches.

    There’s nothing worse than garish colour on a web site. Nothing more than back button fodder.

  • 3 Votes
    12 Posts
    979 Views

    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

    body { font-family: "Poppins"; font-size: 16px; }

    Essentially, you use the font-size CSS directive.