Tabform

    Firefox-Version
    119.0 (64Bit)
    Betriebssystem
    Windows 10 Version 22H2 (Build 19045.3570)

    Da mir gerade danach war und ich mich etwas beschäftigen wollte,

    kam ich auf die glorreiche Idee, auch weil hier z.Z. es andauernd um die Tabs ging,

    die Form der Tabs zu verändern.

    Jedoch, habe ich absolut keine Ahnung, wie ich das so hinbekommen soll.

    Vorweg, bei mir sind die Tabs direkt über dem Fenster!

    Und in etwa so, so habe ich mir das in etwas vorgestellt, hätte ich gerne die Tabs.

    Nur, wie könnte das, wenn es denn überhaupt geht, funktionieren?

    Z.Z. nutze ich das:

    CSS
        .tab-background {
        border-radius: 8px !important;
    }

    Mit dem Selektor bekomme ich es nicht hin.

    Hat jemand eine Idee?

    Mit <3lichem Gruß

    Mira

    Ein Ansatz wäre das hier.

    Es gibt verschiedene Styles die ähnliches CSS benutzen, ist aber immer etwas kompliziert wegen der unteren, nach aussen gerichteten Rundung der Tabs.

    Auch gut ist generell der CSS Code von Godie, der hat sowas in Extras, aber das müsstest du dir raussuchen und zusammenbasteln.

    Einmal editiert, zuletzt von Horstmann (29. Oktober 2023 um 15:43)

    Zitat von Mira_Belle

    Mit dem Selektor bekomme ich es nicht hin.

    Diese Kurven werden/wurden durch einzelne Bilder erstellt.

    Code
    data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIHN0cm9rZS1vcGFjaXR5PSJjb250ZXh0LXN0cm9rZS1vcGFjaXR5IiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9wYXRoPg0KPC9zdmc+

    Horstmann & 2002Andreas

    Danke für Eure Hinweise und Tipps.

    Meine bisherige "Arbeit":

    Bin aber noch nicht so wirklich zu frieden!

    Die verwendeten Symbole sind eingefärbt!

    Wenn ich "Hovern" aktiviere, werden leider auch die Sybole des aktiven Tabs "ausgetauscht".

    Und was mir vorher nie so aufgefallen war,

    der Schließenbutten, der verändert die Größe, ...

    Da ist also noch der Wurm drin.

    Mit <3lichem Gruß

    Mira

    Ähem - dein CSS sieht bei mir in 115esr einfach nur verhunzt aus.

    Nicht mal die unteren Bögen sind noch da, was ja irgendwie der Sinn der Übung ist.

    Ausgehend vom originalen CSS Code, was willst du denn ändern und wie?

    Am besten mit Screenshots.

    Du hast "meinen" Code genutzt?

    Egal, äh, nein, muss ich wissen, damit ich die richtigen Rückschlüsse daraus ziehen kann.

    Was mich aber viel mehr stört, dass ich nicht weiß, wie ich das Hovern beim Aktiven Tab verhindern kann,

    damit sich die "Rundungen" nicht verändern.

    Also, dass die "orangen Ecken" nicht durch die "grauen Ecken" ersetzt werden.

    Aber auch wenn das Resultat dem "Original" recht nahe kommt, es gefällt mir nicht.

    Es fehlt die durchgängige Linie.

    Auch ist der Tab im Grunde mit dem Fenster verbunden.

    Zieht sich über die gesamte Breite quasi die komplette "Tableiste".

    Selbst wenn ich die nicht aktiven Tabs transparent lasse, sieht das alles andere als gut aus.

    Ich habe noch einmal an diversen Werten "geschraubt",

    sieht, wie ich finde, nun etwas besser aus.

    Aber wie bekomme ich eine 2px dicke Linie über die komplette Breite da hin?

    Mit <3lichem Gruß

    Mira

    4 Mal editiert, zuletzt von Mira_Belle (29. Oktober 2023 um 23:05)

    Besser bekomme ich es nicht hin.

    Irgendwie gefällt es mir nicht.

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    Also, dass die "orangen Ecken" nicht durch die "grauen Ecken" ersetzt werden.

    So?


    Zitat von 2002Andreas
    Zitat von Mira_Belle

    Also, dass die "orangen Ecken" nicht durch die "grauen Ecken" ersetzt werden.

    So?

    Andreas! Was denkst Du von mir? :/  ^^

    Nein, so hatte ich es mir nicht vorgestellt!

    "Hovern" soll ja schon sein, "grau", bei allen anderen Tabs, nur eben nicht beim Aktiven!

    ABER, was mich viel mehr stört, dieser Schatten der Tabs!

    Siehst Du das in Deinem Clip?

    Den bekomme ich einfach nicht weg und das sieht so, na ja, bescheiden aus. ;)

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    Besser bekomme ich es nicht hin.

    ....

    Irgendwie gefällt es mir nicht.

    Es ist wirklich schwer zu sagen wie man es machen sollte, ohne zu wissen was für eine Optik du am Ende haben möchtest.

    Aber hier ist etwas das du mal probieren könntest; den oberen Teil (ERSETZEN) müsstest du dir anpassen, der Rest ist dann halt Geschmackssache.

    Sieht nicht dolle aus im Moment, ist nur ein Test, aber man kann es unendlich anpassen, man muss halt wie gesagt wissen wie das Ergebnis aussehen soll.

    Das benötigte .svg für die unteren Ecken häng ich als Code unten an, das geht hier nicht mit dem Format.

    Tab-corner-left.svg :

    Code
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path d="M0 17 L0 16 A16 16 0 0 0 16 0 L 18 0 L 18 17 Z" fill="context-fill"/>
  <path d="M0 16 A16 16 0 0 0 16 0" fill="transparent" stroke="context-stroke" stroke-width="1"/>

</svg>

    Oder du kannst es hier runterladen (nettes Tool auch), und dann halt zu Tab-corner-left.svg umbenennen.

    2 Mal editiert, zuletzt von Horstmann (30. Oktober 2023 um 14:16)

    Wie oben bereits geschrieben, wurden die Ecken mit Grafiken erstellt, rechts, links, dazwischen, also mindestens drei. Wie genau, dazu müsstest du dir einen alten Firefox damit herunterladen und analysieren. Was du da machst, sind lediglich runde Ecken erstellen, die aber keine Überlappung wie früher erstellen. Firefox hatte auch unterschiedlich runde Tabs. Mal wie Chrome, dann wieder leicht gerundet oben und unten

    First Look Firefox 4.0 - Tabs are Looking Like Google Chrome
    Firefox 4.0 is coming next year but here is the screenshot of firefox 4.0 on windows 7 and vista. It is looking similar to google chrome browser with tabs and…
    www.clickonf5.org
    Firefox Rolls Out Biggest Design Overhaul in 3 Years
    Firefox Rolls Out Biggest Design Overhaul in 3 Years
    mashable.com

    Proton hatte alle Ecken abgerundet, das ist heute noch so. Hier ist das eckig dank ArisCSS.

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen!

    Zitat von .DeJaVu

    Wie oben bereits geschrieben, wurden die Ecken mit Grafiken erstellt, rechts, links, dazwischen, also mindestens drei.

    Danke für die Links. :)

    Als Grafik braucht man generell eigentlich nur eine; das einzige Problem sind abgerundete Umrandungen, die sind recht kompliziert zu bauen, und rendern evtl. nicht sauber wenn man es nicht komplett mit Grafiken macht.

    So sah das mal aus:

    Mit diesen Grafiken:

    Code
    background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png),
                            url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
                            url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png);

    Und so der Code dazu:

    Code
     #tabbrowser-tabs::before {
    background-image:
      url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png),
      url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
      url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
  }

    Hi,

    die Abbildungen von 2002Andreas, sowie die im zweiten Link von .DeJaVu

    sind in etwa so, wie ich es mir vorgestellt habe.

    Mit "Bildchen" bekomme ich es einfach nicht hin.

    Nun werde ich versuchen, die Vektorgrafiken entsprechend zu bearbeiten.

    Das Problem ist, dass sich immer irgendwelche "Elemente" überschneiden und das schaut dann wirklich grauenhaft aus.

    Werde also noch etwas herumbasteln, sofern mir das z.Z. möglich ist.

    Hat ja Zeit.

    Mit <3lichem Gruß

    Mira