Unterschiedlicher Verlauf Border - oben / unten

  • Firefox-Version
    103.02
    Betriebssystem
    macOs 10.13.6

    In meiner userChrome.css habe ich unten eine Border eingebaut für jeweils die nav-bar, PersonalToolbar und die ( unten sitzende ) TabsToolbar .

    Für die ersten beiden ist diese untere Border ein Verlauf von links ( transparent ) nach rechts ( hellgrau ) , s. Screenshot #1 .

    Das CSS dafür ist dieses :

    Jetzt dachte ich mir , es wäre nett mal auszuprobieren, ob eine helle Kante direkt unter diesen verlaufenden Trennlinien nicht auch nett wäre ; für einen altmodischen 3D Effekt .

    Was auch nicht so schwierig ist - im Prinzip .

    Das Beste was ich geschafft habe, ist eine helle Kante über die gesamte Breite, aber leider bekomme ich keinen Verlauf für diese zweite Kante hin .

    Das aktuelle CSS für die zusätzliche Border , nach erfolglosen Versuchen mit diversen background/border-image etc. Varianten :

    CSS
    #PersonalToolbar {
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
    }
    
    #TabsToolbar {
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
    }

    Funktioniert , aber halt leider kein Verlauf von transparent links nach weiss rechts , s. Screenshot #2 .

  • Hallo Horstmann,

    Zitat

    für einen altmodischen 3D Effekt .

    vielleicht geht es so?

    statt: border-bottom: 1px solid....

    dieses: border-bottom: 2px groove, ridge, inset oder outset...

    border-style - CSS | MDN
    Die border-style CSS Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils für alle vier Seiten des Elementrands.
    developer.mozilla.org

    Einmal editiert, zuletzt von Gabbo (25. August 2022 um 21:33)

  • Für einen Moment dachte ich schon ich hätte es - aber nicht ganz ...

    Damit bekomme ich wieder zwei durchgehende helle Kanten, diesmal nur unter Benutzung der Lesezeichenleiste :

    CSS
    #PersonalToolbar {
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9),
    0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
    }

    Das sieht dann genauso aus wie im Screenshot #2 von oben ( hängt unten nochmal an ) .

    Also denke ich mir, ich lege eine Maske über das Ganze, damit diese helle Kanten links etwas abgeschnitten werden :

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

    Das mask-image geht von links nach rechts, und schneidet die obere helle Kante auch wie gewünscht links etwas ab - dummerweise geht damit die untere helle Kante komplett verloren ( s. zweiter Screenshot ) !

    Wo ist hier mein Denkfehler, die Maske sollte doch eigentlich nur die linke Seite abdecken ?


  • Hallelujah, das war eine schwere Geburt, aber jetzt funktioniert's dann doch .

    Mit Tante Google ging's schliesslich hierhin .

    Damit deckt jetzt die Maske nicht mehr den unteren der beiden 'Schatten' ab, der ausserhalb der eigentlichen Lesezeichenleiste liegt :

    CSS
    #PersonalToolbar {
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9),
    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;
    }