Я не фанат IE 9
но кнопки табов очень нравятся и хочу что бы в Firefox были такие же

1. нужно придать им эффект прозрачности
2. что бы они были 2х цветные с плавным переходом цвета
3.контур окна темно-серый линией в 1 пиксель обвести сверху таким же контуром в 1 пиксель цвета открытой вкладки
4 кнопку вкладки из нутри по краю тоже обвести контуром в 3 сторонах сверху-низ не трогать
(с боков конур помимо прочего еще и темнеет к низу)
5.убрать округлости сверху кнопок если возможно
6. поменять алгоритм работы закрытия кнопки-вкладки от действия мыши

Все о чем я говорю видно-если увеличить немного мои скриншоты

Если посоветуете хоть по одному пункту как сделать- буду благодарен

скрин неактивных интерфейсов

скрин активных

http://i050.radikal.ru/1103/8d/9266312dd631.jpg

активных увеличеных

http://i016.radikal.ru/1103/b3/a8bb2dcf3c9e.jpg

неактивные на черном

http://s004.radikal.ru/i207/1103/9e/8da6a997d3fd.jpg

увеличеные на черном

http://s56.radikal.ru/i153/1103/2c/638cdf824e67.jpg

если кому нужен код как убрать межу вкладками расстояние на 1 пиксел-дам(там их 2 пиксела)

Практически на все вопросы есть ответы тут: http://forum.mozilla-russia.org/viewtopic.php?id=37396

shumomer - шутник

Хмм... И в чем-же юмор?
Даже если там нет прямого рецепта - там есть подсказки. Ну например переход цветов + прозрачность неактивных:

.tabbrowser-tab{
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgb(250, 251, 253), rgb(168, 169, 171)) !important;
}
.tabbrowser-tab:not([selected]){
  opacity:.5;
}

да ,действительно  !

1й код придает двух цветность также - только и активной тоже(этого не надо) - нужно только неактивным

2й - придает прозрачность - но всей кнопке и тексту и иконке(а этого тоже не надо) - нужно только кнопке

так что пока остается лучшим такой вид

shumomer
я немного исправил код

.tabbrowser-tab:not([selected]){
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgb(250, 251, 253), rgb(168, 169, 171)) !important;
}


.tabbrowser-tab:not([selected]){
  opacity:.5;
}

может его можно совместить раз он сейчс только для неактивных вкладок
но вид стал похожий

как только написать что бы он не трогал шрифт,иконку и границу кнопки,
как у активной?

раз так пока сыро смотрится исправил пока opacity:.5; на opacity:.8;

вот  пока как это смотрится
http://s004.radikal.ru/i206/1103/37/b456bbc8e55c.jpg

.tabbrowser-tab:not([selected]){
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgba(250, 251, 253, 0.5), rgba(168, 169, 171, 0.5)) !important;
}

Второй класс вообще убрать

я поставил этот

.tabbrowser-tab:not([selected]){
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) !important;
}

намного лучше работает - предыдущий убрал полностью
изменил только одну цифру-

но уже двухцветность т о что нужно, и шрифт и иконки и рамка кнопки остались преждими

как дополнить код и вписть в него ,что бы это правило действовало еще и на кнопку открытия новых вкладок( с плюсиком + )?

может кто знает как она называется ?

.tabs-newtab-button,
.tabbrowser-tab:not([selected]){
-moz-appearance: none !important;
background-image: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) !important;
}

bunda1

спасибо!
для себя выбрал такие значения
.tabs-newtab-button,
.tabbrowser-tab:not([selected]){
-moz-appearance: none !important;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(132, 147, 165, 0.8)) !important;
}

кнопочка тоже стала как вкладки -красивее!

вот только я заметил у неактивных вкладок и этой кнопки пропала функция отзываться на стрелочку мыши- т.е. они перестали немного светлеть .

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

Дописывать надо.

А если так?

