Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

color stop positions #6

Open
robjtede opened this issue Jul 16, 2018 · 2 comments
Open

color stop positions #6

robjtede opened this issue Jul 16, 2018 · 2 comments

Comments

@robjtede
Copy link

robjtede commented Jul 16, 2018

I'm not used to how PostCSS works under the hood so this might be a silly question.

Is it possible this plugin could support a subset of the positional arguments for color stops eg:

linear-gradient(
  to top,
  black 0%,
  ease-in-out,
  transparent 15%,
  linear,
  transparent 100%
);

I understand that this probably not possible to polyfill the entire set of positional arguments (calc, mixing %/px etc.) but surely just linearly interpolating between percentages should be possible given the output css uses percentages?

I came across this limitation while using mask-image with the linear gradient as a fade-out on the bottom of an image. This problem would usually be easily alleviated with background-size but, unfortunately, mask-image-size works differently such in such a way that anywhere not covered by mask-image is masked out. So the image fades nicely then just becomes transparent for the most part.

@Grawl
Copy link

Grawl commented Mar 22, 2019

I want this feature too

@Ambient-Impact
Copy link

Ambient-Impact commented Nov 29, 2019

I ran into this same problem with mask-image, and I seem to have solved it by using multiple gradients, one that's a solid black and another with a fixed height as the fade, along with a few of the other mask-* properties to place and composite them. I compile from Sass before running PostCSS, but you should be able to adapt this to vanilla CSS easily:

  // We have to define the linear-gradient with easing separately as a custom
  // property because either PostCSS or postcss-easing-gradients replaces the
  // comma in "linear-gradient(black, black)" with a semicolon, breaking the
  // value. 🤦‍
  --gradient-mask: linear-gradient(
    transparent,
    #{$easing-decelerate},
    black
  );

  $fade-size: 4em;

  // The first linear-gradient is used as a solid colour that spans the full
  // width and height, while the second gradient is the actual fade out. This
  // allows us to set a specific size for the fade out (see $fade-size) even
  // though postcss-easing-gradients doesn't yet support colour stop positions.
  // This works because of the mask-composite values, which cause the solid
  // colour gradient (the first) to have the alpha of the second (the fade)
  // substracted from it, so that it doesn't overwrite the fade portion.
  //
  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite
  //   The standardized composite property, supported by Firefox/Gecko and Edge
  //   18 (pre-Chromium) as of 2019-11-29.
  //
  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite
  //   The non-standard property required for Chrome/Blink, Opera, Android
  //   WebView, and Safari/WebKit as of 2019-11-29.
  //
  mask-image:     linear-gradient(black, black), var(--gradient-mask);
  mask-size:      100%, 100% $fade-size;
  mask-repeat:    no-repeat;
  mask-position:  center, center bottom;
  -webkit-mask-composite: xor, source-over;
  mask-composite: subtract, add;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants