Dynamic masking with css

Question

I would like to have a mask that's fading out 16px from both sides.

So like: 16px fading in - white - 16px fading out.

What I got is this: DEMO

-webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparent, white);
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-size: 16px 40px, 16px 40px;
-webkit-mask-position: 0 0, 100% 0;
-webkit-mask-origin: padding-box, padding-box;

The only problem is that it's not visible in the middle. How can i fix this?

score 1 · Answer 1 · answered Aug 21 '14 at 07:45

Try this.

Here is the codepen for demo CODEPEN

Also I have attached the code, If you have any doubt let me know.

html

<div class="div">
    <span>Example Program</span>
  </div>

CSS

.div {
  box-shadow: 0 16px 0px 0px white, 0 -16px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
  -webkit-mask-position: 0 0, 100% 0;
-webkit-mask-size: 16px 40px, 16px 40px;
width: 30%;
height: 40px;
margin: 50px;
background: red;
}

span {
  display: block;
background: rgb(255, 255, 255);
height: 40px;
}

score 1 · Accepted Answer · answered Aug 21 '14 at 07:55

One option is to add a third gradient (which will actually be uniformly white) covering the whole surface, and use -webkit-mask-composite: copy to make sure the other two gradients replace the parts on the sides:

  -webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparent, white), linear-gradient(to right, white, white);
  -webkit-mask-composite: copy;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-size: 16px 40px, 16px 40px, 100% 100%;
  -webkit-mask-position: 0 0, 100% 0, 0 0;
  -webkit-mask-origin: padding-box, padding-box, padding-box;

Demo: http://codepen.io/anon/pen/crEyL

Note that of course, all of this only works on WebKit browsers.

score 0 · Answer 3 · answered Aug 21 '14 at 08:03

This did the trick. Pretty hacky solution.

-webkit-mask-image: linear-gradient(white, white),linear-gradient(to right, white, transparent), linear-gradient(to left, white, transparent);
-webkit-mask-repeat: repeat,no-repeat, no-repeat;
-webkit-mask-size: 100% 100%,16px 100%, 16px 100%;
-webkit-mask-position: 0 0,0 0, 100% 0;
-webkit-mask-origin: padding-box, padding-box, padding-box;
-webkit-mask-composite: source-out;

Solution demo

Dynamic masking with css

3 Answers3