» »

Вид материалов сайта Zagruzka для uCoz

Вид материалов сайта Zagruzka для uCoz

Под игровую тематику этот вид материалов отлично подойдет, где функций указаны, это просмотры и сколько скачало, в темном стиле. Он мне напомнил один дизайн интернет ресурса "Загрузка плюс" где название расположено в оригинальном обводе. Перестроил на черный сайт, добавляя шрифтовые иконки и визуально стал смотреться в разноплановых красках. Главное, написано краткое описание, и фона не существовало и налаживался на выстроенный портал. Теперь есть возможность редактировать и подгонять на усмотрение. Минус появился в работе преображение в стилистике сбилась мобильная адаптивность, где нужно отрегулировать.

Изначально на белый формат сделан, где в архиве найдете текстовой документ полностью прописан. Автор Дмитрий, что ставил на Counter-Strike: Source и все гармонично становилось. Но эффект, что срабатывает при наведении на изображение приложено увеличение происходит. Простой и доступный в информационном поле располагаться синее кнопка, что произвести закачку или "Далее" как на многих функционал провести. Все построено на чистом КСС, где в обязанность будет погонять размеры. У различных шаблонов своя фиксация, и здесь регулировка обязательна.

1.

Вид материалов с эффектом красивым

2.

Вид для файлов материалов

3.

В одну колону вид материалов юкоз

HTML

Код
<div class="zornet_vid clr">  
  <div class="zornet_vid_title"><a href="$ENTRY_URL$">$TITLE$</a></div>
  <div class="zornet_vid_img invert"><a href="$IMG_URL1$" class="ulightbox"><img src="$IMG_URL1$" alt="$TITLE$"></a></div>  
  <div class="zornet_vid_message_detali">  
  <div class="zornet_vid_detali2">  
<span><i class="fa fa-pencil" aria-hidden="true"></i> Автор: <a href="$SECTION_URL$">$USERNAME$</a></span> |  
<span><i class="fa fa-check-square-o" aria-hidden="true"></i> Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span>  
  </div>
  <div class="zornet_vid_message">$MESSAGE$</div>
  <div class="zornet_vid_detali"> <i class="fa fa-eye" aria-hidden="true"></i>
<span>Просмотров: $READS$</span> | <i class="fa fa-download"></i>
<span>Загрузок: $LOADS$</span> | <i class="fa fa-comments-o" aria-hidden="true"></i> ($COMMENTS_NUM$)
  <span class="dalee"><a href="$ENTRY_URL$">Скачать</a></span>
  </div>
  </div>
</div>

CSS:

Код
.invert img {
-webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.49, 0.4);
-moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 0.51);
-o-transition: all 1s cubic-bezier(0.4, 0, 1, 1);
-ms-transition: all 1s ease-out;
transition: all 1s cubic-bezier(0.25, 0.1, 0.06, 0.82);}
.invert img:hover {
-webkit-filter: invert(100%); }

.zornet_vid {margin-bottom: 10px;height: 200px;border-bottom: solid #615c5c;background: #171616;border: 2px solid #646669;border-radius: 3px;}  
.zornet_vid_title {height: 35px;line-height: 34px;padding-left: 10px;background-color: #313030;margin-bottom: 5px;border-radius: 0px 0px 0px 0px;}
.zornet_vid_title a {color: #fff;font-size: 16px;background-color: #232020;padding: 0 10px 3px 10px;border-radius: 3px;-webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;-moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.51), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;}
.zornet_vid_title a:hover { }  
.zornet_vid_img {width: auto;height: 150px;display: inline-block;float: left;}  
.zornet_vid_img img {width: 275px;height: 150px;border-radius: 3px;object-fit: cover;border: 2px solid #74777b;margin: 1px 8px 10px 6px;}  
.zornet_vid_message_detali {float: right;width: 64%;}  
.zornet_vid_message {text-align: justify;height: 90px;overflow: hidden;line-height: 135%;margin: 5px 0;margin: 3px 7px 5px 3px;}  
.zornet_vid_detali2 {background-color: #403d3d;border-radius: 3px;padding: 0 0 0 7px;font-size: 12px;height: 25px;line-height: 25px;color: #e4e2e2;margin: 0px 7px 1px 1px;}
.zornet_vid_detali2 a { color: #fff; }
.zornet_vid_detali {background-color: #403d3d;border-radius: 3px;padding: 0 0 0 7px;font-size: 12px;height: 25px;line-height: 25px;color: #eaeaea;margin: 0px 7px 1px 1px;}
.zornet_vid_detali a { color: #fff; }
.dalee { float: right; }
.dalee a {display: block;color: #fff;background-color: #1f7290;border-radius: 3px;padding: 0 10px;}
.dalee a:hover {background-color: #35c0f2;text-decoration: none;}

@media only screen and (max-width: 640px){
  .zornet_vid_img img { width: 100%!important;}
  .zornet_vid_img { width: 100%!important; float: none!important; }
  .zornet_vid_message_detali {width: 100%!important;margin-bottom: 10px!important;}
  .zornet_vid_title {width: 220px!important;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
}

@media only screen and (max-width: 740px) {
  .zornet_vid_img img { width: 100%!important;}
  .zornet_vid_img { width: 100%!important; float: none!important; }
  .zornet_vid_message_detali {width: 100%!important;margin-bottom: 10px!important;}
  .zornet_vid_title {width: 320px!important; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
}

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

Источник: d-melochi.ru
03.10.2017 Загрузок: 1 Просмотров: 326 Комментарий: (4)

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

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

Комментарий: 4
harvus
harvus 04.10.2017 11:261
0
Стиль тайтла напомнил года эдак 2011-2012 :)
А в целом, очень неплохо.
Kosten
Kosten 04.10.2017 17:012
0
С чем то согласен, что по дизайн он не новый, но все же если его вывести под цветовую гамму на сайт, то отлично должно подойти, хотя бы не на главную страницу.
harvus
harvus 04.10.2017 22:263
0
Не спорю, так оно и есть.
Kosten
Kosten 05.10.2017 01:374
0
Его еще адаптировать под мобильные, то выставлял плюшки, и по сути слетела, хотя медео прописаны, но не сильно был корректно настроен под мобильные аппараты.
avatar