• Страница 1 из 1
  • 1
Форум Kentos311 » uCoz » Скрипты для сайта » Вид материала Verga 2 для uCoz (Вид материала очень красиво смотрится)
Вид материала Verga 2 для uCoz
Kentos311Дата: Вторник, 09.01.2018, 14:12 | Сообщение # 1
Сообщений: 452
Статус:

Новый вид материала для системы 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>


Вид материала очень красиво смотрится, отлично подойдет под игровую тематику, либо пол обычный блог.
Прикрепления: 3424032.png(699.8 Kb)
 
Форум Kentos311 » uCoz » Скрипты для сайта » Вид материала Verga 2 для uCoz (Вид материала очень красиво смотрится)
  • Страница 1 из 1
  • 1
Поиск: