Календарь на CSS3 - Форум ProUcoz.com - Календарь на CSS3 - Форум ProUcoz.com
Воскресенье 05:34 | 22.01.2017
Свежие темы · Участники · Правила форума · Поиск · RSS
Страница 1 из 11
Модератор форума: GrandDooM, FR3cH 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Другие скрипты для uCoz » Календарь на CSS3
Календарь на CSS3
FR3cH[Нет на сайте]
Дата: Вторник, 03.07.2012, 18:05 | Сообщение # 1
Хитрец всем хитрым
Сообщений: 213
Скрин:


Сразу следует предупредить, что этот календарь не рабочий, это просто вариант оформления календаря силами CSS. Сам календарь построен на таблице, соответственно стиль прописан именно для TABLE и вложенных в него TD, ну, и конечно, ссылок. Календарь на CSS3 по размерам выглядит большим. Если уменьшить значения PADDING в CSS, то станет поменьше. Каждое число в календаре – ссылка, поэтому при наведении работает HOVER, да и при клике по ссылке тоже предусмотрен стиль. Этот же стиль распространяется на активную ячейку таблицы, а активной ячейкой считается сегодняшнее число. Календарь на Август 2012 года на русском языке.

Код HTML
Code
<table class="cal">  
   <caption>  
   <span class="prev"><a href="http://yraaa.ru">←</a></span>  
   <span class="next"><a href="http://yraaa.ru">→</a></span>  
   Август 2012  
   </caption>  
   <thead>  
   <tr>  
   <th>Пн</th>  
   <th>Вт</th>  
   <th>Ср</th>  
   <th>Чт</th>  
   <th>Пт</th>  
   <th>Сб</th>  
   <th>Вс</th>  
   </tr>  
   </thead>  
   <tbody>  
   <tr>  
   <td class="off"><a href="http://yraaa.ru">30</a></td>  
   <td class="off"><a href="http://yraaa.ru">31</a></td>  
   <td><a href="http://yraaa.ru">1</a></td>  
   <td><a href="http://yraaa.ru">2</a></td>  
   <td><a href="http://yraaa.ru">3</a></td>  
   <td><a href="http://yraaa.ru">4</a></td>  
   <td><a href="http://yraaa.ru">5</a></td>  
   </tr>  
   <tr>  
   <td><a href="http://yraaa.ru">6</a></td>  
   <td><a href="http://yraaa.ru">7</a></td>  
   <td><a href="http://yraaa.ru">8</a></td>  
   <td><a href="http://yraaa.ru">9</a></td>  
   <td><a href="http://yraaa.ru">10</a></td>  
   <td><a href="http://yraaa.ru">11</a></td>  
   <td><a href="http://yraaa.ru">12</a></td>  
   </tr>  
   <tr>  
   <td><a href="http://yraaa.ru">13</a></td>  
   <td><a href="http://yraaa.ru">14</a></td>  
   <td class="active"><a href="http://yraaa.ru">15</a></td>  
   <td><a href="http://yraaa.ru">16</a></td>  
   <td><a href="http://yraaa.ru">17</a></td>  
   <td><a href="http://yraaa.ru">18</a></td>  
   <td><a href="http://yraaa.ru">19</a></td>  
   </tr>  
   <tr>  
   <td><a href="http://yraaa.ru">20</a></td>  
   <td><a href="http://yraaa.ru">21</a></td>  
   <td><a href="http://yraaa.ru">22</a></td>  
   <td><a href="http://yraaa.ru">23</a></td>  
   <td><a href="http://yraaa.ru">24</a></td>  
   <td><a href="http://yraaa.ru">25</a></td>  
   <td><a href="http://yraaa.ru">26</a></td>  
   </tr>  
   <tr>  
   <td><a href="http://yraaa.ru">27</a></td>  
   <td><a href="http://yraaa.ru">28</a></td>  
   <td><a href="http://yraaa.ru">29</a></td>  
   <td><a href="http://yraaa.ru">30</a></td>  
   <td><a href="http://yraaa.ru">31</a></td>  
   <td class="off"><a href="http://yraaa.ru">1</a></td>  
   <td class="off"><a href="http://yraaa.ru">2</a></td>  
   </tr>  
   <tr>  
   <td class="off"><a href="http://yraaa.ru">3</a></td>  
   <td class="off"><a href="http://yraaa.ru">4</a></td>  
   <td class="off"><a href="http://yraaa.ru">5</a></td>  
   <td class="off"><a href="http://yraaa.ru">6</a></td>  
   <td class="off"><a href="http://yraaa.ru">7</a></td>  
   <td class="off"><a href="http://yraaa.ru">8</a></td>  
   <td class="off"><a href="http://yraaa.ru">9</a></td>  
   </tr>  
   </tbody>  
   </table>


