» »

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

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

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

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

Рассмотрим как на разных экранах по размеру смотриться.

Когда зайдете на ресурс, то так будет по умолчанию на любом по фиксаций шаблона.

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

Это примерно под планшет идет и сразу видим как вид трансформировался.

Вид материалов на мобильный сайт

Здесь примерно на мобильном телефоне будет отображаться.

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

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

Первое что делаем, это заменим полностью вид материала на том модуле, где ставите.

Код
<div class="post post-short">  
<div class="post-header">  
<div class="box-thumb">  
<div class="post-image">  
<a href="$ENTRY_URL$" title=""><img src="$IMG_URL1$" alt="$TITLE$"></a>  
  <div class="news-date">$CATEGORY_NAME$</div>  
</div>  
</div>  
</div>  
  <div class="post-story">  
  <div class="post-title">  
<h2><a href="$ENTRY_URL$">$TITLE$</a></h2>  
  </div>  
<div class="post-story-body">  
$MESSAGE$  
</div>  
<div class="post-story-link">  
<a href="$ENTRY_URL$" class="btn-default btn2">читать далее</a>  
</div>  
<div class="h_mtr_date">  
<span class="hm_d hm_user"><a href="$PROFILE_URL$">$USERNAME$</a></span>  
<span class="hm_d hm_views">$READS$</span>  
<span class="hm_d hm_date">$DATE$</span>  
</div>  
</div>  
</div>

CSS:

Код
.h_mtr_date{  
margin-top:14px;  
margin-bottom:7px;  
font-size:14px;  
color:#818181;  
}  
.h_mtr_date a{  
color:#818181;  
}  
.hm_d{  
display:inline-block;  
padding-left:22px;  
padding-right:10px;  
}  
.hm_date{  
background:url('http://zornet.ru/Aben/ABGEA/i_time.png') 0px 1px no-repeat;  
}  
.hm_user{  
background:url('http://zornet.ru/Aben/ABGEA/i_user.png') 0px 1px no-repeat;  
}  
.hm_views{  
background:url('http://zornet.ru/Aben/ABGEA/i_views.png') 0px 1px no-repeat;  
}  
.hm_comm{  
background:url('http://zornet.ru/Aben/ABGEA/i_comm.png') 0px 1px no-repeat;  
}  
.hm_cat{  
background:url('http://zornet.ru/Aben/ABGEA/i_cat.png') 0px 1px no-repeat;  
}  
.post-title {  
  padding: 10px;  
   
}  
.post-title a {  
  color: #5F5D5D;  
  font-weight: bold;  
}  
.post-title a:hover {color:#FA4B4D;}  
.post-title img{  
  float: right;  
}  
.news-date{  
position: absolute;  
top: 6px;  
left: 6px;  
padding: 2px 7px;  
color: #fff;  
background: #01B94C;  

font-size: 14px;  
font-weight: 700;  
text-shadow: #06375C 0 1px 1px;  
}  
.box-thumb {  
  width: 100%;  
  margin: 0 auto;  
  padding: 0;  
  overflow: hidden;  
  position: relative;  
  cursor: pointer;  
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);  
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);  
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);  
}  
.box-thumb img {  
  max-width: 100%;  
  height: auto;  
  display: block;  

  -webkit-transform: scale(1);  
  transform: scale(1);  

  -webkit-transition: .4s ease-in-out;  
  transition: .4s ease-in-out;  
}  

.box-thumb:hover img {  
  -webkit-transform: scale(1.2);  
  transform: scale(1.2);  
}  
.box-thumb::before {  
  position: absolute;  
  top: 0;  
  left: -75%;  
  z-index: 2;  
  display: block;  
  content: '';  
  width: 50%;  
  height: 100%;  

  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);  
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);  
  -webkit-transform: skewX(-25deg);  
  transform: skewX(-25deg);  
}  
.box-thumb:hover::before {  
  -webkit-animation: shine .85s;  
  animation: shine .85s;  
}  
@-webkit-keyframes shine {  
  100% {  
  left: 125%;  
  }  
}  
   
