nilaallj Comments - Answer Overflow

nilaallj

•Created by louichb22 on 1/5/2025 in #front-end

Inset property vs top/right/bottom/left

Universal property values like inherit, revert, initial etc. can’t be used for individual values in shorthands. However, inset: initial would work for setting all its longhands to their initial values. It is explained here: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#omitting_properties

4 replies

KPCKevin Powell - Community

•Created by GeorgeCraft225 on 1/5/2025 in #front-end

Recreate a circle gradient border

Not sure exactly what you mean by that. If you want to change the size of the border you change the border width (which is a variable in this solution in order to work with the pseudo element). If you want to change the size of the entire element you use width and hight. The gradient itself is a background image of the entire element, you can change it with the gradient variable. 😃

15 replies

KPCKevin Powell - Community

•Created by GeorgeCraft225 on 1/5/2025 in #front-end

Recreate a circle gradient border

If you for whatever reason need a transparent background you can use the approach from this pen; putting the gradient on a pseudo element with some masking. The pen also includes a much simpler solution for browsers with support for background-clip: border-area (only Safari for the time being). https://codepen.io/nilaallj/pen/dyBLqbV

15 replies

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

Gaming

Programming