ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Необычный вид материалов для uCoz

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

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

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

HTML:

Код

<div class="glanubis-viewn"><?if($IMG_URL1$)?>
<a class="denimak-img" style="background-image:url($IMG_URL1$);" href="$ENTRY_URL$" title="$TITLE$"></a><?endif?>
<a class="vegarumin-title" href="$ENTRY_URL$" title="<?if($CATEGORY_NAME$)?>$CATEGORY_NAME$<?else?>$TITLE$<?endif?>">$TITLE$</a>
<?if($MESSAGE$)?><div class="bemerka-text">
<div class="glanubis-text">$MESSAGE$</div>
</div><?endif?>
<div class="denimak-details">
<span><i class="fa fa-eye fa-fw"></i>$READS$</span><?if($LOADS$)?>
<span><i class="fa fa-download fa-fw"></i>$LOADS$</span><?endif?>
<span><i class="fa fa-user-circle fa-fw"></i><a href="$PROFILE_URL$">$USERNAME$</a></span><?if($CATEGORY_NAME$)?>
<span><i class="fa fa-folder fa-fw"></i><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span><?endif?>
<span><i class="fa fa-comments fa-fw"></i>$COMMENTS_NUM$</span>
</div>
</div>

CSS:

Код

.glanubis-viewn{
background: #2b2929;
padding: 10px;
padding-bottom: 6px !important;
color: #e2e2e2;
overflow: hidden;
margin: 0 0 5px 0;
-webkit-box-shadow: 0 2px 6px 0 rgba(121, 121, 121, .88);
-moz-box-shadow: 0 2px 6px 0 rgba(121, 121, 121, .88);
box-shadow: 0 2px 6px 0 rgba(121, 121, 121, .88);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 2px solid #888888;
}

.denimak-img{
display:block;
width: 100%;
height: 125px;
overflow: hidden;
margin: 0 0 10px 0;
-webkit-background-size:cover;-o-background-size:cover;
-moz-background-size:cover;background-size:cover;
background-position:top;
background-repeat:no-repeat;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
filter: alpha(opacity=80);
-moz-opacity: .8;-khtml-opacity: .8;opacity: .8;
border: 1px solid #888888;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.denimak-img:hover{filter: alpha(opacity=100);
-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;
background-position:center;
}

.vegarumin-title{
display: block;
margin: 0 10px 0 0;
font-size: 21px;
font-weight: bold;
color: rgba(255, 249, 175, .91);
text-decoration: none;
font-family: PT Sans;
text-shadow: 0 1px 0 rgba(29, 28, 28, .95);
border-bottom: 1px solid #3f3f40;
padding: 1px 0 9px 7px;
}

.vegarumin-title:hover{
color: #c7fbf4;
text-decoration: none;
}

.bemerka-text{filter: alpha(opacity=80);
-moz-opacity: .8;-khtml-opacity: .8;opacity: .8;
margin-bottom: 15px;
padding: 5px 1px 0 1px;
height: 77px;
overflow: hidden;
text-align: justify;
}

.glanubis-text{
font-size: 14px;
padding: 5px 0;
overflow: hidden;
}

.denimak-details{
border-top: 1px solid #656161;
font-size: 13px;
padding: 10px 5px 9px 5px;
}

.denimak-details span{
padding: 0 1px 0 3px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
filter: alpha(opacity=71);
-moz-opacity: .71;-khtml-opacity: .71;opacity: .71;
cursor: default;
}

.denimak-details span:hover{filter: alpha(opacity=100);
-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;
}

.denimak-details i{
font-size: 13px;
color:#fffabe;
padding-right:4px;
}

.denimak-details span,
.denimak-details a{
color:#96f4ff;
text-decoration: none;
}

.denimak-details a:hover{
text-decoration: underline;
}

.denimak-details span:last-child{
float:right;
}

Тестовой площадке сняты снимки на устройства:

Основа при заходе на страницу;