» »

Вид материала с эффектом 2 колонки для uCoz

Вид материала с эффектом 2 колонки для uCoz

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

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

Так после установке будет визуально выглядеть:

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

Приступаем к установке:

Панель управление - выбор модуля - вид материала и там полностью убираем старый код и ставим этот.

Код
<div class="view view-tenth">
  <img src="$IMG_URL1$" width="300" height="270" alt="$TITLE$"><div class="uCozz2">$TITLE$</div>
  <div class="mask"><a href="$ENTRY_URL$" class="info">  
  <h2>$TITLE$</h2>  
  <p>$CATEGORY_NAME$</p>
<?if(len($MESSAGE$)>95)?><?substr($MESSAGE$,0,95)?>.....<?else?>$MESSAGE$<?endif?>  
  </a>
  </div>
</div>


CSS:

Код
.view {
  width: 32%;
  min-width: 300px;
  height: 200px;
  margin: 5px;
  float: left;
  border: 10px solid #1A2530;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}
.view .mask, .view .content {
  width: 100%;
  height: 200px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}
.view img {
  display: block;
  position: relative
}

.view h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 14px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  margin: 5px 0 0 0
}
.view p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 10px 20px 20px;
  text-align: center
}
.view a.info {
  width: 100%;
  height: 100%;
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #1A2530;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000
}
.view a.info:hover {
  box-shadow: 0 0 5px #000
}
.view-tenth img {  
  transform: scaleY(1);
  transition: all 0.7s ease-in-out;
}
.view-tenth .mask {  
  background-color: rgb(26, 37, 48);  
  transition: all 0.5s linear;
  opacity: 0;
}  
.view-tenth h2{
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  margin: 5px 40px 0px 40px;
  transform: scale(0);
  color: #fff;
  transition: all 0.5s linear;
  opacity: 0;
}
.view-tenth p {
  color: #DC143C;
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear;
}
.view-tenth a.info {  
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear;
}
.view-tenth:hover img {  
  transform: scale(10);
  opacity: 0;
}
.view-tenth:hover .mask {  
  opacity: 1;
}  
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{  
  transform: scale(1);
  opacity: 1;
}
/* иконка title
----------------------------------------------- */
.uCozz2 {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: auto;
  display: block;
  background-color: #141d26;
  text-align: center;
  line-height: 13px;
  color: #ccc;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  opacity: 0.75;
  padding:10px;  
}

Если вы решите сделать в одну колонку, то в начале стиля идет процент 32% что его больше делаем. Хотел поставить шрифтовые кнопки, но посчитал что здесь они лишние, но если вам они нравится, то выставить возможно, как это сделать, то в статье все по этому поводу описано.

Доработал сайт: ucozz.pro
17.03.2017 Просмотров: 789 Комментарий: (10)

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

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

Комментарий: 10
maniacvn
maniacvn 17.03.2017 17:431
0
Scheme
Scheme 17.03.2017 17:512
0
Весь шаблон уже точно разобрали. 11a
Kolinkor
Kolinkor 17.03.2017 17:533
0
А что не адаптировали сразу, то один идет полностью под мобильные, этот не чем не отличается и не адаптированный.
maniacvn
maniacvn 17.03.2017 18:165
0
Ну да щас без адаптивных блоков ни куда
maniacvn
maniacvn 17.03.2017 18:154
0
Цитата Scheme ()
Весь шаблон уже точно разобрали.

Если бы знать какой шаблон
Kosten
Kosten 17.03.2017 18:406
0
Видать кино шаблон, просто по цвету они похоже, хотя там совершенно другой вид, а этот вообще переделан.
maniacvn
maniacvn 17.03.2017 18:438
0
Этот вид делался просто с ефекта для фото все просто и очевидно совпадения и похожесть исключительно случайны)
Tergran
Tergran 17.03.2017 18:469
0
Его на вид материала блога или новостей можно поставить. На файлы он не подойди по своей структуре, нужны функций и кнопки, а на этих модулях и краткого описание как раз хватить для ознакомление.
Сафрон
Сафрон 17.03.2017 18:427
0
Этот эффект мне знаком, на каком то блоге видел, вот пригодился на вид материала.
Марковичь
Марковичь 17.03.2017 19:1110
0
Здесб лучше в стилях убрать крупный шрифт, по моему так название гармоничнее смотреться должно.
avatar