nilaallj
nilaallj
PostsComments
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
Glad to hear that. You’re welcome!
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
It’s strange. I have pretty much exactly the same code in front of me right now and it works. Have a look: https://codepen.io/nilaallj/pen/dyBLqbV
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
It could have something to do with the mask also.
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
Not sure what’s going on here to be honest. Maybe check the calculated values in the inspector to make sure they match my example?
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
Does the border on the main element have transparent set as color?
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
Screenshot?
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
So by using the background longhands it should look like this: 
  background-image: /* Your gradient */
  background-clip: border-box;
  background-origin: border-box;
  background-image: /* Your gradient */
  background-clip: border-box;
  background-origin: border-box;
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
Ah, I see. I think this might be because background-origin is not set to border-box. In my example I used the background shorthand which should set border-box on both background-origin and background-clip.
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
Can you provide a codepen link? (:
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
Without mask the pseudo element with the gradient will cover the entire element. So we use mask to cut trough the pseudo element, but only the padding-box. What’s outside the padding-box (which is the border area) is left intact.
26 replies
KPCKevin Powell - Community
Created by 𝗦𝗛𝗔𝗗𝗒π—ͺ on 10/23/2024 in #front-end
How apply this border gradient?
Not sure if this is what you are looking for, but this is how I make gradient borders on elements with fully or partially transparent backgrounds: 
.element-with-gradient-border {
  --border-width: 5px;
  position: relative;
  border: var(--border-width) solid transparent;
  border-radius: 2.5px;
  
  &::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--border-width));
    border: inherit;
    border-radius: inherit;
    background: linear-gradient(blue, green) border-box;
    mask:
      conic-gradient(#000 0 0) padding-box exclude,
      conic-gradient(#000 0 0);
    pointer-events: none;
  }
}
.element-with-gradient-border {
  --border-width: 5px;
  position: relative;
  border: var(--border-width) solid transparent;
  border-radius: 2.5px;
  
  &::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--border-width));
    border: inherit;
    border-radius: inherit;
    background: linear-gradient(blue, green) border-box;
    mask:
      conic-gradient(#000 0 0) padding-box exclude,
      conic-gradient(#000 0 0);
    pointer-events: none;
  }
}
You define the gradient as a background on a pseudo element.
26 replies
KPCKevin Powell - Community
Created by dimal on 9/14/2024 in #front-end
How to achieve BEM / CSS Module type scoping with @scope
@scope provides selector isolation, not style isolation. This means that color and other inheritable properties still reaches beyond the scope limit. That is expected and according to the specification. You get this problem in your second example because the inner element still inherits normally from its ancestors. When using @scope it often makes sense to only declare inheritable values on very generic selectors, such as p, span, h2, figcaption etc. Or on wrappers that doesn’t have descendants beyond the scope limit. Hope it helps! πŸ™‚
3 replies