Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: CSS (Тень)  (Прочитано 24228 раз)
0 Пользователей и 1 Гость смотрят эту тему.
XXX
Участник

ru
Offline Offline

« : 22-12-2009 16:56 » 

Доброго всем вечера! Подскажите, пожалуйста, как создать тень вокруг таблицы.. При помощи css.. Что-то подобное, как здесь: http://css-school.ru/page/5/.. Очень нужно..  Не понял
« Последнее редактирование: 22-12-2009 18:27 от Sel » Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 22-12-2009 17:06 » 

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.

* table_shadow.html (0.98 Кб - загружено 1121 раз.)
« Последнее редактирование: 22-12-2009 17:25 от RXL » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
XXX
Участник

ru
Offline Offline

« Ответ #2 : 22-12-2009 17:43 » 

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

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

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #3 : 22-12-2009 17:46 » 

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

Мы все учились понемногу... Чему-нибудь и как-нибудь.
XXX
Участник

ru
Offline Offline

« Ответ #4 : 22-12-2009 17:50 » 

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

Как сделать такую же тень...
« Последнее редактирование: 22-12-2009 18:27 от Sel » Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #5 : 22-12-2009 17:56 » 

тебе нужно блочная верстка или табличная?
таблицей покажу
Код:
<table>
<tr>
    <td левый_верхний_угол>
    <td фон_тени_с_верхним_градиентом>
    <td правый_верхний_угол>
<tr>
   <td фон_левой_тени_с_градиентом>
  <td контент>
   <td фон_правой_тени_с_градиентом>
<tr>
    <td левый_нижний_угол>
    <td фон_тени_с_нижним_градиентом>
    <td правый_нижний_угол>

Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
XXX
Участник

ru
Offline Offline

« Ответ #6 : 22-12-2009 18:05 » 

Точно не блочная верстка. Я хочу это сделать при помощи css, если это, конечно, возможно..
Может, это border-ами можно сделать?
« Последнее редактирование: 22-12-2009 18:26 от Sel » Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #7 : 22-12-2009 18:06 » 

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

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #8 : 22-12-2009 18:08 » 

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

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #9 : 22-12-2009 18:22 » 

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

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

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

Мы все учились понемногу... Чему-нибудь и как-нибудь.
XXX
Участник

ru
Offline Offline

« Ответ #10 : 22-12-2009 18:31 » 

Sla, спасибо. Сейчас попробую..
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #11 : 22-12-2009 18:38 » 

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

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #12 : 22-12-2009 18:45 » 

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

Мы все учились понемногу... Чему-нибудь и как-нибудь.
XXX
Участник

ru
Offline Offline

« Ответ #13 : 22-12-2009 18:48 » 

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

ru
Offline Offline
Пол: Женский
не может быть


« Ответ #14 : 25-12-2009 14:41 » 

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

Славная трава...
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #15 : 25-12-2009 14:56 » 

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

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
XXX
Участник

ru
Offline Offline

« Ответ #16 : 19-03-2010 08:52 » 

Эту, так называемую, тень можно реализовать в 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-ом запустила картинку.. И в углы поставила картинку.. Вроде ничего смотрится.. 
Записан
Золотая Лань
Молодой специалист

ru
Offline Offline
Пол: Женский

« Ответ #17 : 07-04-2010 21:48 » 

и всё же какими нечеловеческими темпами развивается техника!
Ещё в декабре проблема была с отображением тени, придумывали какие-то немыслимые способы…
Сейчас же можно элементарно прописать
Код:
-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, никаких лишних картинок.
А примерно через год такую конструкцию можно будет сократить до одной строки.
« Последнее редактирование: 07-04-2010 21:50 от Золотая Лань » Записан
Dr.Yevhenius
Опытный

ua
Offline Offline
Пол: Мужской

« Ответ #18 : 29-05-2010 18:29 » 

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

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #19 : 29-05-2010 22:37 » 

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

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines