» »

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

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

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

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

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

На тестовом был проверен на работоспособность, что ниже примерные размеры предоставлены.

HTML

Код
<div class="block_wid">
<div class="dega-muryn">
  <div class="dega-muryn-title-detali">
<div class="dega-muryn-title">
  <p class="geratulakerybu"><a href="$ENTRY_URL$">$TITLE$</a></p>  
  </div>
  <div class="dega-muryn-detali">
  <span><i class="fa fa-calendar"></i> $DATE$</span><i class="fa fa-user-circle-o"></i> <a href="$PROFILE_URL$">$USERNAME$</a> <i class="fa fa-check-square-o" aria-hidden="true"></i> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> <i class="fa fa-eye" aria-hidden="true"></i> $READS$
</div>
</div>
  <div class="dega-muryn-img-message">
  <div class="dega-muryn-img invert">
  <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a>
  </div>  
<div class="dega-muryn-message">$MESSAGE$</div>
  </div>
</div>
</div>

CSS

Код
.dega-muryn{
padding: 10px;
background-color: rgba(249, 245, 245, 0.99);
border-radius: 3px;
margin: 0px 0px 10px 0px;
border: 1px solid #9b9c9e;
box-shadow: 0px 2px 0px 1px rgba(93, 90, 90, 0.22), 0px 3px 0px 0px rgba(72, 69, 69, 0.27);
}

.dega-muryn-title{
padding: 0 0 10px 0;
}

.dega-muryn-title a{
color: rgba(45, 77, 128, 0.97);
font-size: 18px;
display:block;
font-weight: bold;
padding-left: 3px;
text-shadow: 0 1px 0 rgba(255, 247, 247, 0.97);
}

.dega-muryn-title a:hover{
color: #206ed2;
}

.dega-muryn-detali{
background-color: #191717;
display: inline-block;
width: 99%;
height: 33px;
line-height: 30px;
margin: 0 0 10px 0;
border: solid 2px rgba(197, 192, 192, 0.99);
border-radius: 3px;
font-size: 12px;
color: rgba(246, 248, 249, 0.99);
}

.dega-muryn-detali span{
background-color: rgba(49, 45, 45, 0.99);
color: #fffbfb;
padding: 7px 23px 10px 12px;
border-radius: 3px 0px 50px 3px;
margin: 0 10px 0 0;
border: 1px solid rgb(101, 95, 95);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.97);
}

.dega-muryn-detali a{
color: #fff;
font-size: 12px;
padding: 0px 10px 0px 0;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.97);
}

.dega-muryn-detali a:hover{
color: rgba(252, 255, 229, 0.98);
}

.dega-muryn-comments{
float: right;
padding: 0 10px 0 0;
}

.dega-muryn-img-message{
min-height: 158px;
}

.dega-muryn-img{
float: left;
width: 98%;
height: 150px;
padding: 1px;
border: solid 2px rgba(173, 173, 173, 0.99);
border-radius: 3px;
box-shadow: 0px 4px 10px rgba(255, 255, 255, 0), 0px 9px 5px 0px rgba(255, 255, 255, 0.96);
}

.dega-muryn-img img{
width: 100%;
height: 150px;
}

.dega-muryn-message{
text-align: justify;
height: 87px;
overflow: hidden;
line-height: 135%;
padding: 10px 3px 0px 3px;
color: #222325;
font-size: 13px;
}

.block_wid{
width: 49%;
float:left;
margin: 0px 2px 1px 5px;
}

.geratulakerybu{
white-space: nowrap;
overflow: hidden;
padding: 5px;
background: #f8f4f4;
position: relative;
margin: 0px 10px 0px 0px;
}

.geratulakerybu::after{
content: '';
position: absolute;
right: 0;
top: 0;
width: 41px;
height: 73%;
background: -moz-linear-gradient(left, rgba(248, 244, 244, 0.99), rgba(248, 244, 244, 0.99) 100%);
background: -webkit-linear-gradient(left, rgb(248, 244, 244), rgba(248, 244, 244, 0.99) 100%);
background: -o-linear-gradient(left, rgba(248, 244, 244, 0.97), rgba(248, 244, 244, 0.95) 100%);
background: -ms-linear-gradient(left, rgba(248, 244, 244, 0.99), rgba(248, 244, 244, 0.95) 100%);
background: linear-gradient(to right, rgba(248, 244, 244, 0.32), rgba(248, 244, 244, 0.97) 100%);
}

.invert img{
transition: all 1s cubic-bezier(0.46, 0.31, 0, 1.06);
}

.invert img:hover{
-webkit-filter: invert(100%);
}

@media only screen and (max-width:480px){
.dega-muryn-img{
float: none;
width: 100%;
height: auto;
}

.dega-muryn-img img{
width: 100%;
height: auto;
}

}

@media screen and (min-width: 120px) and (max-width: 1080px){
.block_wid{
width:auto;
float:none;
margin:0}

.dega-muryn-img img{
width:100%;
height:100%;
object-fit:cover}

.dega-muryn-img{
float:none;
width:auto;
height:200px;
padding:2px;
border:0;
}

}

@media screen and (max-width: 450px){
.dega-muryn-detali{
display:none}

}

Так по умолчанию или при открытии главной страницы.

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

Так отображается при наведении клика;

Вид материалов в две колонки

Планшет;

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

Смартфон;

С красивым эффектом вид материала

Телефон;

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

Сделан под серый, что возможно на какие-то по палитре не схожий, но все можно изменить, как вы считаете нужным.

Идея от сайта D-melochi.Ru
25.10.2017 Просмотров: 311 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 04.11.2017 14:191
0
Поставил на каталог новостей на сайте, что можете посмотреть, как в реале будет визуально смотреться.

Новости: http://zornet.ru/news/
avatar