» »

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

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

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

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

Почему игровой?

Не исключение, что широкая возможность на площадки, все зависит от стилистики самого ресурса.

Здесь снимки, что были сняты с тестового на работоспособность и мобильных устройств.

1.

Стильный вид материалов юкоз

2.

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

3.

Мобильный вид материалов для юкоз

HTML:

Код
<div class="f_viewn">
<a href="$ENTRY_URL$" title="$TITLE$"><div class="f_title" style="background-image:url(<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>);"><span>$TITLE$</span></div></a>
<div class="f_cont">$MESSAGE$</div>
<div class="f_details"><?if($CATEGORY_NAME$)?>
<span>$CATEGORY_NAME$</span><?endif?>
<div class="right">
<span><i class="fa fa-eye fa-fw"></i> $READS$</span>
<span><i class="fa fa-download fa-fw"></i> $LOADS$</span>
<span><i class="fa fa-comments fa-fw"></i> $COMMENTS_NUM$</span>
</div>
</div>
</div>

CSS:

Код
.f_viewn {width: 49%;height: 210px;overflow:hidden;background: #171515;box-shadow: 0px 5px 10px 0px #2d2828;border-radius:5px;margin: 0 0 17px 6px;float:left;transition:0.3s;}
.f_viewn:hover {background: #252222;}
.f_viewn:hover .f_title span {background: rgba(0, 0, 0, 0.37);}
.f_title {height: 87px;overflow:hidden;border-bottom: 1px solid #585252;background-size:cover;background-position:center;background-repeat:no-repeat;}
.f_title span {transition:0.3s;background: rgba(0, 0, 0, 0.66);width: 100%;height: 89px;color:#fffdfd;display:block;text-align:center;font-size:18px;text-shadow: 0px 2px 2px rgb(4, 4, 4);text-transform:uppercase;padding: 29px 5px 0px 5px;}
.f_cont {color: #b7aeae;font-size: 13px;padding: 5px;overflow:hidden;height: 72px;}
.f_cont br {display:none;}
.f_details {height: 45px;display:block;border-top: 1px solid #545050;line-height: 48px;color:#222121;padding:0 10px;color: #1f1a1a;}
.f_details span {font-size:13px;color: #c5bbbb;padding: 4px 8px;border-radius: 5px;border: 1px solid #a99d9d;}
.f_details span i {font-size:12px;}
.right {float:right;}

Краткое описание так видите, где не будет точек, а в четыре столбика визуально видно будет.

Исправления от пользователя -SAM-
25.09.2017 Просмотров: 419 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 11.11.2017 23:491
0
Здесь можете добавить в стиле класс, что отвечает в корректном выводе по правую сторону, где не будет больших пробелов.

В CSS:

Код
text-align: justify


В конце ставим ; то что то не появляется.

Что вот так получится, все ровно с левой и правой боку по описанию.



Просто не стал прописывать, возможно кому то это не нужно, но также, кто то хочет так видеть, что в стили ставим и сохраняем.
avatar