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

Вид материалов затемненный блог для uCoz

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

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

HTML

Код
<div class="kalitum-vid clr">
<div class="kalitum-vid-title">
<span class="title-icon"><a href="$ENTRY_URL$">$TITLE$</a></span>
  </div>
  <div class="kalitum-vid-img-text">
  <div class="kalitum-vid-img brighten">
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$"></a>  
  </div>
  <div class="kalitum-vid-text">
$MESSAGE$
  </div>
</div>
  <div class="kalitum-vid-detali"><span class="dates"><i class="fa fa-clock-o" aria-hidden="true"></i>  $DATE$</span><span class="reads"><i class="fa fa-eye" aria-hidden="true"></i>  $READS$</span><span class="cat_mm"><i class="fa fa-check-square-o" aria-hidden="true"></i>  $CATEGORY_NAME$</span><span class="coments"><i class="fa fa-comments-o" aria-hidden="true"></i>  <?if($COMMENTS_NUM$)?>$COMMENTS_NUM$ комментар<?if($COMMENTS_NUM$%10=1&&$COMMENTS_NUM$%100!=11)?>ий<?else?><?if($COMMENTS_NUM$%10>=2&&$COMMENTS_NUM$%10<=4&&($COMMENTS_NUM$%100<10||$COMMENTS_NUM$%100>=20))?>ия<?else?>иев<?endif?><?endif?><?else?>нет комментариев<?endif?></span> <span><a href="$ENTRY_URL$">Далее</a></span></div>
</div>

CSS

Код
.kalitum-vid{
margin: 0 0 20px 0;
background: #272424;
display: inline-block;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 3px 3px 3px 3px;
}

.kalitum-vid-title{
padding: 10px 0 10px 20px;
border-bottom: 1px solid #383636;
background-color: #313131;
border-radius: 3px 3px 0px 0px;
}

.kalitum-vid-title a{
font-size: 19px;
color: rgba(253, 245, 245, 0.97);
display: block;
font-weight: bold;
font-family: PT Sans;
}

.kalitum-vid-title a:hover{
color: rgba(191, 255, 250, 0.89);
text-decoration: none;
}

.kalitum-vid-title span{
letter-spacing: .1em;
font-size: 10px;
display: inline-block;
}

.kalitum-vid-img-text{
display: inline-block;
padding: 10px;
}

.kalitum-vid-img{width: 100%;height: 180px;background: #636161;padding: 1px;float: left;border-radius: 3px;box-shadow: 1px 6px 16px 0px rgba(148, 148, 148, 0.4), 0px 19px 12px 9px rgba(0, 0, 0, 0);}

.kalitum-vid-img img{
width: 100%;
height: 100%;
object-fit: cover;
}

.kalitum-vid-text{
padding: 15px 15px 15px 10px;
text-align: justify;
height: 73px;
overflow: hidden;
line-height: 135%;
font-size: 15px;
color: #dad5d5;
}

.kalitum-vid-detali{
background-color: #191818;
margin-top: 5px;
height: 40px;
line-height: 40px;
padding-left: 9px;
border-radius: 0px 3px 3px 3px;
}

.kalitum-vid-detali span{
font-size: 13px;
color: #fffeda;
padding-right: 12px;
}

.kalitum-vid-detali span a{
float: right;
background-color: #116894;
display: block;
padding: 0 10px;
font-weight: bold;
color: #eae4e4;
letter-spacing: .1em;
text-transform: uppercase;
border-radius: 0px 0px 3px 0px;
}

.kalitum-vid-detali span a:hover{
text-decoration: none;
background-color: #35b2f2;
}

.dates{
padding-left: 1px!important;
}

.reads{
padding-left: 12px!important;
}

.coments{
padding-left: 12px!important;
}

@media screen and (max-width: 600px){
.kalitum-vid-detali span{
display: block;
padding: 0px 10px!important;
background: #272424;
}

.kalitum-vid-detali{
height: auto;
padding-left: 0px;
*/ }

.kalitum-vid-detali span a{
float: none;
text-align: center;
margin: 5px 2px 10px 0px;
border-radius: 10px;
}

.dates, .reads, .coments, .cat_mm{
display: none!important;
}

}

.brighten img {
-webkit-filter: brightness(100%);
-webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0, 0.93);
-moz-transition: all 1s cubic-bezier(0.25, 0.1, 0, 1.21);
-o-transition: all 1s cubic-bezier(0.25, 0.1, 0, 0.88);
-ms-transition: all 1s cubic-bezier(0.25, 0.1, 0, 0.77);
transition: all 1s cubic-bezier(0.25, 0.1, 0, 0.74);}
.brighten img:hover {
-webkit-filter: brightness(47%);}

Вся основная часть работоспособности протестированная на тестовом.

1. При заходе на ресурс, в зависимости фиксаций.

Оригинальный вид материалов файлов для ucoz

2. Это примерно с планшета так можно наблюдать.

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

3. Многие на смартфоне залетают в сети соединение.

Каталог вид материала файла

4. Одна из распространенных, это телефон, как хотите его называйте, для меня простая трубка.

Темнно стильный вид материалов для сайта

Все иконки, что под каждую функцию, выстроены в шрифте, что переходим и прочтите мануал, как их правильно в корень сайта, файловый менеджер идет прописка.
17 Октября 2017 Просмотров: 1341 Комментариев: (1)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 18 Октября 2017 03:521
0
Под этот вид материала хотел сделать на 2 колонки, что добавил еще стилей, что немного изменил дизайн, но вот с адаптивностью не получилось. Не хочется просто скидывать, возможно кому то пригодиться, здесь изменил эффект при нажатие и стилистика добавлено, что можно сравнить.

Это при наведение клика.



По умолчанию, как просто зашел на сайт, зависит от фикчаций ширины.



Это мобильность, что в одну колонку он отлично адаптирован на все мониторы по ширине своей.



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

СКАЧАТЬ
Войдите:
avatar