» »

Информер с прозрачным гамма для uCoz


Информер с прозрачным гамма для uCoz

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

Установка:

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

Код
<div class="sideInf"> <div class="side-inf-imgBl"><div class="side-inf-imgBord"> <a href="$ENTRY_URL$" title="$TITLE$"> <img src="$IMG_URL1$" alt="$TITLE$"> </a> <span class="side-inf-imgBl-title"><a href="$ENTRY_URL$" title="$TITLE$">$TITLE$ </a></span> </div></div> </div>


Теперь стили css, сто главное и можно там редактировать.

Код
.sideInf {clear: both;margin-bottom: 10px}  
.sideInf:last-child {margin-bottom: 0;}  
.side-inf-imgBl {overflow: hidden;position: relative; height:140px; border: 1px solid #d1d1d1;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;border-radius: 5px;}  
.side-inf-imgBl img{width: 288px; height: 140px;border-radius: 5px;}  
.side-inf-imgBl:hover {border: 1px solid #2d6dd9;}  
.side-inf-imgBl-title {position: absolute;left: 1px; bottom:1px;display: block; background: rgba(0,0,0,0.6) 0%;width: 290px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;}  
.sideInf:hover > .side-inf-imgBl > .side-inf-imgBord > .side-inf-imgBl-title {background: rgba(64,122,204,0.7) 0%;}  
.side-inf-imgBl-title {font-size: 14px; font-weight: normal;}  
.side-inf-imgBl-title a { color: #fff;display: block;padding: 8px 15px; }  
.side-inf-imgBord {border: 1px solid #fff; overflow: hidden;height: 140px;}


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



На этом все, можете выставить одну или 2 картинки, на тестовом делал так.

[ Каталог файлов · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1 ]

Вот здесь менять можно, но лучше одну колонку оставил.
19.03.2016 Просмотров: 410 Комментарий: (6)

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

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

Комментарий: 5
Scheme
Scheme 19.03.2016 22:461
0
Но а что еще можно создать, думаю только по, а хотя есть лучшее материалы, все понятно.
Сафрон
Сафрон 19.03.2016 23:072
0
Темный как сделать, что то не выходит, то светло синий как то не нравится.
Kosten
Kosten 19.03.2016 23:103
0
Да выставить не проблема, но только не идет сильно, лучше чтоб при наведение менялся оттенок. Но если нужно, на форуме напишите, там разберемся.
Angerfist
Angerfist 20.03.2016 10:354
0
Можно тут
Код
.side-inf-imgBl-title {background: rgba(64,122,204,0.7) 0%;}
поменять на чёрный 0,0,0,0.7 а border для примеру вместо #2d6dd9 на #363636, а вообще Таблица html если не нравится, ну и прозрачность менять.
Сафрон
Сафрон 20.03.2016 21:115
0
Angerfist, благодарю, все теперь понятно и вывел как нужно мне.
avatar