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

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

Очередной вид материалов в светлом оттенке под разные фиксированные сайты для системы uCoz, где перекреплены шрифтовые кнопки под стиль. Он также идет полностью адаптивный под разные мобильные аппараты, а так не чего в нем такого отличительного нет. Разве не написаны функций, кроме раздела и каталога, а остальное все по иконкам можно понять. Сделано для того, чтоб как можно больше функционала можно уместить. Его хорошо можно настроить под новостной блог или если у вас активирован еще дополнительный модуль, то установить на него.

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

HTML

Код

<div class="kalibret">
<div class="korumesba_zornet-vid">
<div class="korumesba_zornet-title dumigaten"><span class="xml-text"><a href="$ENTRY_URL$">$TITLE$</a></span></div>
<div class="korumesba_zornet-img"><a href="$ENTRY_URL$" title=""><img src="$IMG_URL1$" class="imgone" alt="$TITLE$"></a></div>
<div class="korumesba_zornet-detali"><li><i class="fa fa-diamond"></i> <a href="$SECTION_URL$">$SECTION_NAME$</a></li><li><i class="fa fa-pencil-square-o"></i> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></li></div>
<div class="korumesba_zornet-text">$MESSAGE$</div>
<div class="korumesba_zornet-detali"><li><i class="ion-ios-download-outline"></i><i class="fa fa-cloud-download"></i> $LOADS$</li><li><i class="ion-ios-refresh-outline"></i><i class="fa fa-eye"></i> $READS$</li><li><i class="ion-ios-chatboxes-outline"></i><i class="fa fa-comments"></i> $COMMENTS_NUM$</li><li><i class="ion-clock"></i><i class="fa fa-thumbs-o-up"></i> $RATING$</div>
</div>
</div>

CSS

Код

.kalibret{
width: 32%;
float:left;
margin: 9px 5px 1px 5px;
}

.korumesba_zornet-vid{
background-color: rgba(245, 240, 240, 0.96);
padding: 2px 2px;
margin: 5px;
box-shadow: 0px 2px 5px 0px rgba(109, 104, 104, 0.66);
border: 1px solid rgba(202, 202, 202, 0.99);
border-radius: 3px;
}

.korumesba_zornet-text{
margin-top: 5px;
max-height: 65px;
overflow: hidden;
padding: 5px;
font-size: 13px;
font-family: cursive;
line-height: 17px;
background-color: rgb(234, 229, 229);
text-align: justify;
color: #1b1919;
}

.korumesba_zornet-img{
height: 203px;
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0px 4px 10px rgba(206, 198, 198, 0.41), 0px 10px 30px -15px rgba(253, 253, 253, 0.38);
}

.korumesba_zornet-img img{
height: 201px;
width: 99%;
transition: all 0.4s cubic-bezier(0.5, 0.24, 0.11, 0.96);
border-radius: 0px 0px 3px 3px;
border: 1px solid rgba(148, 148, 148, 0.98);
}

.korumesba_zornet-img:hover i.playkorumesba_zornetID:hover{
background-color: rgba(38, 43, 46, 1);
}

.korumesba_zornet-img:hover i.playkorumesba_zornetID{
opacity: 1;
z-index: 300;
}

.korumesba_zornet-img:hover img{
-webkit-filter: blur(2px);
filter: blur(2px);
}

.imgone:hover{
z-index: 10;
}

.imgone{
z-index: 100;
margin: 0px;
}

.korumesba_zornet-title{
height: 23px;
text-transform: uppercase;
padding-bottom: 5px;
padding-top: 3px;
background-color: rgba(39, 72, 99, 0.96);
font-family: cursive;
margin-bottom: 1px;
border-radius: 0px 3px 0px 0px;
}

.korumesba_zornet-title:first-letter{
color: rgba(255, 255, 255, 0.97);
font-size: 17px;
margin-right: 2px;
background-color: rgba(13, 73, 101, 0.96);
padding: 5px 7px;
font-family: cursive;
height: 28px;
width: 28px;
border-radius: 3px 0px 0px 0px;
}

.korumesba_zornet-title a{
color: rgba(255, 255, 255, 0.99);
font-size: 13px;
font-weight: normal;
font-family: PT Sans;
}

.korumesba_zornet-title a:hover{
color: rgba(199, 237, 255, 0.97);
}

.korumesba_zornet-detali{
font-family: cursive;
margin-top: 8px;
height: 19px;
line-height: 19px;
border-bottom: rgba(214, 208, 208, 0.63) 1px solid;
border-top: rgba(202, 196, 196, 0.73) 1px solid;
padding-top: 6px;
padding-bottom: 5px;
color: rgba(5, 70, 62, 0.98);
}

.korumesba_zornet-detali li{
list-style: none;
display: inline-block;
font-size: 12px;
border-right: 1px solid rgba(183, 182, 182, 0.96);
padding-right: 8px;
padding-left: 8px;
font-weight: bold;
text-shadow: 0px 1px 0px rgba(245, 241, 241, 0.97);
}

.korumesba_zornet-detali li:last-child{
padding-right: 0;
border-right: 0;
}

.korumesba_zornet-detali i{
padding-right: 5px;
font-size: 13px;
}

.korumesba_zornet-detali a{
color: rgba(10, 97, 83, 0.99);
font-size: 13px;
}

.korumesba_zornet-detali a:hover{
color: rgba(84, 104, 119, 0.99);
}

.film_head{
font-family: cursive;
}

.korumesba_zornet-vid p{
font-family: cursive;
font-size: 12px;
}

.dumigaten{
white-space: nowrap;
overflow: hidden;
background-color: rgba(40, 123, 27, 0.99);
position: relative;
}

.dumigaten::after{
content: '';
position: absolute;
right: 0;
top: 0;
width: 53px;
height: 90%;
background: linear-gradient(to right, rgba(42, 124, 29, 0.07), rgba(42, 124, 29, 0.98) 100%);
}

@media screen and (max-width: 1220px){
.kalibret{
background: rgba(39, 37, 37, 0);
width: 100%;
height: auto;
padding: 0px;
margin: 5px 10px 5px 0px;
}

}

@media screen and (max-width: 390px){
.korumesba_zornet-title a, .korumesba_zornet-title:first-letter{
color: #fff;
font-size: 13px;
}

}

@media screen and (max-width: 390px){
.korumesba_zornet-title, .korumesba_zornet-title:first-letter{
height: 17px;
background-color: #2a7c1d;
margin-right: -7px;
width: 100%;
}

}

@media screen and (max-width: 390px){
.korumesba_zornet-detali{
display: none;
}

}

}

Эта производилась проверка на разные гаджиты.

1.