@keyframes shine {  
  100% {  
  left: 125%;  
  }  
}  
   
.post{margin-bottom: 50px;}  
.post .post-header{position: relative;}  
.post .post-header .post-image{position: relative;}  
.post .post-header .post-image img{ position:relative;max-height: 400px;width:100%;object-fit:cover}  
  .post .post-header .post-image a:hover img {}  
.post .post-header .post-slide{position: relative;}  
.post .post-story{position: relative; margin-top: -70px; margin-left: 35px; margin-right: 35px; background: #fff; padding: 30px; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);}  
.post .post-story .additional{ padding-bottom: 20px; text-align: center; font-size: 11px; color: #777777;}  
.post .post-story .post-story-body{color: #999999;}  
.post .post-story .post-story-link{text-align: center; padding-bottom: 10px; padding-top: 20px;}  
.btn-default.btn2{box-shadow: 0px 10px 50px -10px #FA9D6C; font-family: 'PT Sans'; display: inline-block; color: #fff; border: none; font-size: 12px; line-height: 20px; font-weight: 700; padding: 10px 20px; text-decoration: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; margin: 2px 6px; text-transform: uppercase; background: #e66939; position: relative; border: 1px solid #e66939;}  
.btn-default.btn2:hover{color: #e66939; background: #fff;}  
@media (max-width: 767px) {  
.post .post-story{margin: 0;}  
}  
@media only screen and (max-width:960px){  
.h_mtr_date .hm_user { display: none;}  
}

Как заметили по цветовой гамме идет светлый, вы можете сделать серым, где будет описание и уже сразу измениться визуально.
20.08.2017 Просмотров: 441 Комментарий: (8)

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

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

Комментарий: 8
Kosten
Kosten 20.08.2017 15:471
0
Ставил на тестовой сайт, вообще шикарно смотрится, больше под блог или статьй, но и файлы на нем можно красиво сделать, на каталоге файлов как раз проверял. Дизайн безусловно не стандартный, но когда адаптирован, все по высоте.
Critic©
Critic© 20.08.2017 19:212
0
Этот вид под файлы не вижу, чтоб подходил, вот под блог его хорошо можно применить и красиво смотрится. На темный его переделал, что также отлично все получилось. Это просто на браузере выводил, что не стал делать темным, так как считаю под тенями он намного лучше получился. Что адаптивность на нем присутствует, но это уже не кого не удивить, как посмотрел, что Dagada только адаптивный материал представляет. Но вот под таким стилем созданный, здесь вот удивил. Попробуйте под темный его сделать, может пригодиться.
Kosten
Kosten 20.08.2017 19:363
0
Можно долго говорить под какой каталог подходит больше, просто можно заметить, что на файл он подойдет, но согласен и в описание подметил, что больше под статьй, а это не обязательно этот каталог, а просто блог и под него писать их. Здесь и превью самому нужно делать, так как просто скопировать в сети не получиться. И лучше как на ютубе и на этом вид материале картину самому по размеру делать и оригинальную создавать.
Critic©
Critic© 20.08.2017 19:394
0
Но а почему под новости, их вообще редко кто ставят на главную страницу, но если только не новостной сайт.
Kosten
Kosten 20.08.2017 19:515
0
Здесь автор написал под блог, но уже такой запрос есть на сайте, вот удивило, что на новости почти нет, если есть, но только в контексте, что и переписал его. Что не является, что он только настроен на новости, так как на каталоге файлов на работоспособность проверял.
Kosten
Kosten 20.08.2017 20:276
0
Забыл за красивый эффект написать на изображение, вот кто поставит на сайт и потом наведите на картинку, вы его увидите, описывать что будет не буду, но думаю вам понравиться.
Kosten
Kosten 20.08.2017 20:447
0
Если подключить другой шрифт, то сразу совершенно другой обзор этого вид материала. На некоторых он идет в стилях и по умолчанию. Но и как видим кнопка также изменена, а точнее закругленные углы поставлены.

Код
font-family: 'Lasco Bold';


1 2 »
avatar