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

Заказывай стафф с атрибутикой Mozilla и... пусть все вокруг завидуют тебе! Быть уникальным - быть с Mozilla!

№129-04-2011 08:39:30

nuclear_horse
Участник
 
Группа: Members
Зарегистрирован: 29-04-2011
Сообщений: 5
UA: Firefox 4.0

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

ничего подобного не нашел, решил создать. вообщем 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)

Отсутствует

 

№229-04-2011 12:08:27

lazy_man
Участник
 
Группа: Members
Зарегистрирован: 05-03-2011
Сообщений: 106
UA: Firefox 4.0

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

Посмотри в сторону
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)

Отсутствует

 

№329-04-2011 12:15:50

oval75
Участник
 
Группа: Members
Откуда: Беларусь
Зарегистрирован: 21-08-2010
Сообщений: 15
UA: Firefox 4.0

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

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

Отсутствует

 

№429-04-2011 12:25:21

nuclear_horse
Участник
 
Группа: Members
Зарегистрирован: 29-04-2011
Сообщений: 5
UA: Firefox 4.0

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

oval75 пишет

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

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

Отсутствует

 

№529-04-2011 12:42:36

oval75
Участник
 
Группа: Members
Откуда: Беларусь
Зарегистрирован: 21-08-2010
Сообщений: 15
UA: Firefox 4.0

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

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

Отсутствует

 

№629-04-2011 13:11:59

nuclear_horse
Участник
 
Группа: Members
Зарегистрирован: 29-04-2011
Сообщений: 5
UA: Firefox 4.0

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

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)

Отсутствует

 

№729-04-2011 14:05:03

lazy_man
Участник
 
Группа: Members
Зарегистрирован: 05-03-2011
Сообщений: 106
UA: Firefox 4.0

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

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

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

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

Отсутствует

 

№829-04-2011 15:20:40

VeRtex
I ♥ Nightly
 
Группа: Members
Откуда: Красноярск
Зарегистрирован: 26-08-2010
Сообщений: 1414
UA: Nightly 6.0
Веб-сайт

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

nuclear_horse пишет

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

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

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]