Beiträge von Horstmann

  • Tabform

    Zitat von Mira_Belle

    OK, die Grafik ist hier mein Problem.

    Hmm, die Sucht war wieder stärker... X/

    Die Rundungen passen noch nicht ganz, und die Kanten bzw. Trennlinien links/rechts sind wirklich eine Pest, aber kannst ja mal probieren.

  • Tabform

    Zitat von Mira_Belle

    Ich schrieb ja schon, dass ich das irgendwie, also die Rundungen, mit Grafiken machen möchte.

    Die Frage, mach ich das dann mit "Bildchen" (*.png) oder besser doch mit Vektorgrafiken.

    ......

    Was ich mich nun frage, ist es möglich auch innerhalb des SVG-Codes Farbverläufe zu definieren?

    Wobei min. eine Farbe von außen per CSS festgelegt werden sollte.

    Also doch wieder rund untenrum? ;)

    Bzgl. Farbveräufen in .svgs, weiss ich nicht, mit .pngs oder jpgs kannst du's natürlich machen, aber dann kannst du mit CSS nicht den Farbinhalt einzelner Bestandteile steuern.

    Ich wollte nochmal auf Godie verweisen; hier gibt's eine CSS für Tab Shapes und Hinweise für about:config Änderungen, und hier eine Menge .svg Icons für alle möglichen Rundungen.

    Geht erstmal ganz ok mit deinem Theme, du müsstest aber noch rausfinden wie Umrandungen und Hintergründe für hover/unselektierte und multiselektierte Tabs klappen, evtl. braucht's dafür noch mehr von seinem Style als nur die Tab Shapes CSS Datei - ich hab nur die kurz getestet.

    Das Ding ist, die runden Ecken sind ja nur der Anfang, dann muss das Ganze auch noch zusammenarbeiten, und sich sauber ineinander fügen und überlappen.

  • Tabform

    Zitat von Mira_Belle

    Horstmann & 2002Andreas

    Ihr seid doof.

    Macht Euch nur lustig über mich, aber das macht mir gar nichts aus. :P

    Andreas hat angefangen! ;)

    Was die Tabs angeht, ich würde dabei gerne helfen wenn ich kann, aber du müsstest dich halt für einen Look entscheiden.

    Wie erwähnt, die nach aussen gehenden Rundungen unten sind die grösste Herrausvorderung, aber machbar; danach kommt Rundungen mit zusätzlicher Tab Hintergrund Transparenz, das ist ziemlich fies.

    Wenn die unteren Rundungen wegfallen, dann sollte es eigentlich nicht so schwer sein den Rest nach Belieben anzupassen - du musst nur klar sagen was du möchtest, es gibt so viele mögliche Varianten.

    Am besten wäre ein Mockup oder ein Screenshot mit Kommentaren.

  • Tabform

    Also jetzt plötzlich keine Rundungen mehr unten? :/

    Was soll's denn nun werden?

  • Tabform

    Unter anderem deswegen hab ich ja auch meinen eigenen Code gebastelt, s. oben. ;)

    Übrigens mit ziemlich aufwendigen Trennlinien, für die ich auch noch Varianten in petto hätte, die man aber halt anpassen muss je nach gewünschter Optik, zusammen mit dem Rest vom Code.


    Die Trennlinien sind die grösste Schwierigkeit, gefolgt von transparenten Tab Hintergründen, ohne ist relativ einfach.


    .

  • Tabform

    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.

  • Tabform

    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.

  • Tabform

    Ä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.

  • Tabform

    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.

  • Keine Hervorhebung der Tabs, wieso?

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Nur aus Neugier: ist es anzuraten .tabbrowser-tab:not([visuallyselected]) statt nur .tabbrowser-tab:not([selected]) zu benutzen? :/

    Dass es beide Attribute gibt, hängt mit der Multiprozessarchitektur zusammen. Damit beim Tabwechsel nicht der alte Inhalt für den Bruchteil einer Sekunde angezeigt wird, nachdem die Tableiste aktualisiert wurde, wird zunächst der Tab ausgewählt, ohne den visuellen Status zu aktualisieren (selected), damit andere Teile des Systems quasi Bescheid wissen, dass der Tab ausgewählt ist, und sobald es intern die Bestätigung gibt, dass der Inhalt „gezeichnet“ wurde, wird der Tab auch visuell selektiert (visuallyselected).

    Wenn es darum geht, was man verwenden sollte (falls man überhaupt einen Unterschied wahrnimmt), würde ich mich generell immer an dem orientieren, was Firefox selbst verwendet.

    Dankeschön! :) :thumbup: