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

Мобильный вид материалов на колонку для uCoz

Простой в своем дизайн вид материалов в одну колонку, который адаптивный на все размеры экрана, где подойдет на многие тематические сайты. Здесь как можно видеть по функциональности сделано не сложно, а точнее все выставлено изначально на самом виде в шрифтовых иконках. Что веб мастера отличное решение на смену, это можно поставить те кнопки, которые ближе подходят в вашей тематике на сайте. Прописаны стили, где автоматически по размеру вид материалов будет визуально показан.

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

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

Это снято с тестового сайта, что примерно так будет после установки.

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

HTML

Код

<div class="zresakoped-lasnumgalin-container">
  <div class="zresakoped-lasnumgalin">
  <div class="zresakoped-lasnumgalin-image"> <img style="width:100%; height:280px" src="$IMG_URL1$"/> </div>
  <div class="zresakoped-lasnumgalin-info">
  <div class="zresakoped-lasnumgalin-title">$TITLE$</div>
  <div class="zresakoped-lasnumgalin-detail">$MESSAGE$</div>
  </div>
  <div class="zresakoped-lasnumgalin-social">
  <ul>
  <li><i class="fa fa-comment-o" aria-hidden="true"></i>
</li>
  <li><i class="fa fa-heart-o" aria-hidden="true"></i></li>
  <li><i class="fa fa-share-alt" aria-hidden="true"></i>
</li>
  </ul>
  </div>
  </div>
</div>

CSS

Код

.zresakoped-lasnumgalin-container {
  position: relative;
  flex-wrap: wrap;
  float:left;
  overflow: hidden;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-around;
  align-items: auto;
}
.zresakoped-lasnumgalin {
  min-width: 275px;
  width: 100%;
  position: relative;
  margin: 15px 15px;
  height: 350px;
  border-radius: 3px;
  background-size: cover;
  background: rgba(23, 21, 21, 0.31);
  box-shadow: 0px -3px 20px 1px rgba(123, 119, 119, 0.45);
  transition: 0.2s all cubic-bezier(0, 0, 0.52, 0.98);
  border: 2px solid rgba(136, 131, 131, 0.57);
  box-sizing: border-box;
  background: rgba(206, 207, 208, 0.89);
}
.zresakoped-lasnumgalin .zresakoped-lasnumgalin-social {
  position: absolute;
  height: 75px;
  width: 100%;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background: rgba(23, 64, 101, 0.85);
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
  top: 271px;
  border-radius: 1px;
}
.zresakoped-lasnumgalin .zresakoped-lasnumgalin-social ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.zresakoped-lasnumgalin .zresakoped-lasnumgalin-social ul li {
  height: 100%;
  text-align: center;
  line-height: 75px;
  font-size: 1.5em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.zresakoped-lasnumgalin .zresakoped-lasnumgalin-social ul li:hover {
  text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.7);
  transition: all 0.1s linear;
}
.zresakoped-lasnumgalin .zresakoped-lasnumgalin-image {
  width: 100%;
  height: 505px;
  position: relative;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-radius: 3px;
}
.zresakoped-lasnumgalin .zresakoped-lasnumgalin-info {
  position: relative;
  width: 100%;
  height: 35px;
  line-height: 35px;
  top: -270px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  font-family: "Open Sans";
  color: rgba(255, 255, 255, 0.91);
}
.zresakoped-lasnumgalin .zresakoped-lasnumgalin-info .zresakoped-lasnumgalin-title {
  line-height: 35px;
  height: 35px;
  position: relative;
  top: 0px;
  font-size: 25px;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
}
.zresakoped-lasnumgalin .zresakoped-lasnumgalin-info .zresakoped-lasnumgalin-detail {
  line-height: 1.5em;
  font-size: 1em;
  height: 220px;
  background: rgba(0, 0, 0, 0.6);
  position: relative;
  top: 5px;
  padding: 3px 15px 0px 15px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
}
.zresakoped-lasnumgalin:hover {
  box-shadow: 10px 10px 10px 1px rgba(58, 54, 54, 0.26);
}
.zresakoped-lasnumgalin:hover .zresakoped-lasnumgalin-info .zresakoped-lasnumgalin-title {
  box-shadow: 10px 10px 10px 1px rgba(33, 31, 31, 0.36);
  transition: 0.3s all linear;
}
.zresakoped-lasnumgalin:hover .zresakoped-lasnumgalin-info .zresakoped-lasnumgalin-detail {
  opacity: 1;
  box-shadow: 10px 10px 10px 1px rgba(25, 23, 23, 0.11);
  transition: 0.35s all linear;
  transition-delay: 0.1s;
  }

@media screen and (max-width: 800px) {
  .zresakoped-lasnumgalin-container {width: 100%;margin: 1%;}
}
@media screen and (max-width: 800px) {
  .zresakoped-lasnumgalin-container {width: 100%;margin: 2%;}
}

Здесь нужно добавить, так как с таким материалом давно не работал, возможно отзывчивый материал нужно под ваш шаблон выставить самостоятельно. Для этого все стили прописаны, так как одна колонка, что уже по умолчанию должна корректно смотреться, но media под элементы прописаны, главное значение ширины по конструктору правильно поставить.

20 Мая 2018 Просмотров: 1655 Комментариев: (0)

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

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

Kosten

Комментарии: 0