#TabsToolbar > .toolbarbutton-1 {
  -moz-transition: .2s background-color !important;
  -moz-appearance: none !important;
  margin: 1px 0 0 1px !important;
  background: -moz-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.5)) !important;
  background-color: transparent !important;
  background-clip: padding-box !important;
  padding: 0 3px 0 3px !important;
  -moz-border-image: none !important;
  border: 2px solid !important;
  border-bottom: 0 !important;
  -moz-border-left-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  -moz-border-top-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  -moz-border-right-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  border-radius: 2.5px 2.5px 0 0 !important;
}

.tabbrowser-tab {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -moz-border-image: none !important;
}



.tabbrowser-tab[pinned="true"]{
  padding-left: 1px !important;
}

.tabbrowser-tab[pinned="true"] .tab-stack {
  margin-top: 1px !important;
  box-shadow: none !important;
}

.tabbrowser-tab:not([selected="true"]) .tab-text {
  text-shadow: 0 1px rgba(255,255,255,.5) !important;
}

.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) .tab-stack {
  background: -moz-radial-gradient(50%, rgba(255,255,255,.5), rgba(255,255,255,0)),
 -moz-linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0)) 0 0 border-box  !important;
  background-color: #FF8426 !important;
}

.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover .tab-stack {
  background-color: #4CA7FF !important;
}

#TabsToolbar > .toolbarbutton-1:hover {
  background: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) padding-box !important;
  background-color: rgba(255,255,255,.1) !important;
  background-clip: padding-box !important;
}

#tabbrowser-tabs {
  min-height: 23px !important;
}

.tabbrowser-tab .tab-stack,
.tabs-newtab-button {
  -moz-transition: .2s background-color !important;
  height: 22px !important;
  max-height: 22px !important;
  background: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) !important;
  background-clip: padding-box !important;
  background-color: transparent !important;
  padding: 0 2px 0 2px !important;
  -moz-border-image: none !important;
  border-radius: 2.5px 2.5px 0 0 !important;
  border: 2px solid !important;
  border-bottom: 0 !important;
  -moz-border-left-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  -moz-border-top-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  -moz-border-right-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
}

.tabbrowser-tab:not([pinned="true"]),
.tabs-newtab-button {
  margin-left: 1px !important;
  margin-top: 1px !important;
}

.tabs-newtab-button {
  width: 28px !important;
}
.tabbrowser-tab[selected="true"] .tab-stack {
  -moz-transition: none !important;
  height: 23px !important;
  max-height: 23px !important;
  box-shadow: 0 0 1px 0 rgba(0,0,0,.20) !important;
  background-image: none !important;
  background-color: #FAFCFD !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0,0,0,.30) !important;
  border-bottom: 0 !important;
  margin-bottom: -1px !important;
  padding: 0 3px 0 3px !important;
}

.tabbrowser-tab:not([selected="true"]):hover .tab-stack,
.tabs-newtab-button:hover {
  background: -moz-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.70)) !important;
  background-color: rgba(255,255,255,.1) !important;
  background-clip: padding-box !important;
}

если оставить старый код и добавить этот новый огромный-
неактивные табы при наведении мышкой меняют цвет 
на свой изначальный

если только оставить огромный новый код
неактивные табы при наведении мышкой становятся прозрачными

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

Есть вот такой код. Может из него что-то извлечь можно настроив цветовую гамму

.tabbrowser-tab[selected="true"]{
  background-color: #0011F1 !important;
  color: #1601D8!important;
}
.tabbrowser-tab[selected="true"]:hover{
  background-color: #0011F1 !important;
  color: #1601D8 !important;
}
.tabbrowser-tab:not([selected]){
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover {
  -moz-appearance: none !important;
  background: transparent !important;
}

.tabs-newtab-button,
.tabbrowser-tab:not([selected]){
-moz-appearance: none !important;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(132, 147, 165, 0.8)) !important;
}

