Динамическое маскирование с помощью CSS

Question

Я хотел бы иметь маску, которая исчезает 16 пикселей с обеих сторон.

Так вроде: 16px fading in - white - 16px fading out,

Что я получил, это: ДЕМО

-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;

Единственная проблема в том, что он не виден посередине. Как я могу это исправить?

Answer 1

Один из вариантов - добавить третий градиент (который на самом деле будет равномерно белым), покрывающий всю поверхность, и использовать -webkit-mask-composite: copy чтобы убедиться, что два других градиента заменяют части по бокам:

  -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;

Демо: http://codepen.io/anon/pen/crEyL

Обратите внимание, что все это работает только в браузерах WebKit.

Answer 2

Попробуй это.

Вот кодекс для демонстрации CODEPEN

Также я приложил код, если у вас есть какие-либо сомнения, дайте мне знать.

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;
}

Answer 3

Это добилось цели. Довольно хакерское решение.

-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;

Решение демо