𝗦𝗛𝗔𝗗𝗢𝗪 Comments

𝗦𝗛𝗔𝗗𝗢𝗪

•Created by 𝗦𝗛𝗔𝗗𝗢𝗪 on 10/24/2024 in #front-end

Responsive screens should to be based in the height also?

For example, I have a container that should take 100% of the viewport height, but some components aren't shrinking well because I'm using a grid, and I don't know a better way to do it. What should I do?

4 replies

KPCKevin Powell - Community

•Created by 𝗦𝗛𝗔𝗗𝗢𝗪 on 10/23/2024 in #front-end

How apply this border gradient?

@nilaallj thanks you so much! : D it worked for me, I am very grateful

26 replies

KPCKevin Powell - Community

•Created by 𝗦𝗛𝗔𝗗𝗢𝗪 on 10/23/2024 in #front-end

How apply this border gradient?

I don't understand, I'll see if has something affecting my result

26 replies

KPCKevin Powell - Community

•Created by 𝗦𝗛𝗔𝗗𝗢𝗪 on 10/23/2024 in #front-end

How apply this border gradient?

yes, the border is calculated as 2px, the border also is applied as transparent, I don't understand the reason for it don't work

.element-with-gradient-border {
  --border-width: 2px;
  position: relative;
  border: var(--border-width) solid transparent;
  @apply origin-center bg-origin-border;

  &::before {
    content: '';
    position: absolute;
    inset: calc(var(--border-width) * -1);
    border: inherit;
    border-radius: 24px;
    background: linear-gradient(white,red) border-box;
    mask:
      linear-gradient(#000 0 0) padding-box exclude,
      linear-gradient(#000 0 0);
    pointer-events: none;
  }
}

.element-with-gradient-border {
  --border-width: 2px;
  position: relative;
  border: var(--border-width) solid transparent;
  @apply origin-center bg-origin-border;

  &::before {
    content: '';
    position: absolute;
    inset: calc(var(--border-width) * -1);
    border: inherit;
    border-radius: 24px;
    background: linear-gradient(white,red) border-box;
    mask:
      linear-gradient(#000 0 0) padding-box exclude,
      linear-gradient(#000 0 0);
    pointer-events: none;
  }
}