Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Корзина » "Интерактивная" окантовка профиля в сообщении

"Интерактивная" окантовка профиля в сообщении

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2704
  • Уважение: +4063
  • Позитив: +2368
  • Пол: Мужской
  • Последний визит:
    Вчера 10:36:31

тему эту, когда то начинал Duka здесь в теме Новые возможности форума - скрипты
потом она получила развитие ЗДЕСЬ
я  решил тоже внести свою лепту
на примере окантовки автором , которой является Paranoia Doll (немного изменённой)

В html-верх:

Код:
<style type="text/css">
.post-author ul li {
	text-align: center;
	padding: 2px;
	border: 1px solid #ffa500;
	background: #ffffc3;
	margin: 2px;
}
.post-author ul li.pa-reg {
	border-bottom: none;
	margin-bottom: 0px;
}
.post-author ul li.pa-posts, 
.post-author ul li.pa-respect {
	border-top: none;
	border-bottom: none;
	margin-top: 0px;
	margin-bottom: 0px;
}
.post-author ul li.pa-positive:hover {background: url("http://i64.photobucket.com/albums/h191/curion123/animated/floatinghearts.gif")}; {
	margin-top: 0px;
	border-top: none;
	//border-bottom: none;
}
.post-author ul li.pa-online, .post-author ul li.pa-author {
	border: #4aab42 solid 1px;
	padding: 2px;
	background: url("http://s42.radikal.ru/i097/0810/d1/f81b3c7c42ed.jpg");
	font-size: 11px;
}
</style>

теперь добавляем "интерактивности", подсвечиваем все пункты профиля при на ведении курсора
тоже  html-верх:

<style type="text/css">
.post-author ul li:hover {background: url("http://img31.imageshack.us/img31/2387/22931775.gif");
border: 3px dashed #FFA500;}
</style>

результат можно посмотреть ЗДЕСЬ

в тёмном варианте  ЗДЕСЬ наведите на профиль курсор

естественно всё можно менять и толщину окантовки и её цвет

и скрытый фон

:hover {background: url("http://img31.imageshack.us/img31/2387/22931775.gif")

можно вместо gif картинки вставить лобой цвет

:hover {background: #D3D3D3;

вот тут парочка, троечка сделаных мною gif для фона
[реклама вместо картинки]  [реклама вместо картинки]  [реклама вместо картинки]  http://i64.photobucket.com/albums/h191/curion123/animated/floatinghearts.gif
сердечки не я делал :)

можно сделать, чтоб и текст менял свой размер, цвет и шрифт при наведении курсора
можно каждому пункту профиля придать свой фон/картинку (pa-author online, pa-sex и т.д.)
в общем дерзайте

надеюсь самыми удачными и интересными вариантами художники с нами поделятся здесь ;)

Отредактировано Romych (Сб, 26 Дек 2009 13:59:28)

+3

2

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2704
  • Уважение: +4063
  • Позитив: +2368
  • Пол: Мужской
  • Последний визит:
    Вчера 10:36:31

продолжаю эту тему
принцип остаётся такой же как и в первом посте, только добавим анимации

в html-верх:

<script type="text/javascript" src="http://www.alexilin.ru/web/mootools.js"></script>

в html-низ:

Код:
<script type="text/javascript">
window.addEvent('domready', function(){
  $$('.post-author ul li ').each(function(el) {    
    var fx = new Fx.Morph(el,{duration:700,transition:Fx.Transitions.Back.easeInOut,link:'cancel'});  
    el.addEvents({  
      'mouseenter': function() {fx.start({'padding-top':20});},
      'mouseleave': function() {fx.start({'padding-top':0});}
    });  
  });   
});
</script>

варианты анимации можно менять, если интересно будет, распишу подробно

как это ВЫГЛЯДИТ
просто направте курсор на профиль и всё понятно будет

+2

Страница: 1

Вы здесь » Единый форум поддержки » Корзина » "Интерактивная" окантовка профиля в сообщении