» »

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

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

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

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

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

Теперь как визуально смотреться при установке будет.

Здесь видим, как вы открыли сайт и он так будет по умолчанию.

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

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

Красивый эффект на вид материалов uCoz

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

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

Но и на смартфоне или на мобильном телефоне, где то одинаково так будет выдавать.

В колону вид материалов сайта uCoz

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

Меняем полностью вид материала на этот код.

Код
<div class="col-lg-4 col-sm-6 col-xs-12">  
<div class="grid-item-wrapper">  
<div class="grid-item-thumbnail">  
<div class="news-date">$CATEGORY_NAME$</div>  
<a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$"></a>  
</div>  
<div class="grid-item-content has-thumbnail">  
<h3><a href="$ENTRY_URL$"><?if(len($TITLE$)>40)?><?substr($TITLE$,0,37)?>...<?else?>$TITLE$<?endif?></a></h3>  
<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>  
<p><?if(len($MESSAGE$)>85)?><?substr($MESSAGE$,0,82)?>...<?else?>$MESSAGE$<?endif?></p>  
<div class="grid-item-more transition5">  
<a class="btn-ghost" href="$ENTRY_URL$">Read More</a>  
</div>  
</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/Rin/i_time.png') 0px 1px no-repeat;  
}  
.hm_user{  
background:url('http://zornet.ru/Aben/ABGEA/Rin/i_user.png') 0px 1px no-repeat;  
}  
.hm_views{  
background:url('http://zornet.ru/Aben/ABGEA/Rin/i_views.png') 0px 1px no-repeat;  
}  
.hm_comm{  
background:url('http://zornet.ru/Aben/ABGEA/Rin/i_comm.png') 0px 1px no-repeat;  
}  
.hm_cat{  
background:url('http://zornet.ru/Aben/ABGEA/Rin/i_cat.png') 0px 1px no-repeat;  
}  
  .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;  
}  
.col-lg-4, .col-sm-6,  
.col-xs-12  
.col-vs-12{position:relative;min-height:1px;padding-left:10px;padding-right:10px;}  
.col-xs-12{float:left;}  
.col-xs-12{width:100%;}  
.grid-item-content {  
  color: rgba(39, 48, 57, 0.65);  
  background: #FFFFFF;  
  padding: 23px 30px 16px;  
  padding: 1.4375rem 1.875rem 1rem;  
  position: relative;  
  overflow: hidden;  
  text-align: center;  
  box-shadow:0px 2px 5px rgba(0,0,0,0.2);  
  margin:0 0 30px 0;  
}  

.grid-item-content h3 {  
  font-weight: 400;  
  margin-bottom: 14px;  
  margin-bottom: 0.875rem;  
}  

.grid-item-content.has-thumbnail {  
  border-top: none;  
}  

.grid-item-content .grid-item-more {  
  background: #42caad;  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  height: 100%;  
  width: 100%;  
  text-align: center;  
  visibility: hidden;  
  opacity: 0;  
}  

.grid-item-content .grid-item-more a {  
  display: inline-block;  
  position: relative;  
  top: 50%;  
  transform: translateY(-50%);  
  z-index: 99;  
}  

.grid-item-wrapper .grid-item-thumbnail img {  
  width: 100%;  
  margin:0 0 15px 0;  
   
  overflow:hidden;  
  -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);  
}  

.grid-item-wrapper:hover .grid-item-more {  
  opacity: 0.9;  
  visibility: visible;  
}  

.grid-item-wrapper:hover .grid-item-more a {  
  opacity: 1;  
}  

.grid-area {  
  margin-top: 60px;  
  margin-top: 3.75rem;  
}  

.btn {  
  border: 2px solid #757575;  
  color: #757575;  
  padding: 8px 20px;  
  padding: 0.5rem 1.25rem;  
  text-transform: uppercase;  
  display: inline-block;  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  

.btn:hover {  
  border-color: #42caad;  
  color: #42caad;  
}  

.btn-ghost {  
  border: 2px solid #FFFFFF;  
  color: #FFFFFF;  
  padding: 8px 20px;  
  padding: 0.5rem 1.25rem;  
  text-transform: uppercase;  
  display: inline-block;  
  -webkit-border-radius: 2px;  
  -moz-border-radius: 2px;  
  border-radius: 2px;  
}  

.btn-ghost:hover {  
  color: rgba(255, 255, 255, 0.8);  
  border-color: rgba(255, 255, 255, 0.8);  
}  
@media (min-width:768px){.grid-item-wrapper .grid-item-thumbnail img {height:220px;}  
.grid-item-content{height:150px;}  
}  
@media (min-width:992px){.grid-item-wrapper .grid-item-thumbnail img {height:220px;}  
.grid-item-content{height:150px;}  
}  
@media (min-width:1200px){.grid-item-wrapper .grid-item-thumbnail img {height:180px;}  
.grid-item-content{height:150px;}  
}  
@media (min-width:768px){ .col-sm-6,  
.col-sm-6{width:46.8%;}}  
@media (min-width:1200px){.col-lg-4,  
.col-lg-4{width:46.7%;}}

Здесь не указан на какой именно модуль идет этот вид, что можно предположить на файлы, статьи, блок или доска объявление, везде он подойдет и возможно его даже под темный цвет выставить, но как сами понимаете, нужно в стилях все выставить на этот оттенок.
21.08.2017 Просмотров: 458 Комментарий: (5)

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

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

Комментарий: 5
Kosten
Kosten 21.08.2017 14:451
0
Dagada, на тестовом сайте немного прозрачнее сделал на вид, когда наводишь. Чтоб можно было просмотреть название, но думаю здесь сами веб мастера и цвет свой выставят и прозрачность сделают как нужно. Этот материал также все настройки в стилях, только не трогаем, что за адаптивность отвечает.
Critic©
Critic© 21.08.2017 15:422
0
Так можно с одного вида делать несколько, но соглашусь, что редко когда переделываешь и получается оригинально, здесь вот получилось. Сейчас уже адаптивностью трудно удивить, но все же кто ее делает респект.
Kosten
Kosten 21.08.2017 16:273
0
Здесь если сравнивать с вид материалом, который указал в материале, то только иконки под функций добавлены. Но как в описание указано, то очень грамотно сделан и по дизайн и по адаптивности, что все скрины представил, как будет реально и визуально смотреться.

Если говорить о категорий, которая на картинке, то она немного вылазит,, так как там тень идет и по мне так оригинальнее, но кому нужно, тот может просто на ровне с картинкой сделать и безусловно сменить оттенок.
avatar
lepsheeff_corporation 05.09.2017 18:254
0
как сделать что бы картинка верхняя отображалась?
у меня там название материала в виде ссылки ..
Kosten
Kosten 05.09.2017 22:015
0
Не должно так быть, возможно в админ панели не поставлена галочка на изображение, посмотрите.
avatar