hover on menu button [решено]

nuclear_horse · №1

ничего подобного не нашел, решил создать. вообщем firefox 4 из репозитория Arch linux. по умолчанию кнопка меню выглядит не как кнопка даже, а как пункт меню, убого и некрасиво. начал твикать userchrome.css получилось вот что:

Выделить код

Код:

#appmenu-toolbar-button{
  background-color: transparent;
  -moz-appearance: none !important;
  border: 1px solid #8e4117 !important;
  -moz-border-radius-topleft: 5px !important;
  -moz-border-radius-topright: 5px !important;
  -moz-border-radius-bottomleft: 0px !important;
  -moz-border-radius-bottomright: 0px !important;
  margin-left: 2px !important;
  margin-right: 1px !important;
  margin-top: 1px !important;
  margin-bottom: 0px !important;;
  background-image: -moz-linear-gradient(center bottom,rgb(222,126,52) 35%, rgb(248,198,118) 84%) !important;
}

#appmenu-toolbar-button {
  list-style-image: url("chrome://branding/content/icon16.png");
}

#appmenu-toolbar-button > .toolbarbutton-text {
  display: none !important;
}

#appmenu-toolbar-button > .toolbarbutton-menu-dropmarker {
  display: !important;
}

#appmenu-toolbar-button:hover {
  -moz-appearance: none !important;
  box-shadow: 0 0 6px 1px rgba(222,126,52, .9), inset 0 0 0px 25px rgba(255,255,255,.1);
}

выглядит вполне прилично, но не так как хочется. hover меню-баттона анимируется наружу, т.е. кнопка светится как лампочка при наведении, а хочется чтобы было как в WinXP - там кнопка подсвечивается внутрь, синтаксис ну просто нечеловеческий(
p. s. не пинайте сильно

Отредактировано nuclear_horse (29-04-2011 13:12:39)

lazy_man · №2

Посмотри в сторону
http://habrahabr.ru/blogs/css/103170/
Может натолкнет на мысли...
Скорее всего нужно искать CSS свойство которое делает тени внутри элемента.

http://www.css3.info/preview/box-shadow/
Там в примерах есть картинка которая показывает примерно что ты хочешь...
Попробуй такой вариант box-shadow: inset 0 0 5px 5px #888; если подойдет то экспериментируй с этими значениями, до получения результата

Отредактировано lazy_man (29-04-2011 12:13:18)

oval75 · №3

Спасибо за кнопку,действительно так даже очень нечего!
Только вот отображается она у меня не так как в винде слева,а в верхнем углу справа!
У всех так или это только у меня?
Перетаскивать не даётся,ос:openSUSE.
p.s:перебросил профиль фокса под винду там отобразилась слева!

nuclear_horse · №4

oval75 пишет

Спасибо за кнопку,действительно так даже очень нечего!Только вот отображается она у меня не так как в винде слева,а в верхнем углу справа!У всех так или это только у меня?Перетаскивать не даётся,ос:openSUSE.p.s:перебросил профиль фокса под винду там отобразилась слева!

была такая же проблема, причем на новом профиле кнопка была слева. решил так: копировал файлы старого профиля по частям в новый профиль и искал то, что влияет. оказалось файл localstore.rdf и еще какой-то схожий с ним по названию. удалиние онных и дало счастье.

oval75 · №5

nuclear_horse
Очередное спасибо !
Действительно помогло,удалил файлы localstore.rdf и localstore-safe.rdf,настройки панелей сбросились по умолчанию,ещё минуту и панель настроил как было раньше,только кнопка теперь уже слева .

nuclear_horse · №6

lazy_man пишет

Посмотри в сторону http://habrahabr.ru/blogs/css/103170/Может натолкнет на мысли...Скорее всего нужно искать CSS свойство которое делает тени внутри элемента.http://www.css3.info/preview/box-shadow/Там в примерах есть картинка которая показывает примерно что ты хочешь...Попробуй такой вариант box-shadow: inset 0 0 5px 5px #888; если подойдет то экспериментируй с этими значениями, до получения результата
Отредактировано lazy_man (Сегодня 12:13:18)

спасибо большое. градиент не такой конечно получился (в винде подсветка только снизу, а тут по всей кнопке), но желаемый эффект достигнут:

Выделить код

Код:

box-shadow: inset 0px 0px 5px 5px rgba(248,198,118, .5);

(я взял тот же цвет кнопки, но поменял его прозрачность\интенсивность (не знаю, что это - пятёрка в конце цвета (подобрана эксперементально)))
расстраивают только уши, которые отрастают при наведении (округление верхних границ уменьшается, кнопка становится более угловатой и визуально увеличивается)

Отредактировано nuclear_horse (29-04-2011 13:14:33)

lazy_man · №7

РАд что помогло, поэкспериментируй со значениями inset... Можно сделать чтобы только снизу отсвечивалось.

http://htmlbook.ru/css/box-shadow

Или кратко
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

VeRtex · №8

nuclear_horse пишет

не знаю, что это - пятёрка в конце цвета (подобрана эксперементально)

Интенсивность альфа-канала. Прозрачность. Регулируется от 0 да 1.

Полезная информация

№129-04-2011 08:39:30