|
|
Дата: Вторник, 09.01.2018, 14:12 | Сообщение # 1
|
Сообщений: 690
Статус: 
|
Новый вид материала для системы 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>
Вид материала очень красиво смотрится, отлично подойдет под игровую тематику, либо пол обычный блог.
|
| |
|
|
