8

Здравствуйте!

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

Сейчас я сделал это вот так: один див на 25px выходит за окно, другой не дает растянуть body, пряча остатки первого.

Собственно вопрос: можно ли обойтись тут одним дивом и как?

1
  • Есть у меня такая мысль: так как фоном в любом случае идет текстура (без нее это не красиво), можно нарисовать тень на текстуре. Можно накладывать сразу несколько фонов — один полупрозрачный с тенью, другой — основной, третий — тень снизу. Вот только это может сильно перегрузить страницу, а там и так изображений куча... Короче пока что сижу на двух дивах.
    – Zelta
    7 июн 2013 в 17:29

2 ответа 2

11

Можно сделать так:

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/

0
2

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

1
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 22 апр 2016 в 5:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.