» »

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

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

По своему универсальный вид материалов, что изначально идет в 2 колонка для сайта uCoz, где отлично можно расположить на каталог новостей. По умолчанию он шел на четыре картинки, что визуально не так читабельно, так как только одна обложка по сути была различима. Что пришлось его перестроить в два каркаса и выставить на мобильные аппараты, что теперь полностью адаптивный по своей структуре произведен.

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

Все с тестового было взято при проверке на работоспособность на мобильные носители как планшет или смартфон с телефоном.

1.

В две колонки для новостей сайта

2.

Адаптивные вид на модуль сайта

3.

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

HTML

Код
<div class="kostersa_tumidan">
  <a href="$ENTRY_URL$" title="$TITLE$">
  <div class="img">
  <img src="$IMG_URL1$" alt="$TITLE$">
  <div class="cat-name"><i class="fa fa-pencil-square-o"></i>$CATEGORY_NAME$</div>
  <div class="poster-rate"><i class="fa fa-thumbs-up"></i><span>$RATED$</span></div>
  </div>  
  </a>  
  <div class="title">
  <a href="$ENTRY_URL$" title="$TITLE$">$TITLE$</a>
  </div>
</div>

CSS

Код
.kostersa_tumidan{position:relative;width: 46.9%;float:left;margin:1%;margin-bottom: 2%;padding: 3px;transition:all .3s;border: 1px solid #dad3d3;border-radius: 5px 5px 3px 3px;box-shadow: 0px 0px 5px 1px rgba(97, 90, 90, 0.47), 0px 0px 3px 0px rgba(29, 27, 27, 0.42);}
.kostersa_tumidan .img:hover::after{content:'\f219';font-family:'fontawesome';position:absolute;color:#fff;font-size:45px;left:45%;top:40%;transition:all .2s}
.kostersa_tumidan{background:#3180a7;}
.title a{color:#ffffff;text-shadow: 0 1px 0 #313030;}
.kostersa_tumidan .img{position:relative;width:100%;height: 249px;overflow:hidden;border-radius: 3px 3px 0px 0px;}
.kostersa_tumidan .img:before{content:'';position:absolute;width:100%;height:100%;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.65) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.65) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.65) 100%);}
.kostersa_tumidan .img img{width:100%;height:100%}
.kostersa_tumidan .title{height:40px;line-height:40px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 8px;font-size: 17px;font-weight: bold;font-family: PT Sans;}
.kostersa_tumidan .poster-rate{position:absolute;color: rgb(249, 244, 244);font-family:'Open Sans',Verdana,sans-serif;right: 10px;top: 205px;z-index:5;line-height:30px;border-radius:100%;text-align:center;}
.kostersa_tumidan .cat-name{position:absolute;left:5px;top: 205px;z-index:5;padding:5px;color:#FFE;}
.kostersa_tumidan .cat-name .fa,.kostersa_tumidan .poster-rate .fa{margin-right:8px}
.kostersa_tumidan .poster-rate {color:#5cf52a}  

@media screen and (max-width: 1124px) {  
  .kostersa_tumidan {width: 46%;margin: 1%;}  
}  
@media screen and (max-width: 860px) {  
  .kostersa_tumidan {width: 96%;margin: 2%;}  
}

Также есть по всем сторонам тени, что оригинально дополняют, и синий оттенок, где в самой стилистике вы можете очень легко поменять под свой интернет портал, но и как всегда подключены шрифтовые иконки, что на современные площадки без них трудно представить.
30.12.2017 Просмотров: 328 Комментарий: (2)

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

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

Комментарий: 2
Kosten
Kosten 30.12.2017 01:041
0
При наведение на изображение появится шрифтовая иконка. что можно поставить тематическую.

Также будет еще одна вариация на 2 колонки, только по стилистике совершенно разная, так и по функциям.
Kosten
Kosten 30.12.2017 20:242
+1
Вообщем не буду делать новый материал, так как изменение небольшое, а точнее, все в светлом по умолчанию идет. При наведение клика становится в синем оттенке, но как поняли все на CSS выполнено, что цветами можно играться и менять.



HTML



CSS

avatar