Kentos311 | Дата: Вторник, 09.01.2018, 14:12 | Сообщение # 1 |
Сообщений: 729
Статус:
| Новый вид материала для системы uCoz. Этот вид сделан очень хорошо, все материалы он будет выводит в колонки, по два материала, красочный вид, отлично подойдет под светлый дизайн сайта. Вид материала можно расположить в каталог файлов, или блог, он выводит изображение материала, название материала очень хорошо расположено по левому боку, также в какой категории этот материал был добавлен, можно сразу отметить две или несколько категорий. Присутствует рейтинг, сколько просмотров на материал, когда был добавлен ( месяц и год ), сколько загрузок, и количество комментарий.
Установка: 1. Для работоспособности необходимо подключить шрифтовые иконки, пропишите в верхняя часть сайта код:
Код <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
2. В таблицу стилей CSS:
Код .service-details { width: 48%; min-width: 300px; height: 200px; overflow: hidden; position: relative; margin: 5px; float: left; background: #10161e; } .service-details img { position: absolute; top: 0; left: 50px; width: 100%; float: left; transition: all 0.8s; -moz-transition: all 0.8s; margin-left: px; border: 0px solid #17212b; -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg); }
.service-details:hover img { }
.service-details .service-hover-text h3 { padding: 0px; margin: 0px; color:#56B8FF; text-align:left; text-shadow:1px 1px 1px #777; font-size:18px; font-family:Arial Narrow, Arial, sans-serif; transition: color 1s, font-size 1s, text-shadow 1s; -moz-transition: color 1s, font-size 1s, text-shadow 1s; -webkit-transition: color 1s, font-size 1s, text-shadow 1s; -o-transition: color 1s, font-size 1s, text-shadow 1s; } .service-details:hover h3 { padding: 0px; margin: 0px; color:#fff; z-index:10; font-size:18px; text-shadow:0 0 20px #EAF8FF; } .service-details .service-hover-text h4 { margin-right: 0; padding: 0 5px 2px; color: #9A9A9A; border: 1px solid #5D5D5D; border-radius: 2px; font-family: tahoma,arial,sans-serif; margin-bottom: 10px; display: inline-block; } .service-details .service-hover-text h2 { position: absolute; z-index: 100; bottom:5px; padding: 0px; margin: 0px; color:#fff; text-align:left; text-shadow:1px 1px 1px #000; font-size:14px; font-family:Arial Narrow, Arial, sans-serif; transition: color 1s, font-size 1s, text-shadow 1s; -moz-transition: color 1s, font-size 1s, text-shadow 1s; -webkit-transition: color 1s, font-size 1s, text-shadow 1s; -o-transition: color 1s, font-size 1s, text-shadow 1s; } .service-details .service-hover-text p { padding: 0px; font-size: 14px; line-height: 20px; color: #fff; margin:0px; font-family: "Open Sans"; } .service-details .service-hover-text a { font-size: 12px; background: #313b46; margin-right: 0; padding:5px; color: #FFF; border-radius: 2px; font-family: tahoma,arial,sans-serif; margin-bottom: 10px; display: inline-block; border: 0px solid #00BFFF; } .service-details:hover a { font-size: 12px; background: rgba(21, 126, 232, 0.8); color: #fff; } .service-details .service-hover-text{ width: 50%; height: 100%; position: absolute; top: 0%; left: 0%; padding: 10px; box-shadow: ; color: #ccc; /* display: none;*/ transition: all 0.5s ease-in-out; -moz-transition: all 0.4s; margin-left:5px; }
.service-details:hover .service-hover-text { display: block !important; color: ; left: 0px; top: 0px; } .service-details .service-text { position: absolute; bottom: 0px; } .service-details .service-text p { padding:5px; text-align:right; font-size: 12px; font-family: "Open Sans"; font-weight:300; color:#fafafa; font-style:italic; text-shadow:0 0 20px #fafafa; box-shadow: -100px 1px 67px -31px #DC143C inset; } .service-white { background: rgba(43, 139, 161, 0.8); width: 100%; height: 25px; }
2. Вид материала:
Код <a href="$ENTRY_URL$"> <div class="service-details"> <img src="$IMG_URL1$" alt="$TITLE$"> <div class="service-hover-text"> <h3>$TITLE$</h3> <span id="cats$ID$">Загрузка...</span> <h2><i class="fa fa-star-o"></i> $RATING$ <i class="fa fa-clock-o"></i> $DATE$</h2> </div> <div class="service-white service-text"> <p> <i class="fa fa-eye fa-fw"></i> $READS$ <i class="fa fa-download fa-fw"></i> $LOADS$ <i class="fa fa-comments fa-fw"></i> $COMMENTS_NUM$ </p> </div> </div> </a> <script type="text/javascript">$('span#cats$ID$').load('$ENTRY_URL$ .cats');</script>
Вид материала очень красиво смотрится, отлично подойдет под игровую тематику, либо пол обычный блог.
|
|
| |