Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Таблица

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Тень , округлить края
Поиск в теме | Версия для печати
kazmikro
Отправлено: 27 Мая, 2011 - 17:32:57
Post Id



Гость


Покинул форум
Сообщений всего: 123
Дата рег-ции: Февр. 2011  


Помог: 0 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. <table width="100" border="1">
  2.   <tr>
  3.     <td>&nbsp;</td>
  4.   </tr>
  5. </table>


Вот к примеру обычная табличка, как с помощью CSS округлить у неё края и добавить к ней тень ?
 
 Top
DeepVarvar Супермодератор
Отправлено: 27 Мая, 2011 - 19:29:01
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. <style>
  2. .round {
  3.         margin: 0 auto;
  4.         margin-top: 40px;
  5.         border: solid 1px #a0a0a0;
  6.         -moz-border-radius: 12px;
  7.         -webkit-border-radius: 12px;
  8.         -khtml-border-radius: 12px;
  9.         border-radius: 12px;
  10. }
  11. .round td {
  12.         padding: 4px;
  13.         border: solid 1px #a0a0a0;
  14. }
  15. </style>
  16. <table class="round" width="100" cellspacing="6" cellpadding="0" width="400">
  17.         <tr>
  18.                 <td>a</td>
  19.                 <td>b</td>
  20.                 <td>c</td>
  21.                 <td>d</td>
  22.                 <td>e</td>
  23.         </tr>
  24.         <tr>
  25.                 <td>f</td>
  26.                 <td>g</td>
  27.                 <td>h</td>
  28.                 <td>i</td>
  29.                 <td>j</td>
  30.         </tr>
  31.         <tr>
  32.                 <td>k</td>
  33.                 <td>l</td>
  34.                 <td>m</td>
  35.                 <td>n</td>
  36.                 <td>o</td>
  37.         </tr>
  38. </table>
 
 Top
IllusionMH
Отправлено: 27 Мая, 2011 - 20:18:33
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
DeepVarvar, опередили.
Немного другой вариант основанный на предложенном выше.
Позволяет использовать меньший cellspacing="1" и скруглить углы у ячеек в углах таблицы.
CODE (html):
скопировать код в буфер обмена
  1. <table class="round" width="100" cellspacing="1" cellpadding="0" width="400">
  2.         <tr>
  3.                 <td class="topleft">a</td>
  4.                 <td>b</td>
  5.                 <td>c</td>
  6.                 <td>d</td>
  7.                 <td class="topright">e</td>
  8.         </tr>
  9.         <tr>
  10.                 <td>f</td>
  11.                 <td>g</td>
  12.                 <td>h</td>
  13.                 <td>i</td>
  14.                 <td>j</td>
  15.         </tr>
  16.         <tr>
  17.                 <td class="bottomleft">k</td>
  18.                 <td>l</td>
  19.                 <td>m</td>
  20.                 <td colspan="2" class="bottomright">n</td>
  21.         </tr>
  22. </table>


Радиус скругления для ячеек вычисляется по формуле: радиус_скругления_таблицы - cellspacing - ширина_границы_ячейки
CODE (CSS):
скопировать код в буфер обмена
  1.   .round td.topleft {
  2.           -moz-border-radius: 10px 0px 0px 0px;
  3.           -webkit-border-radius: 10px 0px 0px 0px;
  4.           -khtml-border-radius: 10px 0px 0px 0px;
  5.           border-radius: 10px 0px 0px 0px;
  6.   }
  7.   .round td.topright {
  8.           -moz-border-radius: 0px 10px 0px 0px;
  9.           -webkit-border-radius: 0px 10px 0px 0px;
  10.           -khtml-border-radius: 0px 10px 0px 0px;
  11.           border-radius: 0px 10px 0px 0px;
  12.   }
  13.   .round td.bottomleft {
  14.           -moz-border-radius: 0px 0px 0px 10px;
  15.           -webkit-border-radius: 0px 0px 0px 10px;
  16.           -khtml-border-radius: 0px 0px 0px 10px;
  17.           border-radius: 0px 0px 0px 10px;
  18.    }
  19.   .round td.bottomright {
  20.           -moz-border-radius: 0px 0px 10px 0px;
  21.           -webkit-border-radius: 0px 0px 10px 0px;
  22.           -khtml-border-radius: 0px 0px 10px 0px;
  23.           border-radius: 0px 0px 10px 0px;
  24.  }



Существует проблема, если вы хотите соединить ячейки крайней строки или столбца(к примеру объединить все ячейки первой строки), тогда для этой ячейки придется написать отдельный класс, который будет скруглять одновременно 2 угла.
Возможно CSS лучше переписать используя свойства border-bottom-left-radius, -moz-border-radius-bottomleft и т.д.
 
 Top
DeepVarvar Супермодератор
Отправлено: 27 Мая, 2011 - 20:56:47
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
IllusionMH пишет:
переписать используя свойства border-bottom-left-radius, -moz-border-radius-bottomleft
да
IllusionMH пишет:
тогда для этой ячейки придется написать отдельный класс
нет, можно для tr и td использовать :last-child и :first-child.
 
 Top
IllusionMH
Отправлено: 28 Мая, 2011 - 00:01:21
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
DeepVarvar
1) не нашел подобного свойства для -webkit- (вероятно плохо искал)
CODE (CSS):
скопировать код в буфер обмена
  1. .round td.topleft {
  2.     -moz-border-radius-topleft: 10px;
  3.     border-top-left-radius: 10px;
  4.   }
  5.   .round td.topright {
  6.     -moz-border-radius-topright: 10px;
  7.     border-top-right-radius: 10px;
  8.   }
  9.   .round td.bottomleft {
  10.     -moz-border-radius-bottomleft: 10px;
  11.     border-bottom-left-radius: 10px;
  12.    }
  13.   .round td.bottomright {
  14.     -moz-border-radius-bottomright: 10px;
  15.     border-bottom-right-radius: 10px;
  16.  }

С таким подходом можно спокойно юзать
CODE (html):
скопировать код в буфер обмена
  1. <td rowspan="4" class="topright bottomright">e</td>


2) тоже думал на счет решения через :first-child и :last-child. С верхними ячейками проблем не будет, но вот с нижними(если объединять ячейки в первом и/или последнем столбце вертикально), то нужно выбирать не последний tr.
Или я просто не понял, что вы имеете в виду.

Учитывая это и то, что у меня сразу не срослось через потомков, решил сделать через 4 класса для ячеек.

UPD. Совсем забыл про тень. Она добавляется просто
CODE (CSS):
скопировать код в буфер обмена
  1. .round {
  2.   -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  3.   -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  4.   box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  5. }

смещение_по_X смещение_по_Y радиус_размытия цвет
цвет можно задавать и обычным #RRGGBB, но последнее значение в rgba позволяет сделать тень более прозрачной/мягкой.

(Отредактировано автором: 28 Мая, 2011 - 14:22:58)

 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB