Navigationsleiste transparent machen
#1 Navigationsleiste transparent machen
Hallo Leute, in einem softwarefremden Forum habe eine Navigationsleiste entdeckt, die ich toll finde.
Ist es irgendwie möglich, dass ich das auch so transparent machen kann?
Mit der Navileiste hab ich mich noch kaum beschäftigt 
#2 RE: Navigationsleiste transparent machen
#4 RE: Navigationsleiste transparent machen
Der Wert transparent wird aber die Farbe mit verschwinden lassen. Wenn ich mir das Bild genauer betrachte, geht es aber um das halbtransparent machen. Das kann man im CSS mit Hilfe der Angabe "opacity" erreichen.
Franzl... probiere mal das folgende Script aus, welches ich eben auf die schnelle in deinem Forum gecheckt habe. Einfach im CSS-Addon-Bereich einfügen und abspeichern. Ist es das, was du willst?
2
3
ul.navigation, .navigation_wrap {
opacity: 0.5;
}
LG Bommel
(Der wohl wichtigste Grund meiner Beiträge hier.)
Boardnummer: 585867 | Template: Business (unverändert) | Tarif: Basis
Betriebssystem: Windows 7 | Auflösung: 1440x900, 1024x600 (Netbook)
Browser: Mozilla FireFox (17.0.1), Internet Explorer (9.0.11), Google Chrome (23.0.1271.95 m), Safari (5.1.7), Opera (12.10.1652)
Hallo Bommel, dann scheint es aber ein Problem mit der Navigation und den Unter Navigationen zu geben. Die Navigation wird Halbtransparents angezeigt, bzw. eigentlich eher Verwaschen.
Und die Unter Navigationen gehen nicht mehr auf.
LG
Mario
Der Effekt des Verwaschens entsteht, weil der Hintergrund bei dir einfarbig ist und ein ähnlicher Farbwert verwendet wird. Das Problem mit dem Untermenü kann ich bei dir nicht nachvollziehen. Funktioniert reibungslos. Ich habe bei dir den Wert 0.8 ausprobiert. Du kannst den Wert von 0.00 (transparent) bis 1.00 (100% Deckkraft) verändern.
LG Bommel
(Der wohl wichtigste Grund meiner Beiträge hier.)
Boardnummer: 585867 | Template: Business (unverändert) | Tarif: Basis
Betriebssystem: Windows 7 | Auflösung: 1440x900, 1024x600 (Netbook)
Browser: Mozilla FireFox (17.0.1), Internet Explorer (9.0.11), Google Chrome (23.0.1271.95 m), Safari (5.1.7), Opera (12.10.1652)
#7 RE: Navigationsleiste transparent machen
Bei mir funzt das irgendwie ned 
Edit: Geht doch, aber gleiches Problem wie mario
Es verwäscht zu stark die Schrift. Die sollte aber klar bleiben
#8 RE: Navigationsleiste transparent machen
Zitat von Franzl im Beitrag #7
Es verwäscht zu stark die Schrift. Die sollte aber klar bleiben
Okay... jeder empfindet das anders. Ich kann nicht sagen, dass die Schrift in deinem Forum zu stark verwaschen wird. Vielleicht solltest du mal ein wenig die Werte ab 0.50 ausprobieren um die Deckkraft der Farben weitestgehend anzupassen. Ausser der folgenden Möglichkeit wüsste ich jetzt nicht auf Anhieb wie die Schrift separiert werden kann, da die Angabe "opacity" immer das gesamte Element beeinflusst. Also auch die Schrift, weil diese sich innnerhalb des Elements Navigation befindet.
Die angesprochene andere Möglichkeit wäre, jedes einzelne Element der Navigation separat mit RGBA-Angaben (rrr, ggg, bbb, a.aa) zu ändern. Das A in RGBA steht für Alphakanal, und regelt die Deckkraft der Farbe. Ein Beispiel wäre:
2
3
ul.navigation, .navigation_wrap {
background-color: rgba(45, 44, 45, 0.50);
}
Vorteil dieser Methode liegt klar in der detaillierten Gestaltung. Nachteil ist aus meiner Sicht aber der Aufwand, da jedes Element einzeln angepasst werden muss.
Aber vielleicht gibt es in Verbindung mit der Angabe "opacity" noch eine Lösung, die ich nicht kenne. Oder etwa noch eine ganz andere Lösung. Ich persönlich schiele da schon mit einem zwinkernden Auge zu mindestens zwei anderen Mitgliedern hier. 
LG Bommel
(Der wohl wichtigste Grund meiner Beiträge hier.)
Boardnummer: 585867 | Template: Business (unverändert) | Tarif: Basis
Betriebssystem: Windows 7 | Auflösung: 1440x900, 1024x600 (Netbook)
Browser: Mozilla FireFox (17.0.1), Internet Explorer (9.0.11), Google Chrome (23.0.1271.95 m), Safari (5.1.7), Opera (12.10.1652)
Na ja ... schwierig ... bei deinem Forum ist eine Halbtransparenz der Navigationsleiste ehr schwierig, da du für so was auch den pasenden Hintergrund benötigst. Ansonsten ist die zweite Lösung von Bommel schon der richtigere Weg. Hintergrundfarben lassen sich am besten mit rgba in der Darstellung steuern. Opacity ist zwar nett aber führt zu dem meist unerwünschten Nebeneffekt, dass das komplette Element (inklusive Schrift, Bilder usw.) mit transparent wird.
#12 RE: Navigationsleiste transparent machen
Zitat von Olaf im Beitrag #11
mit Hilfe der neuen Erweiterung RGBA auf der kleinsten Anzeigestufe (Alphawert) gesetzt.So kann man,wenn man die richtige Hintergrundfarbe mit Alphawert setzt,eine passable Transparenz erhalten.
Zitat von Christian im Beitrag #10
Hintergrundfarben lassen sich am besten mit rgba in der Darstellung steuern.
Da wir gerade bei diesem Thema sind. Ich bräuchte dazu auch etwas Nachhilfe. Wie verhält sich das mit der HSLA-Angabe? Da blicke ich noch nicht so ganz durch. Mit HSLA lässt sich auch die Deckkraft einstellen. Mein Verständnisproblem liegt in der Anwendung der ersten drei Werte:
background-color: hsla (hhh, sss%, 111%, a.aa)
Bei dieser Angabe wird die Farbe ja nicht über die Rot-, Grün-, und Blauanteile der Farbe definiert, sondern über den Farbton (Hue), die Farbsättigung (Saturation) und die Helligkeit (Lightness). Allgemein wird gesagt, dass hier die Einstellungen einfacher sein sollen. Doch ich habe so meine Problemchen damit. Ich bekomme die Transparenz nicht so hin, wie gewünscht. Welcher dieser ersten drei Werte ist für die Transparenz mitverantwortlich?
LG Bommel
(Der wohl wichtigste Grund meiner Beiträge hier.)
Boardnummer: 585867 | Template: Business (unverändert) | Tarif: Basis
Betriebssystem: Windows 7 | Auflösung: 1440x900, 1024x600 (Netbook)
Browser: Mozilla FireFox (17.0.1), Internet Explorer (9.0.11), Google Chrome (23.0.1271.95 m), Safari (5.1.7), Opera (12.10.1652)
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!