Вот попробовал стиль написать, приближенный к ie 9.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-tab
{
margin-right:-1px !important;
}
.tabbrowser-tab, .tabs-newtab-button
{
background:#fff !important;
-moz-border-radius: 0px !important;
-moz-border-image:none !important;
border:1px inset rgba(0,0,0,.3)!important;
border-bottom:none !important;
}
.tabs-newtab-button, .tabbrowser-tab:not([selected="true"])
{
background: -moz-linear-gradient(
    center bottom,
    rgba(100,100,100,.45) 0%,
    rgba(255,255,255,.95) 100%
) !important;
}
.tabs-newtab-button:hover, .tabbrowser-tab:not([selected="true"]):hover 
{
background: -moz-linear-gradient(
    center bottom,
    rgba(200,200,200,.8) 0%,
    rgba(255,255,255,.9) 100%
) !important;
}

.tabs-newtab-button,
.tabbrowser-tab:not([selected]){

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(132, 147, 165, 0.8)) !important;
}

.tabbrowser-tab:not([selected]):hover,
.tabs-newtab-button:hover {
  background: -moz-linear-gradient(top, rgba(132, 147, 165, 0.8), rgba(255, 255, 255, 0.8)) !important;
  background-clip: padding-box !important;
}

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

Гангстер
спасибо код хороший но немного неправильный

зато обработав все данные и потратив сутки на всю эту информацию - подобрал код!!!!!!!
Цвета остались Гангстера(кроме этого    rgba(200,200,200,.8) 0%,
    rgba(255,255,255,.95) 100%0 - другие еще не подбирал
но кнопки уже правильно работают - цвета меняются и табы еще регулируются по высоте
-----------------------------------------------------------
}
.tabbrowser-tab
{
margin-right:-1px !important;
}
.tabbrowser-tab, .tabs-newtab-button
{
background:#fff !important;
-moz-border-radius: 0px !important;
-moz-border-image: none !important;
border: 1px solid rgba(0,0,0,.50) !important;
}
.tabs-newtab-button, .tabbrowser-tab:not([selected="true"])
{
background: -moz-linear-gradient(
    center bottom,
    rgba(100,100,100,.45) 0%,
    rgba(255,255,255,.95) 100%
) !important;
}
.tabs-newtab-button:hover, .tabbrowser-tab:not([selected="true"]):hover
{
background: -moz-linear-gradient(
    center bottom,
    rgba(200,200,200,.8) 0%,
    rgba(255,255,255,.95) 100%
) !important;
}
.tabbrowser-tab .tab-stack,
.tabs-newtab-button {

  height: 25px !important;
  max-height: 25px !important;
}
.tabbrowser-tab .tab-stack,.tabs-newtab-button
{
{border: 1px solid rgba(0,0,0,.50) !important;
}

------------------------------------------------------
вот он красавчег
http://s54.radikal.ru/i144/1103/f8/b99f0d91b345.jpg

самое интересное внизу две повторяющиеся скобки  .tabbrowser-tab .tab-stack,.tabs-newtab-button
{
{border: 1px solid rgba(0,0,0,.50) !important;
}

но если одну-вроде лишнюю убрать этот параметр работать правильно не будет! и как это объяснить- не знаю...

следущий этап- светящиеся красные крестики на кнопках может чуть больше но обязательно что бы правильно работали - не так как по умолчанию, а так как надо!

IE 9 themes and skins - userstyles.org
http://userstyles.org/styles/browse/app … ction=desc

удали все

.tabbrowser-tab .tab-stack,.tabs-newtab-button 
{{border: 1px solid rgba(0,0,0,.50) !important;
}

IE 9 themes and skins - userstyles.org
http://userstyles.org/styles/browse/app … ction=desc

если эту строчку (не правильную) убрать- кнопки будут выглядеть хуже.
Т.е. она очень нужна с одним нюансом- дополнительные коды что бы они работали нужно добавлять до нее.
А туда где расширения для  Stylish я сходил- посмотрел- они все старые...
одно только более менее для винды 7, но тоже на любителя- из него я взял 3фичи- скрытие значка оранжевого , уменьшения места между вкладками и строкой адреса и между строкой адреса и верхней полоской.Взял еще чтобы исчезли  контуры кнопок.

на мой взгляд у меня лучше ... Хотя цветность владок активных неактивных еще не подбирал
пок что имею вот такой вид