» »

Скрипт вид материалов в колонку для uCoz

Скрипт вид материалов в колонку для uCoz

Очередной оригинальный по своему формату вид материалов новостей, файлы с настройкой под адаптивные аппараты, плюс Avatar присутствует. В такой формаций он смотрится уникально под разные тематические ресурсы, где еще поставлен эффект при наведении на картинку. Широкой по своему применение, его можно на доску объявление поставить, ведь он корректно выводит все снимки и представлены полноценные информации изначально, где полная, то просто переходим. А вот заходов там сделано два, это кнопка комментировать, что сразу перебросит на форму добавление. И через название, который откроет полностью обзор, что вас заинтересовал.

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

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

Главному подходим:

HTML:

Код
<div class="bemerka">
  <div class="bemerka-img p-img brighten">
  <div class="img-top"></div>
  <a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$"></a>  
  <div class="img-bottom"></div>
  </div>  
  <div class="bemerka-10">  
  <div class="bemerka-avtor-avatar bemerka-avtor-avatar2">
  <a href="$PROFILE_URL$"><img src="$AVATAR_URL$" alt="автор" title="автор"></a>
  </div>  
  <div class="bemerka-title-detali">
<div class="bemerka-title">
  <a href="$ENTRY_URL$">$TITLE$</a>
  </div>  
  <div class="bemerka-detali">
  <span><i class="fa fa-calendar" aria-hidden="true"></i>$DATE$</span><span><i class="fa fa-clone" aria-hidden="true"></i>$CATEGORY_NAME$</span><span><i class="fa fa-comments" aria-hidden="true"></i>$COMMENTS_NUM$</span>
  </div>  
  </div>  
</div>  
  <div class="bemerka-text">
  $MESSAGE$
  </div>  
  <div class="bemerka-footer">
  <span>$MODER_PANEL_RIGHT$</span>
  <div class="right" title=""><a class="zornetumes" href="$COMMENTS_URL$">Комментировать</a></div>  
  </div>  
  </div>

CSS:

Код
#allEntries div[id*="entryID"]{margin:0 2% 20px 0;width: 100%;float:left;}
#allEntries div[id*="entryID"]:nth-child(2n){margin:0 0 20px 0;}
#allEntries div[id*="entryID"] {padding-bottom: 0px;margin-bottom:20px;}
@media only screen and (max-width: 940px) {
#allEntries div[id*="entryID"]{width:48%;margin: 0 4% 20px 0;}
#allEntries div[id*="entryID"]:nth-child(2n){margin: 0 0 20px 0 !important;}  
#allEntries div[id*="entryID"]:nth-child(2n){margin: 0 4% 20px 0;}

}
@media screen and (max-width: 640px) {
#allEntries div[id*="entryID"]{width:auto !important;margin: 0 0 20px 0 !important;float:none !important;}
}

