CSS (Тень)

[XXX]

Доброго всем вечера! Подскажите, пожалуйста, как создать тень вокруг таблицы.. При помощи css.. Что-то подобное, как здесь: http://css-school.ru/page/5/.. Очень нужно..  

[RXL]

XXX, теней в CSS пока нет. По этому нужно создать прямоугольник, размером точно как таблица, поместить его под таблицей и задать фоновый цвет для тени и таблицы.

Самое сложное - задать размер прямоугольника тени.
Например, возможно такое решение:

Код:

  <div class="shadow">
    <table width="100%" class="shadow" cellspacing="0">
      <tr><td>aaaa</td><td>bbbb</td></tr>
      <tr><td>aaaa</td><td>bbbb</td></tr>
      <tr><td>aaaa</td><td>bbbb</td></tr>
      <tr><td>aaaa</td><td>bbbb</td></tr>
      <tr><td>aaaa</td><td>bbbb</td></tr>
      <tr><td>aaaa</td><td>bbbb</td></tr>
    </table>
  </div>

Код:

div.shadow
{
  padding: 0;
  margin: 0 8px 8px 0;
  position: relative;
  top: 8px;
  left: 8px;
  width: 400px;
  background-color: gray;
}

table.shadow
{
  padding: 0;
  margin: 0;
  position: relative;
  top: -8px;
  left: -8px;
  background-color: white;
  border-collapse: collapse;
}

table.shadow, table.shadow td
{
  border: 1px solid black;
}

Размер таблицы зависит от ширины контейнера.
Протестил пример в IE7 и FF 3.5.6.

[XXX]

RXL, спасибо, сейчас гляну.

Немножко не то, что я хочу.. Нужно, чтобы со всех сторон таблицы была тень.. И чтобы при этом тень не казалась просто серой обводкой..
Примерно так, как сделано http://css-school.ru/page/5/ (где написано"Российская школа сss Создание простого шаблона сайта"), а вокруг этого блока нужная мне тень.. Только вот как ее сделать..  

[Sla]

Там, где ты указал, рисунок уже с тенью.

[XXX]

Да, этой ссылкой я хочу показать, какой тень должна быть.. А вот как это реализовать?

Как сделать такую же тень...

[Sla]

тебе нужно блочная верстка или табличная?
таблицей покажу

Код:

<table>
<tr>
    <td левый_верхний_угол>
    <td фон_тени_с_верхним_градиентом>
    <td правый_верхний_угол>
<tr>
   <td фон_левой_тени_с_градиентом>
  <td контент>
   <td фон_правой_тени_с_градиентом>
<tr>
    <td левый_нижний_угол>
    <td фон_тени_с_нижним_градиентом>
    <td правый_нижний_угол>

[XXX]

Точно не блочная верстка. Я хочу это сделать при помощи css, если это, конечно, возможно..
Может, это border-ами можно сделать?

[RXL]

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

[RXL]

XXX, в CSS картинку можно прикрутить только к фону.

[Sla]

XXX, я тебе показал условный код
и это не блочная верстка, а табличная

у тебя будут, например, классы
.left_up_corner{
}
.right_up_corner{
}

и т.д.
теперь тебе каждой нужной ячейке нужно сопоставить свой класс

[XXX]

Sla, спасибо. Сейчас попробую..

[Sla]

XXX, надеюсь, что код покажешь.

[Sla]

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

[XXX]

Как только справлюсь с задачей, покажу код.. Пока еще пробую..

[Falsehood]

на той же странице есть ссылка на урок по тени: http://css-school.ru/lessons/30-urok-css-12.-sozdanieie-prostojj-teni.html

[RXL]

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

[XXX]

Эту, так называемую, тень можно реализовать в css при помощи метода "закругленных углов".. Здесь можно глянуть смысл: http://www.devwebpro.com/25-rounded-corners-techniques-with-css
http://www.schillmania.com/content/projects/even-more-rounded-corners/
http://green-beast.com/experiments/css_smart_corners.php
http://redmelon.net/tstme/4corners/
Пришлось отказаться от css.. Т.к. в разных браузерах у меня это дело разлеталось:( Сделала просто картинкой.. По бокам background-ом запустила картинку.. И в углы поставила картинку.. Вроде ничего смотрится.. 

[Золотая Лань]

и всё же какими нечеловеческими темпами развивается техника!
Ещё в декабре проблема была с отображением тени, придумывали какие-то немыслимые способы…
Сейчас же можно элементарно прописать

Код:

	-webkit-box-shadow: #333 2px 4px 4px;
	-moz-box-shadow: #333 2px 4px 4px;
	-o-box-shadow: #333 2px 4px 4px;
	box-shadow: #333 2px 4px 4px;
	filter:progid:DXImageTransform.Microsoft.DropShadow(color=#999999, offx=2, offy=2);

и будет работать.(кстати, и работает. Код нагло скопипастщен из собственного проекта)

Ну да, в ИЕ не так красиво, как в остальных, да и пользователям старых версий браузеров придётся обходиться без теней, но в целом конструкция значительно более красивая, при ней совершенно нет никакого мусора в html, никаких лишних картинок.
А примерно через год такую конструкцию можно будет сократить до одной строки.

[Dr.Yevhenius]

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

Всё зависит от размещения источника света.

[RXL]

YevhenUA, источник света перед наблюдателем? А почему мы его не видим? А почему на остальные части страницы этот источник не влияет?