Рекламный блок материала для сайта
 | |
| Это рекламный блок, что создан как вид материала, где при наведение появляется с эффектом информация на его и ссылкой на переход. Как раз где будет описание при наведение клика, то там появиться затемнение, чтоб знаки можно было корректно прочесть. Выше будет идти название на изображение, что можно самому выставить или убрать и поставить однотонный оттенок цвета. Стили позволяют выставить тени в самом низу, что на светлом фоне красиво и главное заметно этот блок был виден и обращал на себя внимание. Все настраиваем в ручную, это прописываем описание и титле под название и ставим рекламную картинку или баннер, смотря каким по форме будет этот вид. Его попробовал поставить на вид материалов и тем проверить как работает. Что все отлично, все отображает, также переход будет при наведение изменять оттенок, но к примеру можно написать "Читать дальше" или что то другое, чтоб пользователь или гость перешел. Вообщем сделан каркас красиво и современно и полностью работает на стилях, где только ссылка на картинку и на переход будет установлена. Можно поставить на темный дизайн сайта, только вам нужно потом темные тени вывести на светлые. Возможно кто то подумает, что можно сделать полноценный вид материала на модуль, что здесь не исключаю, что придется немного доработать в этом плане. Так будет смотреться по умолчанию.  Приступаем к установке: 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 колонки. Здесь мы разобрали одну колонку, которую можно даже установить в блок сайта если он широкий, все зависит от дизайн и конструктора каркаса шаблона. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