.bemerka {background: #151313;border: 2px solid #696c73;border-radius: 5px;}
.bemerka-img {width: 100%;height: 257px;display: block;overflow: hidden;position: relative;box-shadow: 0px 9px 14px 0px rgba(216, 213, 213, 0.32), 0px 10px 30px 0px rgba(0, 0, 0, 0.67);}
.bemerka-img img {width: 100%;height: 257px;display: block;border-bottom: 2px solid rgba(154, 154, 154, 0.88);border-radius: 3px 3px 0px 0px;}
.p-img {display: block; }
.p-img:after {bottom: 0;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(249, 245, 245, 0);border-bottom-color: #484646;border-width: 10px;margin-left: -10px;}
.bemerka-10 {padding: 10px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;}
.bemerka-avtor-avatar { width: 50px; height: 50px; border-radius: 50%; display: table-cell;}  
.bemerka-avtor-avatar img {width: 50px;height: 50px;border-radius: 50%;box-shadow: 0px 0px 1px 2px rgba(99, 99, 99, 0.9);border: 1px solid #544f4f;}
.bemerka-title-detali {width: calc(100% - 65px);width: -webkit-calc(100% - 65px);line-height: 24px;padding: 3px 0 0 0;a{color: #fcfff9;}a{color: #fcfff9;}a{color: rgba(244, 255, 236, 0.82);}color: #f1f7ec;color: rgb(231, 236, 249);}
.bemerka-title a {font-size: 18px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;a{color: #fafff5;}a{color: #edefec;}color: #edf1eb;border-bottom: 7px solid #151313;}
.bemerka-detali {opacity: 0.9;}
.bemerka-detali span {font-size: 12px;}
.bemerka-detali span i {padding-right: 5px;}
.bemerka-detali > span + span { margin-left: 10px; }
.bemerka-text {lline-height: 20px;opacity: 0.8;margin-bottom: 15px;padding: 0 12px;height: 70px;overflow: hidden;text-align: justify;}
.bemerka-footer {padding: 9px 5px 45px 10px;border-top: 1px solid #444141;font-size: 25px;text-align: right;}
.bemerka-footer a {display: block;text-align: right;.right {float: right; }text-decoration: none;text-decoration: none;.h_downav_buttonsa: hover {background:#aba5a5;}.bemerka-footera: hover {background:#aba5a5;}}
.bemerka-footer a:hover {background:#5e6061;}
.bemerka-footer span {display: block; float: left;}
.img-top:before {display: block;content: '';position: absolute;height: 29%;width: 2px;background-color: rgba(167, 157, 157, 0.61);z-index: 2;margin-left: 9px;}
.img-top:after {display: block;content: '';position: absolute;height: 2px;width: 29%;background-color: rgba(175, 166, 166, 0.54);z-index: 2;margin-top: 9px;}
.img-bottom:before {display: block;content: '';position: absolute;height: 50%;width: 2px;background-color: rgba(119, 115, 115, 0.59);z-index: 2;right: 9px;top: 61%;}
.img-bottom:after {display: block;content: '';position: absolute;height: 2px;width: 29%;background-color: rgba(156, 146, 146, 0.5);z-index: 2;bottom: 9px;right: 0%;}

.zornetumes {text-shadow: black 0 0 1px;color:#d3fffb;text-align: center;display: block;-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 5px;background: rgba(27, 142, 26, 0.94);color: #FFF;.bemerka-footera: hover {background:#5e6061;}text-shadow: 0 1px 0 #232121;padding: 4px 5px 5px 5px;font-size: 13px;border: 2px solid #a0a0a0;.bemerka-footera: hover {background:#5e6061;}.bemerka-footera: hover {background:#5e6061;}.bemerka-footera: hover {background:#5e6061;}.bemerka-footera: hover {background:#5e6061;}.bemerka-footera: hover {background:#5e6061;}}
.bemerka-footer a:hover {background:rgba(45, 177, 33, 0.95);}

.right {
  float: right;
  padding: 4px 5px 5px 5px;
}
.bemerka-title a {
  font-size: 21px;
  font-weight: bold;
  color: #cdf0ff;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: normal;
  margin: -1px 0;
}  
.bemerka-title a:hover {
  color: #90c8e8;
}

.brighten img {
-webkit-filter: brightness(100%);
-webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.13, 1.24);
-moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.13, 1.38);
-o-transition: all 1s cubic-bezier(0.25, 0.1, 0, 1.08);
-ms-transition: all 1s cubic-bezier(0.25, 0.1, 0, 1.32);
transition: all 1s cubic-bezier(0.25, 0.1, 0.07, 1.36);}
.brighten img:hover {
-webkit-filter: brightness(60%);}

Разделение в разноплановой визуализации, где выходим в интернет соединение на тот или иной сайт.

Это как раз на светлом фоне, где неплохо все вышло.

Светлый вид материалов одна колонка для ucoz

При открытии или входе раздела:

Темный вид материалов в две колонки ucoz

Очень много планшетами пользуются:

Темный вид материалов в две колонки ucoz

Смартфон, это все ближе к идеалу.

Изящный вид материалов в 1 колонку для ucoz

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

Графический вид материалов 1 колонка для uCoz

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

Источник: d-melochi.ru
07.10.2017 Просмотров: 306 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 08.10.2017 01:491
0
Здесь забыл в описание упомянуть, что на мобильный устройствах, если название большое, то автоматически оно сокращается по знаком, что в материале представлено изображение, как примерно будет смотреться.
avatar