Градиент исчезает с трех сторон

Я пытаюсь сделать div, где цвет фона исчезает слева, сверху и снизу. Я хочу, чтобы div постепенно исчезал от #FFF до #CCC слева направо и исчезал до #FFF сверху и снизу 30px или 10%.Градиент исчезает с трех сторон

Для этого мне кажется, что нужно градиенты слоя. Я пробовал radial gradients, но они, кажется, предоставляют только круги и многоточие, чего я не ищу. Я ищу линейное увядание.

Итак, я попробовал градиенты слоев, используя элемент before, и по какой-то причине верхний градиент не переписывает нижний.

JSfiddle

div::before { 
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(204,204,204,0.5) 10%,rgba(204,204,204,0.5) 90%,rgba(255,255,255,1) 100%); 
} 

div { 
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%); 
}

источник

2014-09-02 James G.

Как вы можете иметь градиент в двух направлениях одновременно? Не могли бы вы разместить картину того, что вы собираетесь делать? Градиент - поле векторов с одним направлением. – Optox

@ Optox см. Мой ответ. По сути, я хочу градиенты слоя. Линейный градиент идет слева (#FFF) вправо (#CCC), который исчезает сверху и снизу. –

Хорошо, так что это не является совершенным, но я близко к тому, что я хотел. Если кто-то подумает, что они могут улучшить это, продолжайте. Если вы сделаете лучше, чем мой, я выберу ваш ответ.

Мое основное замешательство заключалось в том, что я не осознал, что псевдоэлемент расположен поверх основного элемента. Я думал, что перед элементом был помещен ::before. Как только я понял это, мне просто пришлось переключать градиенты и играть с непрозрачностью.

По-прежнему существует четкая линия, в которой находится верхний (и нижний) элемент. Я не знаю, как это исправить.

new JSfiddle

div::before{ 
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(204,204,204,0.1) 60%); 
} 

div { 
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(204,204,204,0.5) 20%,rgba(204,204,204,0.5) 80%,rgba(255,255,255,1) 100%); 
}

источник

2014-09-02 21:18:14

Вот другой подход к этой проблеме. Я не знаю погоды, это лучше, чем градиент, но, по крайней мере, вы узнаете об этом.

http://jsfiddle.net/6os0epu6/1/

В здесь я использовал цвет фона и окружили его с коробкой тени (или «внутреннее свечение») со смещением.

box-shadow:   inset 50px 0 60px rgba(255,255,255,0.5);

Это всего лишь демонстрация, поэтому я не пошел за конкретными цветами и пикселями, которые вы написали.

примечание: IE8 потребуется дополнительный код css, который отсутствует в этом примере.

источник

2014-09-02 21:33:59 Gil

Я рассматривал эту технику, но вы не можете получить устойчивое увядание слева направо с ней, только размытие со всех сторон. –

Градиент исчезает с трех сторон

ответ

Смежные вопросы