» »

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

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

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

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

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

HTML

Код
<div class="kakibrovka-tab">  
  <div class="kakibrovka-img">  
  <span class="danernugat-date">$TIME$<span>$WDAY$</span></span>  
  <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt=""></a>  
  </div>  
  <div class="kakibrovka-right">  
  <h2 class="kakibrovka-title"><p class="zerkavrtun"><a href="$ENTRY_URL$">$TITLE$</a></p></h2>  
  <div class="kakibrovka-det">  
  <span><i class="fa fa-eye"></i>$READS$</span>  
  <span><a href="$COMMENTS_URL$"><i class="fa fa-comments"></i>$COMMENTS_NUM$</a></span>  
  <span><a href="$PROFILE_URL$"><i class="fa fa-user"></i>$AUTHOR_NAME$</a></span>  
  <span><a href="$CATEGORY_URL$"><i class="fa fa-folder"></i>$CATEGORY_NAME$</a></span>  
  </div>  
  <div class="tumilatuz-text">  
  <div class="kakibrovka-short">$MESSAGE$</div>  
  </div>  
</div>  
</div>

CSS

Код
.kakibrovka-tab{  
display:block;  
width:100%;  
margin-bottom: 25px;  
background: rgba(243, 243, 243, 0.99);  
border: 1px solid rgba(214, 214, 214, 0.98);  
border-radius: 6px 6px 3px 3px;  
box-shadow: 0px 1px 10px rgba(148, 148, 148, 0.39), 0px 3px 18px 0px rgba(12, 12, 12, 0.09);  
}  

.kakibrovka-img, .kakibrovka-right{  
display:block;  
vertical-align:top;  
}  

.kakibrovka-right{  
padding: 12px;  
}  

.kakibrovka-img{  
width:100%;  
position:relative;  
}  

.kakibrovka-img img{  
width:100%;  
vertical-align:bottom;  
height: 230px;  
border-bottom: 2px solid rgba(185, 188, 191, 0.98);  
}  

.kakibrovka-det{  
margin-top:10px;  
color:rgba(128, 128, 128, 0.98);  
font-size:13px;  
border-bottom: 1px solid rgba(219, 225, 232, 0.98);  
padding: 1px 0px 9px 1px;  
}  

.kakibrovka-det span{  
margin-right:8px}  

.kakibrovka-det i{  
margin-right:8px}  

.kakibrovka-det a{  
color:rgba(128, 128, 128, 0.97);  
text-decoration:none}  

.kakibrovka-title{  
font-size:18px;  
padding-right:10%;  
margin:0px;  
border-bottom: 1px solid rgba(216, 220, 224, 0.98);  
padding: 0px 0px 9px 5px;  
}  

.kakibrovka-title a{  
text-decoration:none;  
font-weight:bold}  

.kakibrovka-title2{  
font-size:28px;  
font-weight:bold;  
margin:0px}  

.kakibrovka-short{  
margin-top: 3px;  
line-height:2em;  
}  

.kakibrovka-short2{  
margin-top:30px;  
line-height:2em}  

.kakibrovka-over{  
padding:30px;  
padding-bottom:40px}  

.danernugat-date{  
display:inline-block;  
position:absolute;  
top: 17px;  
left: 17px;  
color:#fff;  
text-align:center;  
padding: 10px 18px;  
font-size:22px;  
line-height:24px;  
background: rgba(0, 0, 0, 0.18);  
border-radius: 10px;  
}  

.danernugat-date span{  
display:block;  
font-size:11px;  
text-transform:lowercase;  
line-height:13px;  
margin-top:3px}  

.kakibrovka-tab:hover .danernugat-date{  
background:rgba(0,0,0,0.2);  
}  

.kakibrovka-tab img, .h-content-top img{border-top-left-radius: 6px;border-top-right-radius: 6px;}  

.tumilatuz-text{  
opacity: 0.9;  
margin-bottom: 0px;  
padding: 0 0px;  
height: 89px;  
overflow: hidden;  
text-align: justify;  
color: #3f474c;  
font-size: 15px;  
font-family: PT Sans;  
}  

.kakibrovka-title a{  
color: rgba(46, 127, 177, 0.97);  
font-size: 21px;  
overflow:hidden;  
font-family: PT Sans;  
font-weight: bold;  
}  

.kakibrovka-title a:hover{  
color: rgba(130, 52, 20, 0.93);  
}  

.zerkavrtun{  
white-space: nowrap;  
overflow: hidden;  
padding: 3px;  
background: #f3f3f3;  
position: relative;  
margin: 0px 5px 5px -7px;  
}  

.zerkavrtun::after{  
content: '';  
position: absolute;  
right: 0;  
top: 0;  
width: 70px;  
height: 100%;  
background: linear-gradient(to right, rgba(243, 243, 243, 0.22), rgb(243, 243, 243) 100%);  
}  

@media screen and (max-width: 500px){  
.kakibrovka-det{  
display: none!important;  
}  

}

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

1. Это по умолчанию, у каждого своя уникальная ширина.

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

2. Видимость как пример под планшет, что все отлично отображается.

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

3. Подходим в смартфон.

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

4. И большинство выходят в интернет через телефон, и здесь уже видно, что некоторые элементы убраны, что делается автоматически.

Светлый вид материалов новостей для Ucoz

5. Но и тот эффект, чтоб понятно как он работает по длине, по правую сторону все видно.

Вид материалов блога с эффектом для uCoz

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

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

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

Комментарий: 2
Kosten
Kosten 01.11.2017 21:001
0
Как можно поставить при мобильных аппаратах кнопку "Далее" в низу. Просто сейчас на 2 колонки сделал и адаптировал его на все мониторы, и вот кнопку бы установить, просто красивее.
-SAM-
-SAM- 02.11.2017 05:432
0
В общем, вот тут обсуждали уже, можно всё почитать (как и более правильно это всё на форуме разбирать).
avatar