Сегодня, мы познакомимся с некоторыми возможностями CSS3, а также изменим до неузнаваемости скучные и надоедливые таблицы. Всего, для таблиц будет создано 3 стиля: table1, table2 и table3. Посмотреть, как выглядят таблицы в готовом виде можно здесь, а скачать тут.
Для начала нужно составить таблицу. В качестве данных возьмем тарифы одного из хостеров.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <table class="table1"> <thead> <tr> <th></th> <th scope="col" abbr="Starter">Lite</th> <th scope="col" abbr="Medium">Office</th> <th scope="col" abbr="Business">Master</th> <th scope="col" abbr="Deluxe">Profy</th> </tr> </thead> <tfoot> <tr> <th scope="row">Цена в месяц</th> <td>$ 2.00</td> <td>$ 3.50</td> <td>$ 6.20</td> <td>$ 10.00</td> </tr> </tfoot> <tbody> <tr> <th scope="row">Место на диске</th> <td>512 MB</td> <td>1 GB</td> <td>2 GB</td> <td>4 GB</td> </tr> <tr> <th scope="row">Трафик</th> <td>50 GB</td> <td>100 GB</td> <td>150 GB</td> <td>Без ограничений</td> </tr> <tr> <th scope="row">MySQL БД</th> <td>Без ограничений</td> <td>Без ограничений</td> <td>Без ограничений</td> <td>Без ограничений</td> </tr> <tr> <th scope="row">FTP аккаунты</th> <td>Без ограничений</td> <td>Без ограничений</td> <td>Без ограничений</td> <td>Без ограничений</td> </tr> <tr> <th scope="row">PHP 5</th> <td><span class="check"></span></td> <td><span class="check"></span></td> <td><span class="check"></span></td> <td><span class="check"></span></td> </tr> <tr> <th scope="row">POP3 server</th> <td><span class="check"></span></td> <td><span class="check"></span></td> <td><span class="check"></span></td> <td><span class="check"></span></td> </tr> </tbody> </table> |
Таблица будет оставаться практически без изменений, меняться будет только класс (table1, table 2 и table 3) определяющий стиль элементов.
CSS стиль № 1
Давайте начнем с основного стиля таблицы:
1 2 3 4 5 6 7 8 | table.table1{ font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4em; font-style: normal; border-collapse:separate; } |
Мы задали шрифт и сделали пространство между ячейками, с помощью border-collapse:separate.
Для элементов в заголовке будет установлен следующий стиль:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .table1 thead th{ padding:15px; color:#fff; text-shadow:1px 1px 1px #568F23; border:1px solid #93CE37; border-bottom:3px solid #9ED929; background-color:#9DD929; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.02, rgb(123,192,67)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(158,217,41)) ); background: -moz-linear-gradient( center bottom, rgb(123,192,67) 2%, rgb(139,198,66) 51%, rgb(158,217,41) 87% ); -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius:5px 5px 0px 0px; border-top-left-radius:5px; border-top-right-radius:5px; } |
Мы создаем градиент и закругляем углы у ячеек. Как вы наверное заметили, первая ячейка таблицы пустая. Как это сделать? Да очень просто, зададим стиль для первой ячейки (th):
1 2 3 4 | .table1 thead th:empty{ background:transparent; border:none; } |
Применим для футера таблицы следующий стиль:
1 2 3 4 5 6 7 8 9 10 | .table1 tfoot td{ color: #9CD009; font-size:32px; text-align:center; padding:10px 0px; text-shadow:1px 1px 1px #444; } .table1 tfoot th{ color:#666; } |
Ничего особенного здесь нет, мы просто создали тень для текста.
Во внутренних ячейках таблицы будет светло-зеленый фон и текст белого цвета.
1 2 3 4 5 6 7 8 9 10 11 | .table1 tbody td{ padding:10px; text-align:center; background-color:#DEF3CA; border: 2px solid #E7EFE0; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; color:#666; text-shadow:1px 1px 1px #fff; } |
Так же, для каждого из тарифов, нам нужно добавить изображение галочки, напротив PHP 5 и POP3 server.
Галочка располагается в элементе span с классом «check».
1 2 3 | .table1 tbody span.check::before{ content : url(../images/check0.png) } |
С первым стилем для нашей таблицы мы разобрались, теперь можно приступать к стилю под номером 2.
CSS стиль № 2
Вторая таблица будет выглять более элегантно, по сравнению с первой. Зададим для нее основной стиль:
1 2 3 4 5 6 7 8 9 10 | table.table2{ font-family: "Trebuchet MS", sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: -1px; line-height: 1.2em; border-collapse:collapse; text-align:center; } |
Футер и хедер таблицы будут в одном стиле, по этому зададим для них такой стиль:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .table2 thead th, .table2 tfoot td{ padding:20px 10px 40px 10px; color:#fff; font-size: 26px; background-color:#222; font-weight:normal; border-right:1px dotted #666; border-top:3px solid #666; -moz-box-shadow:0px -1px 4px #000; -webkit-box-shadow:0px -1px 4px #000; box-shadow:0px -1px 4px #000; text-shadow:0px 0px 1px #fff; text-shadow:1px 1px 1px #000; } |
Для th в футере зададим следующий стиль:
1 2 3 4 5 6 | .table2 tfoot th{ padding:10px; font-size:18px; text-transform:uppercase; color:#888; } |
Теперь зададим стиль, для ячеек в нижней части таблицы.
1 2 3 4 5 6 7 8 9 | .table2 tfoot td{ font-size:36px; color:#EF870E; border-top:none; border-bottom:3px solid #666; -moz-box-shadow:0px 1px 4px #000; -webkit-box-shadow:0px 1px 4px #000; box-shadow:0px 1px 4px #000; } |
Так же, как и в первом стиле, нам нужно сделать пустой первую ячейку.
1 2 3 4 5 6 | .table2 thead th:empty{ background:transparent; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } |
С помощью селектора :nth-last-child выбираем последнюю ячейку в заголовке таблицы и удаляем границу справа.
1 2 3 | .table2 thead :nth-last-child(1){ border-right:none; } |
Так же удаляем границы у первой ячейки в заголовке и последней ячейки в теле таблицы.
1 2 3 4 | .table2 thead :first-child, .table2 tbody :nth-last-child(1){ border:none; } |
Зададим стиль, для описаний расположенных в левой части таблицы:
1 2 3 4 5 6 7 | .table2 tbody th{ text-align:right; padding:10px; color:#333; text-shadow:1px 1px 1px #ccc; background-color:#f9f9f9; } |
Следующий стиль будет задан, для остальных ячеек:
1 2 3 4 5 6 7 8 | .table2 tbody td{ padding:10px; background-color:#f0f0f0; border-right:1px dotted #999; text-shadow:-1px 1px 1px #fff; text-transform:uppercase; color:#333; } |
Теперь нам только осталось добавить галочку:
1 2 3 | .table2 tbody span.check::before{ content : url(../images/check1.png) } |
CSS стиль № 3
Третья таблица будет сложнее предыдущих. Чем дороже тариф, тем темнее цвет ячейки.
Основной стиль:
1 2 3 4 5 6 7 8 9 10 11 | table.table3{ font-family:Arial; font-size: 18px; font-style: normal; font-weight: normal; text-transform: uppercase; letter-spacing: -1px; line-height: 1.7em; text-align:center; border-collapse:collapse; } |
Стиль для ячеек, в заголовке будет таким:
1 2 3 4 5 6 7 8 | .table3 thead th{ padding:6px 10px; text-transform:uppercase; color:#444; font-weight:bold; text-shadow:1px 1px 1px #fff; border-bottom:5px solid #444; } |
Стиль для пустых ячеек:
1 2 3 4 | .table3 thead th:empty{ background:transparent; border:none; } |
Теперь нам нужно задать цвет для ячеек в хедере и футере таблицы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .table3 thead :nth-child(2), .table3 tfoot :nth-child(2){ background-color: #7FD2FF; } .table3 tfoot :nth-child(2){ -moz-border-radius:0px 0px 0px 5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px; } .table3 thead :nth-child(2){ -moz-border-radius:5px 0px 0px 0px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px; } .table3 thead :nth-child(3), .table3 tfoot :nth-child(3){ background-color: #45A8DF; } .table3 thead :nth-child(4), .table3 tfoot :nth-child(4){ background-color: #2388BF; } .table3 thead :nth-child(5), .table3 tfoot :nth-child(5){ background-color: #096A9F; } .table3 thead :nth-child(5){ -moz-border-radius:0px 5px 0px 0px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; } .table3 tfoot :nth-child(5){ -moz-border-radius:0px 0px 5px 0px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px; } |
Общий стиль для всех td ячеек в футере будет таким:
1 2 3 4 5 6 | .table3 tfoot td{ font-size:38px; font-weight:bold; padding:15px 0px; text-shadow:1px 1px 1px #fff; } |
Зададим немного отступов:
1 2 3 | .table3 tbody td{ padding:10px; } |
Стиль для ячеек в которых указывается цена:
1 2 3 | .table3 tbody tr:nth-child(4) td{ font-size:18px; } |
Зададим стиль для ячеек в теле таблицы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .table3 tbody td:nth-child(even){ background-color:#444; color:#444; border-bottom:1px solid #444; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(189,189,189)), color-stop(0.7, rgb(224,224,224)) ); background:-moz-linear-gradient( center bottom, rgb(189,189,189) 39%, rgb(224,224,224) 70% ); text-shadow:1px 1px 1px #fff; } .table3 tbody td:nth-child(odd){ background-color:#555; color:#f0f0f0; border-bottom:1px solid #444; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(85,85,85)), color-stop(0.7, rgb(105,105,105)) ); background:-moz-linear-gradient( center bottom, rgb(85,85,85) 39%, rgb(105,105,105) 70% ); text-shadow:1px 1px 1px #000; } |
Так же зададим границу для последних ячеек:
1 2 3 | .table3 tbody td:nth-last-child(1){ border-right:1px solid #222; } |
Описание слева, будет с таким стилем:
1 2 3 4 5 6 | .table3 tbody th{ color:#696969; text-align:right; padding:0px 15px; border-right:1px solid #aaa; } |
Не забываем про нашу галочку:
1 2 3 | .table3 tbody span.check::before{ content : url(../images/check2.png) } |
Так же советую вам ознакомиться, с приведенными ниже ссылками:
Градиенты в CSS3 — http://gradients.glrzad.com/
W3C Selectors Level 3 — http://www.w3.org/TR/css3-selectors/
Напомню, что демо можно псомотреть здесь, а скачать тут.
это всё хорошо, но вот IE…..
Пока все пользователи не пересядут на ИЕ9, толку от этого не будет… как ни крути, а большинство сидят на нём…
Reply
Точно! Всё было бы просто замечательно и просто, если бы не мелкософт со своим детищем!
Reply
Всегда хотел разобраться, что такое же такое CSS, вот и понял. Пишите и приводите примеры о CSS больше.
Reply
Точно, еще очень долго придется подстраиваться под осла ниже 9 версии:( Никак не могу вот понять мелкомягких с их политикой: все давным-давно поддерживают новые стандарты, а этим всё неймется. Так вот рынок и теряют
Reply
Полностью согласен, Microsoft — последнее время всё больше и больше поражает меня… Ра счёт IE, давно про него забыл, считаю есть более удобные браузеры…
Статья супер, обязательно возьму на вооружение…)))
Reply
В демо кодировка слетела
Reply
У нас на сайте использовали информацию из этого урока — спасибо.
Reply
Добрый день,
хочу поделиться небольшим своим опытом при создании меню или даже практически любого html элемента с помощью ONLINE сервиса по закруглению углов CSS3,
думаю начинающему верстальщику будет интересен данный генератор.
Нужно ввести минимум значений, на выходе CSS код для вставки с примером: border-radius-generator
Reply