» »

Темно синий вид материалов (Y2) для uCoz

Темно синий вид материалов (Y2) для uCoz

Новостные сайты стали популярны и здесь вид материалов для uCoz, под эту тематику отлично подойдет в темно синем оттенке с Avatar. Что просто переделал, а точнее что-то убрал из дизайна, как угловые узоры по обеим сторонам и выставил простой эффект на срабатывание, когда пользователь или гость наведет курсор на картинку. Сейчас актуально ставить рейтинг статьям, вообще тому, что разместил администратор. И по нему все больше делают свои выводы, что вероятнее лучше обосновывать обывателю.

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

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

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML:

Код
<div class="mugislan">  
  <div class="mugislan-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="mugislan-10">  
  <div class="mugislan-avtor-avatar mugislan-avtor-avatar2">  
  <a href="$PROFILE_URL$"><img src="$AVATAR_URL$" alt="автор" title="автор"></a>  
  </div>  
  <div class="mugislan-title-detali">
<div class="mugislan-title">
  <a href="$ENTRY_URL$">$TITLE$</a>
  </div>  
  <div class="mugislan-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="mugislan-text">
  $MESSAGE$
  </div>  
  <div class="mugislan-footer">
  <span class="rating-kp-imdb"><span><i class="fa fa-thumbs-o-up"></i> $RATING$</span>  
</span>  
  <div class="right" title=""><a class="zornetumes" href="$COMMENTS_URL$">Комментировать</a></div>  
  </div>  
  </div>

CSS:

Код
#allEntries div[id*="entryID"]{margin: 0px 2% 20px 9px;width: 48%;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;}
}

.mugislan {background: #051338;object-fit: cover;border: 3px solid #aba7a7;box-shadow: 0px 0px 1px 1px #929292;border-radius: 3px;}
.mugislan-img {width: 100%;height: 235px;display: block;overflow: hidden;position: relative;box-shadow: 0px 7px 14px 0px rgba(220, 218, 218, 0.49), 0px 10px 30px 0px rgba(0, 0, 0, 0.67);}
.mugislan-img img {width: 100%;height: 235px;display: block;border-bottom: 2px solid rgba(154, 154, 154, 0.88);border-radius: 0px 0px 0px 0px;}
.p-img {display: block; }
.p-img:after {bottom: 0;left: 50%;border: solid rgba(0, 0, 0, 0);content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(249, 245, 245, 0);border-bottom-color: #545864;border-width: 10px;margin-left: -10px;}
.mugislan-10 {padding: 15px;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;}
.mugislan-avtor-avatar { width: 50px; height: 50px; border-radius: 50%; display: table-cell;}  
.mugislan-avtor-avatar img {width: 50px;height: 50px;border-radius: 50%;box-shadow: 0px 0px 7px 2px rgba(152, 151, 151, 0.9);border: 1px solid #544f4f;}
.mugislan-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(183, 242, 243);}
.mugislan-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 #051338;}
.mugislan-detali {opacity: 01;}
.mugislan-detali span {font-size: 12px;}
.mugislan-detali span i {padding-right: 5px;}
.mugislan-detali > span + span { margin-left: 10px; }
.mugislan-text {lline-height: 20px;opacity: 1;margin-bottom: 15px;padding: 0 12px;height: 70px;overflow: hidden;text-align: justify;}
.mugislan-footer {padding: 3px 5px 40px 8px;border-top: 1px solid #444040;font-size: 13px;text-align: right;}
.mugislan-footer a {display: block;text-align: right;.right {float: right; }text-decoration: none;text-decoration: none;.h_downav_buttonsa: hover {background:#aba5a5;}.mugislan-footera: hover {background:#aba5a5;}}
.mugislan-footer a:hover {background:#5e6061;}
.mugislan-footer span {display: block; float: left;}
.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: 10px;background: rgba(14, 56, 80, 0.94);color: #FFF;.mugislan-footera: hover {background:#5e6061;}text-shadow: 0 1px 0 #232121;padding: 4px 5px 5px 5px;font-size: 13px;border: 2px solid #a9a4a4;.mugislan-footera: hover {background:#5e6061;}.mugislan-footera: hover {background:#5e6061;}.mugislan-footera: hover {background:#5e6061;}.mugislan-footera: hover {background:#5e6061;}.mugislan-footera: hover {background:#5e6061;}}
.mugislan-footer a:hover {background:rgba(12, 42, 60, 0.95);}

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

.brighten img {
-webkit-filter: brightness(100%);
-webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.08, 1.07);
-moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.27, 0.99);
-o-transition: all 1s cubic-bezier(0.25, 0.1, 0.29, 0.75);
-ms-transition: all 1s cubic-bezier(0.25, 0.1, 0.48, 0.9);
transition: all 1s cubic-bezier(0.25, 0.1, 0.21, 0.77);}
.brighten img:hover {
-webkit-filter: brightness(60%);}

.rating-kp-imdb {
  padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10px;
  background: rgb(13, 31, 43);
  margin: 5px 30px 9px 0;
  color: rgba(255, 255, 241, 0.96);
  border: 2px solid rgba(128, 129, 130, 0.99);
}

Снимки с тестового, где проверялся на работоспособность.

По умолчанию, зависит от фиксированной ширины;

Стильный вид материала для сайта

С планшете, примерно виртуальность такая должна;

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

У смартфона такой обзор;

Мобильный вид материалов для сайта юкоз

Телефон с его узким экраном;

Для файлов вид материалов uCoz

Цветовая палитра:

Множество площадок в сети лицезреть, что предпочтение идет на визуализацию. Вторая кнопка и при нажатии на ее, вам переместит прямо в форму добавление, что удобно по функционалу продумано, но по названию возможность зайти.

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

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

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

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

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