search

wagerfield / cinnamon

Lean boilerplate for front-end projects
MIT License
36 stars 21 forks source link

mask-image property #1

Open fi-tomek-augustyn opened 12 years ago

fi-tomek-augustyn commented 12 years ago

Hey Matt,

can I suggest adding mask-image property to the mixins? I've used it recently for alpha masking – alpha gradient masks doesn't seem to work in Firefox yet though.

Cheers, Tomek

-webkit-mask-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.0, rgba(0,0,0,0)),
    color-stop(0.1, rgba(0,0,0,1)),
    color-stop(0.9, rgba(0,0,0,1)),
    color-stop(1.0, rgba(0,0,0,0))
);
darcyclarke commented 12 years ago

Hey Tomek,

This is a nice property but it's pretty edge-case. As you note, the support is far off and there's no-one working on a specification detailing the standard implementation (other then this small webkit specific documentation: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-mask).

That said, people are working very diligently on the filters specification found here: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html These utilize SVG and there's some good examples of how to utilize effects on elements here: https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content

Again, I think this is a cool property but probably not the right time to implement because of the lack of support.

Cheers, D