ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Адаптивный вид материала для сайта uCoz

Адаптивный вид материала для сайта uCoz

Адаптивный вид материала для файлов или новостей uCoz отлично подойдет для разных тематик неплохо подойдет для формата кино шаблона. Добавить вывод рейтинга в звездах и будет смотреться оригинально на планшете смотрел выглядит не плохо так что ставите и фантазируйте. Здесь сами можете поработать со стилями и добавить теней или все оставить по умолчанию. Идет в колонку и на светлый дизайн сайта и также имеет красивый эффект затемнение с информацией при наведение на материал. который выбрали.

Если вам нужно, то вы можете оставить категорию, которая выводится в кругу на темном фоне. Здесь просто она по знаком должна быть небольшой, то не корректно может быть визуально смотреться. И когда откроется или появится светло темная гамма, то там также будет кнопка "далее" или здесь можно переписать на открыть. Так очень простой вид материала, который был изначально заточен под игровую тематику. Но смотря на его стилистику, то здесь его безусловно можно применить на многих тематических площадках. где просто отлично подойдет и добавит некой своей стилистике на интернет ресурсе.

Приступаем к установке:

Вид материала модуля:

Код

<div class="uRelatedEntry uProject-info">
<img src="$IMG_URL1$" alt="$TITLE$" />

<div class="capt">
<h4>$TITLE$</h4>
<p>$CATEGORY_NAME$</p>
<a class="btn-vid-pm" href="$ENTRY_URL$" title="Перейти к просмотру">View More</a>
<div class="uRelatedEntry-info">
<span><i class="eye"></i>$READS$</span>
<span><i class="comm"></i>$COMMENTS_NUM$</span>
<span><i class="time"></i>$TIME$</span>
</div>

</div>
$TITLE$
</div>

CSS:

Код

.uRelatedEntry {
width: 32%;
float: left;
margin: 0.5%;
height: 230px;
  position: relative;
}
.uRelatedEntry img {
opacity: 0.85;
height: 200px;
display: block;
overflow: hidden;
}

.uProjects-img:hover {
opacity: 1;
}
.uProject-info {
width: 32%;
  overflow: hidden;
}
.uProject-info .capt {
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  color: #fff;
  opacity: 0;
  -o-transition: all 0.5s linear 0s;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s;
}
.uProject-info .capt h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid white;
  padding: 0 10px 20px;
  margin-top: 20px;
  position: relative;
  left: 300px;
  opacity: 0;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.uProject-info .capt p {
  margin: 15px 0px;
  font-size: 9pt;
  text-align: center;
  font-style: italic;
  padding: 0px 10px;
  opacity: 0;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.uProject-info:hover .capt,
.uProject-info:hover p {
  opacity: 1;
}
.uProject-info .capt a.btn-vid-pm {
  width: 120px;
  text-align: center;
  display: block;
  background: #6ec5f7;
  color: #fff;
  padding: 10px 0px;
  margin: 0px auto 0px auto;
  position: relative;
  opacity: 0;
  left: -300px;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.uProject-info:hover h4,
.uProject-info:hover a.btn-vid-pm {
  left: 0px;
  opacity: 1;
}
.uProject-info:hover a.btn-vid-pm:hover {
  background: #3eb1f4;
  border-color: #3eb1f4;
  color: #ffffff;
  box-shadow: 0 6px 11px 0 rgba(62, 177, 244, 0.35);
}
@media all and (max-width:480px) {
.uRelatedEntry {
  width:49%;
  float:left;
  margin: 0.5%;
  }
}
.uProject-info .uRelatedEntry-info {
  opacity: 0;
  position: absolute;
  width:100%;
  color:#333;
  bottom: 0px;
  left:0px;
}
.uProject-info:hover .uRelatedEntry-info {
  background-color: #fff;
  text-align: center;
  padding: 4px 7px;
  opacity: 1;
  }
.uRelatedEntry-info span {
  padding:3px 7px;
  margin:3px 5px;
  }
.uProject-info .uRelatedEntry-info .comm {
  background:url('http://zornet.ru/Aben/Aben-Abag/bubbles.png') 0 0 no-repeat;
  padding-left:20px;
  background-size:16px
  }
.uProject-info .uRelatedEntry-info .eye {
  background:url('http://zornet.ru/Aben/Aben-Abag/eye.png') 0 0 no-repeat;
  padding-left:20px;
  background-size:16px
  }
.uProject-info .uRelatedEntry-info .time {
  background:url('http://zornet.ru/Aben/Aben-Abag/clock.png') 0 0 no-repeat;
  padding-left:20px;
  background-size:16px
  }

PS - материал уже адаптирован и вы можете выставить как по ширине или высоте только в стилях, и вся редакция основном в них идет.

21 Февраля 2017 Загрузок: 1 Просмотров: 2772 Комментариев: (16)

Поделиться в социальных сетях

Материал разместил

maniacvn

Похожие материалы

Оставь свой отзыв

Комментарии: 16
Порядок вывода комментариев: iMadeas 21 Февраля 2017 21:26¹ 0 Зачем выдавать чужой материал за свой? Материал был разработан на madeas.ru для вида похожих материалов ucoz. хоть бы классы и цвет кнопки поменяли прежде чем выкладывать.Хотя применение иное, вполне не дурно Сопрано 21 Февраля 2017 21:31³ +1 iMadeas, вы какой разработали по этому дизайн, видать он ходовой. Sтранник 21 Февраля 2017 21:32⁴ 0 maniacvn 21 Февраля 2017 21:57⁹ 0 Он взят с другого ресурса но ваш ресурс мне понравился много там полезного + Сопрано 21 Февраля 2017 21:30² 0 Многим думаю пригодиться, так смотрится не чего, отличие от простого. Tergran 21 Февраля 2017 21:33⁵ 0 Ох балуешь адаптацией FeStemBer 21 Февраля 2017 21:38⁶ 0 Простой вид материала, сейчас у каждого есть какой то эффект, но как говорится, его больше можно увидеть на сайтах. Kosten 21 Февраля 2017 21:45⁷ 0 Здесь при наведение появляются кнопки, что похоже на шрифтовые иконки, их не нужно добавлять, или они видать в стилях по ссылкам прописаны. maniacvn 21 Февраля 2017 22:00¹¹ 0 я использовал иконки Font Awesome на скринах в оригинале png оставил так как не у всех эти иконки залиты. iMadeas 21 Февраля 2017 21:48⁸ 0 Сейчас в тренде менять все картинки на свг формат, они легче и воспринимают браузерами лучше. Я сейчас делаю форум на юкоз для андроид игры и у меня в файловом менеджере ни одной иконки формата пнг или гиф нет. Все на авесоме tsakonter 21 Февраля 2017 21:59¹⁰ 0 Цитата iMadeas () они легче и воспринимают браузерами лучше Это вот понимаю, но и простые также должны приниматься, которые идут от системы, но сравнение совершенно другое.
1 2 »