Код CSS
Code
.cal {  
   display: block;  
   width: 216px;  
   -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);  
   -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);  
   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);  
}  
.cal a:hover {  
   text-decoration: none;  
}  
.cal caption {  
   display: block;  
   line-height: 32px;  
   text-align: center;  
   color: #e2e2e2;  
   font-weight: bold;  
   text-shadow: 0 -1px black;  
   background: #333;  
   background: rgba(0, 0, 0, 0.35);  
   border-top: 1px solid #333;  
   border-bottom: 1px solid #313131;  
   -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);  
   -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);  
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);  
}  
.cal caption a {  
   display: block;  
   line-height: 32px;  
   padding: 0 10px;  
   color: #e2e2e2;  
   font-size: 15px;  
}  
.cal caption a:hover {  
   color: #fff;  
}  
.cal caption .prev {  
   float: left;  
}  
.cal caption .next {  
   float: right;  
}  
.cal th, .cal td {  
   width: 30px;  
   text-align: center;  
   text-shadow: 0 1px rgba(255, 255, 255, 0.8);  
}  
.cal th:first-child, .cal td:first-child {  
   border-left: 0;  
}  
.cal th {  
   font-size: 8px;  
   text-transform: uppercase;  
   color: #696969;  
   line-height: 20px;  
   background: #f3f3f3;  
   border-left: 1px solid #f3f3f3;  
}  
.cal td {  
   font-size: 11px;  
   font-weight: bold;  
   border-top: 1px solid #c2c2c2;  
   border-left: 1px solid #c2c2c2;  
}  
.cal td a {  
   clear: both;  
   display: block;  
   position: relative;  
   color: #666;  
   line-height: 28px;  
   width: 30px;  
   background-color: #eaeaea;  
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaeaea), color-stop(60%, #e5e5e5), color-stop(100%, #d9d9d9));  
   background-image: -webkit-linear-gradient(top, #eaeaea 0%, #e5e5e5 60%, #d9d9d9 100%);  
   background-image: -moz-linear-gradient(top, #eaeaea 0%, #e5e5e5 60%, #d9d9d9 100%);  
   background-image: -ms-linear-gradient(top, #eaeaea 0%, #e5e5e5 60%, #d9d9d9 100%);  
   background-image: -o-linear-gradient(top, #eaeaea 0%, #e5e5e5 60%, #d9d9d9 100%);  
   background-image: linear-gradient(top, #eaeaea 0%, #e5e5e5 60%, #d9d9d9 100%);  
   -webkit-box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);  
   -moz-box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);  
   box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);  
}  
.cal td a:hover, .cal td.off a {  
   background: #f3f3f3;  
}  
.cal td.off a {  
   color: #b3b3b3;  
}  
.cal td.active a, .cal td a:active {  
   margin: -1px;  
   color: #f3f3f3;  
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);  
   background: #6dafbf;  
   border: 1px solid #598b94;  
   -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);  
   -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);  
   box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);  
}  
.cal td.active:first-child a, .cal td:first-child a:active {  
   border-left: 0;  
   margin-left: 0;  
}  
.cal td.active:last-child a, .cal td:last-child a:active {  
   border-right: 0;  
   margin-right: 0;  
}  
.cal tr:last-child td.active a, .cal tr:last-child td a:active {  
   border-bottom: 0;  
   margin-bottom: 0;  
}


 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Другие скрипты для uCoz » Календарь на CSS3
Страница 1 из 11
Поиск: