-
Notifications
You must be signed in to change notification settings - Fork 22
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
Comments
I want this feature too |
I ran into this same problem with // 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
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:
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 withbackground-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.The text was updated successfully, but these errors were encountered: