Форум XHTML.ru <!-- по-русски -->

Сайты - по стандартам, но не стандартные сайты!


#1 07.10.2010 16:53

Lady Ga-Ga
Новичок
Зарегистрирован: 07.10.2010
Сообщений: 1

Как сделать так чтобы у div была тень по обе стороны?

Не могу никак решить свою проблему.Не вижу решения.Может оно и простое,а я тогда бездарь.
<body>         
      <div id="shadow">
                            <div id="container">бла-бла-бла
               </div>   
     </div>
</body>

Нужно контенту,задать тень с двух сторон.
shadow по размеру больше.и надо чтобы тень тянулась по высоте вместе с контентом.

спасибо,

Нет на форуме

 

#2 05.11.2010 14:51

katena
Новичок
Зарегистрирован: 25.06.2010
Сообщений: 3

Re: Как сделать так чтобы у div была тень по обе стороны?

Решение правда просто -добавляете не один див с тенью, а два- В первом слева бэкграундом тень по у, во втором справа.
А у контента отступы с двух сторон и все.

Нет на форуме

 

#3 07.12.2010 23:23

Артрадикс
Новичок
Зарегистрирован: 07.12.2010
Сообщений: 3
Вебсайт

Re: Как сделать так чтобы у div была тень по обе стороны?

Полностью согласен с Katena

Нет на форуме

 

#4 22.02.2012 22:27

vasilii
Новичок
Зарегистрирован: 22.02.2012
Сообщений: 3
Вебсайт

Re: Как сделать так чтобы у div была тень по обе стороны?

Lady Ga-Ga написал:

Не могу никак решить свою проблему.Не вижу решения.Может оно и простое,а я тогда бездарь.
<body>         
      <div id="shadow">
                            <div id="container">бла-бла-бла
               </div>   
     </div>
</body>

Нужно контенту,задать тень с двух сторон.
shadow по размеру больше.и надо чтобы тень тянулась по высоте вместе с контентом.

спасибо,

Проще всего для box-shadow: прописать стиль для тени слева и, через запятую, для тени справа. На вашем примере:
#shadow{box-shadow:-3px 0 0 #000,3px 0 0 #000;} где (пояснения для новичков):
Первое значение - отрицательное для тени слева, положительное для тени справа, 0 - тени нет.
Второе - отрицательное для тени сверху, положительное для тени снизу, 0 - тени нет.
Третье - размытие тени.
Четвёртое - цвет тени.
Примеры для тени сверху и снизу, с размытием и без него смотрите на картинке:
[img]http://pikucha.ru/i8cd1/thumbnail/%D0%A2%D0%B5%D0%BD%D1%8C+%D0%B2+CSS.jpeg[/img]
Как видно из картинки при использовании размытия тени проявляются незначительные полосы по нулевым сторонам, хотя, если глянуть с другой стороны - своеобразный дизайн.

Отредактированно vasilii (23.02.2012 01:51)

Нет на форуме

 

Board footer

Работает на PunBB
© 2002—2005 Rickard Andersson