Блок со внутренней тенью лишь у двух краев

#html #css

Здравствуйте!
Такая задача: сделать див со внутренней тенью лишь у двух краев: верхнего и нижнего.
При этом слева и справа тени быть не должно. 
Сейчас я сделал это вот так: один див на 25px выходит за окно, другой не дает растянуть
body, пряча остатки первого.
Собственно вопрос: можно ли обойтись тут одним дивом и как?    

Ответы

Ответ 1

Можно сделать так:
box-shadow: inset 0 15px 15px  -15px #333 , inset 0 -15px 15px  -15px #333;

Тень будет только сверху и снизу. Посмотреть можно здесь: http://jsfiddle.net/shpQ4/2/
Тестировал только в IE 10, но думаю что работает во всех основных браузерах.
Расширенный пример: http://jsfiddle.net/TaA29/


Ответ 2

Онлайн генератор теней CSS Box Shadow —
очень помог в своё время.