» »

Рекламный блок материала для сайта

Рекламный блок материала для сайта

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

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

Так будет смотреться по умолчанию.

Вид материалов под рекламу на CSS

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

HTML код размешаем там где вы считаете нужным, можно сделать на отдельной странице.

Код
<div class="IPSG_Glob">
  <img src="http://zornet.ru/Aben/ABGEA/e2JTD9t.png">
  <div class="caption">
  <span class="title">Скрипты и габлоны на zornet.ru</span>
  <span class="info">Здесь пишем краткое описание на 120 знаков <a href="http://zornet.ru/">Перейти на сайт ZORNET.RU</a></span>
  </div>
</div>

CSS:

Код
.IPSG_Glob {
  width: 425px;
  max-width: 425px;  
  margin: 0px;
  opacity: .99;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.IPSG_Glob:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 425px;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.IPSG_Glob img {
  display: block;
  width: 425px;  
  height: 250px;  
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.IPSG_Glob .caption {
  width: 425px;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  text-align: center;
}
.IPSG_Glob .caption span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.IPSG_Glob .caption .title {
  line-height: 1;
  font-weight: normal;
  font-size: 18px;
  color: #fff;
}
.IPSG_Glob .caption .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 12px;
}
.IPSG_Glob:focus:before,
.IPSG_Glob:focus span, .IPSG_Glob:hover:before,
.IPSG_Glob:hover span {
  opacity: 1;
}
.IPSG_Glob:focus:before, .IPSG_Glob:hover:before {
  top: 50%;
}
.IPSG_Glob:focus span, .IPSG_Glob:hover span {
  top: 0;
}
.IPSG_Glob:focus .title, .IPSG_Glob:hover .title {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.IPSG_Glob:focus .info, .IPSG_Glob:hover .info {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

Как понимаете основная настройка будет происходить в CSS, это размер каркаса и вывод размера снимка.

Спасибо пользователю VIP36RUS за предоставленный материал, также в комментариях буде ссылка на его пост на этот материал, где будет предоставлена демонстрация, что можно поставить в 2 колонки. Здесь мы разобрали одну колонку, которую можно даже установить в блок сайта если он широкий, все зависит от дизайн и конструктора каркаса шаблона.
17.08.2017 Просмотров: 341 Комментарий: (7)

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

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

Комментарий: 7
Kosten
Kosten 17.08.2017 17:211
0
Так вы можете посмотреть от автора материала VIP36RUS, который материал разместил на форуме где представлена демонстрация.
Kosten
Kosten 17.08.2017 18:032
0
Учитывая, что здесь все четыре угла закруглены, то вы можете нижнее оставить закругленными, поменять стиль и поставить в замен этот.

Код
.IPSG_Glob {
  width: 425px;
  max-width: 425px;
  margin: 0px;
  opacity: .99;
  overflow: hidden;
  position: relative;
  border-radius: 0px 0px 5px 5px;
  cursor: pointer;
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
Critic©
Critic© 17.08.2017 18:183
0
С начало подумал что это есть вид материала, просто очень похоже, просто не понимаю это, рекламу можно же поставить и без этого блока. А вот его поставить на каталог файлов это уже будет совершенно по другому. И красиво смотрится, но операторы в код поставить не проблема, вот как сделать на 2 или 3 колонки, здесь же в стилях нужно что то делать.
Kosten
Kosten 17.08.2017 18:384
0
Думаю эти вопросы на форуме нужно задать, так как не зря ссылку дал на ее. Но если говорить о вид материала, то как раз этот код проверял на нем в модуле каталог файлов. Что нормально и корректно в одну колонку было и поставить операторы можно, но лучше если ставить его под файлы или блог, то раскидать на 2 колонки, а вот как может кто подскажет, надо в стилях дописывать проценты как понимаю.
Critic©
Critic© 17.08.2017 23:495
0
Так про это и говорил, что зачем дублировать, что не понять где задать вопрос, если делать под вид материала то на форуме намного удобнее.
Kosten
Kosten 18.08.2017 00:196
0
Но так изначально сайт вел, так как для пользователя проще на форуме разместить, чем на каталоге файлов, и по названию разные. Если вести обсуждение, то не вижу разницы, но на форуме коды доступнее размещать.
Kosten
Kosten 18.08.2017 00:207
0
Здесь могу сделать на одну колонку, но есть уже много под одну на сайте материала, если делать, то на 2 или 3, а это надо как говорил в стилях их выводить.
avatar