Tableiste, nur Hintergrund ändern

Meine Frage in die Runde : lässt sich der Hintergrund der gesamten Tableiste ändern, ohne dass die anderen Elemente in der Tableiste mit betroffen werden ?

Im Screenshot unten liegt ein Verlauf über der Tableiste; mit Ausnahme des aktiven Tab haben alle Elemente diesen Hintergrund .

Um z.B. alle Tabs auszuschliessen habe ich folgendes probiert ( getestet in einer userChrome.css mit nur diesem Eintrag ) :

#TabsToolbar:not(tab.tabbrowser-tab) {
background: linear-gradient(to right, powderblue 20%, yellow 60%) !important;
}

Funktioniert aber nicht ...

Was geht wäre einzelnen Elementen jeweils ihren eigene Hintergrund zuzuweisen , wie z.B. so ( Screenshot #2 ) :

#TabsToolbar {
    background: linear-gradient(to right, powderblue 20%, yellow 60%) !important;
}

#tabs-newtab-button {
    background: red !important;
}

Weil aber meine gesamte CSS Geschichte etwas komplexer ist als dieser Test, und ich einen Masken-Verlauf über einen Schatten innerhalb der Tableiste legen will - über alles ausser den Tabs - wäre die Frage ob man generell die Tabs etc. vom Hintergrund ausschliessen kann .

Konkret geht es um so einen Fall, wo die Maske zwar wie gewollt den Schatten beschneidet , aber eben auch die ( teils transparenten) Tabs mit überlagert .

Wie gesagt ist die gesamte CSS etwas aufwendiger, deshalb das einfachere Beispiel oben .

#TabsToolbar {
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
    mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
}

Vielen Dank für Eure Antworten !

Habe schon geahnt dass ich das nur schwer erklären kann, ich fummele daran schon eine Weile rum ohne zum Ende zu kommen .

Ich denke ich habe wie schon oft Probleme damit zu verstehen, wie die verschiedenen Ebenen aufeinander liegen in Firefox , und was welche Elemente wie überlagert .

In Photoshop ist das einfacher - oben ist oben, unten ist unten, Masken kann man verketten .

Im Prinzip suche ich nach einem Weg, oben einen nach rechts verlaufenden box-shadow zu haben über die Tableiste - ohne ein border-image zu benutzen, nur mit mask-image .

Das geht auch prima - aber jedes mask-image läuft eben auch über die Tabs, nicht nur den box-shadow ...

Zum Beispiel, s. Screenshot - Verlauf transparent zu Farbe für den box-shadow ( prima ) ; Verlauf transparent zu Farbe auf linker Tab ( nicht prima ) :

#TabsToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 0, 0, 0.9) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
}

Eine solide Farbe für die Tabs würde das Problem lösen, wie anfangs erwähnt und auch von Andreas vorgeschlagen - aber meine Tabs sind semi-transparent, farblich abgestuft und sollen auch so bleiben .

Daher die Frage, ob man in irgendeiner Form die Tabs von ihrem Hintergrund bzw. Umgebung komplett entkopplen kann , oder umgekehrt .

Oder - es würde ja schon reichen wenn die Tab ganz links keine Verlauf hätte - hmmm ...

Herzlichen Dank nochmal für Eure Mühen ; ich hab's wirklich schlecht erklärt .

Bzw. hätte ich dazusagen sollen, dass ich prinzipell die Linien inklusive Verläufe schon habe , oder auf meiner früheren Thread zu dem Thema verweisen sollen .

Damit hier bekomme ich eine dunkelgraue Linie / border unten in den einzelnen Leisten , plus eine helle Linie / box-shadow für die jeweils darunterliegende Leiste ; s. Screenshots mit jeweils ( der hellen ) aktiven Tab und der ununselektierten Tab .

Alle der Linien haben über ihr mask-image ( alpha ) einen Verauf von links ( unsichtbar ) nach rechts ( sichtbar ) .

Soweit genau nach Plan .

#nav-bar {
border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
mask-image: linear-gradient(to right, transparent 1.5%, black 10%) !important;
mask-clip: no-clip !important;
z-index: 1 !important;
}


#PersonalToolbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
mask-clip: no-clip !important;
}


#TabsToolbar {
mask-image: linear-gradient(0deg, black 25px, transparent 25px) !important;
}

Das mask-image in #TabsToolbar ist nichtmal nötig, es dämpft nur den hellen Schatten von oben in den Tabs etwas ab .

Weil es visuell ein klein weniger besser aussieht, wenn ich den untersten hellen 'Schatten' direkt in die Tabs/Tableiste baue, habe ich auch das versucht, wie oben erwähnt :

#TabsToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 0, 0, 0.9) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
}

Dann läuft aber die Maske auch in die unselektierten Tabs rein, und das scheint sich nicht umgehen zu lassen , weil eben diese Tabs semi-transparent sind ( und bleiben sollen ) , wie BrokenHeart und Andreas auch erläutert haben .

Den Screenshot dazu hänge ich auch nochmal mit an, hier mit rotem statt weissem 'Schatten' nur zu Testzwecken .

Und eben diesen Verlauf in die Tabs hinein wäre ich gerne losgeworden .

Man könnte in der Tableiste ein border-image statt dem Schatten benutzen, border-image lässte eine Verlaufskante zu ohne eine Maske , aber dann gibt's u.U. Ärger mit dem Tab Inhalt ; border ist ja quasi ein 'physisches' Element , box-shadow nur ein Layer .

Das müsste ich mir aber evtl. nochmal anschauen .

So , jetzt geht's dann doch .

Zumindest in meinem speziellen Fall, wo der Kanten-Verlauf nur links sitzen muss .

Ich versuch's gar nicht erst im Detail zu erklären - mich versteht ja eh keiner , es ist auch nicht 100% perfekt , aber so lässte sich zumindest die selektierte Tab mit einem Schattenverlauf ( obere Kante ) versehen - und nur wenn sie links steht - und die unselektierten Tabs haben nur eine dezente Schattenkante ohne Verlauf - und vor allem keinen Verlauf in den unselektierten, transparenten Tabs selber .

Der einzige Nachteil ist, dass ich den Kantenverlauf in der selektierten Tab nicht mehr in Prozentwerten angeben kann , sondern in festen Pixelwerten, weil die selektierte Tab sich ja in der Breite verändert, je nach Gesamtanzahl der Tabs ( bei mir ) .

Aber weil sich der Verlauf eh nach dem Logo links richtet, ist das auch kein Drama .

Die gesamte CSS sieht dann so aus, vielleicht hat ja jemand mal Verwendung für so was :

#nav-bar {
border-bottom: 1px solid !important;
border-image: linear-gradient(to right, transparent 1.5%, rgba(0, 0, 0, 0.2) 10%) 1 !important;
}


#PersonalToolbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.7) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
mask-clip: no-clip !important;
}


.tabbrowser-tab:not([selected]) .tab-background, #tabs-newtab-button {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3) !important;
}


.tabbrowser-tab[selected] .tab-background {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.7) !important;
}


.tabbrowser-tab[selected]:where(:first-of-type) .tab-background {
mask-image: linear-gradient(to right, transparent 36px, black 236px) !important;
}


.browserContainer > findbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.7) !important;
}