Open robjtede opened 6 years ago
I want this feature too
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;
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.