Transparenz erzeugen

[corraggiouno]

Hi,

habe bisher folgende Navigation mit CSS erzeugt; bei dem Link Leistungen hätte ich gerne, dass das Submenü transparent ist; also das sozusagen der Hintergrund etwas "durchschimmert"
http://jaki.dyntec.de/leistungen.html
Kann ich das mit Photoshop realisieren oder liegt das an CSS?

[corraggiouno]

....hat niemand einen Tipp für mich? :fragen:

[tuffenuff]

Hmn, ich weiß nicht genau was du meinst...
Hast du den Header denn in Photoshop erstellt und hast du Zugriff auf die einzelnen Ebenen?
Dann könntest du den Teil des Submenüs ja einfach transparent machen...

[corraggiouno]

also ich möchte einfach, dass wenn ich mit der Maus über das Menü fahre, dass so zusagen der Hintergrund etwas durchscheint bzw. leicht zu sehen ist
Ist das möglich?

[tuffenuff]

Puh, ich würde das vermutlich so probieren:


Den Header an den Menüstellen so transparent machen, wie du das später beim MouseOver Effekt haben möchtest
In der CSS-Datei angeben, dass jeder Menüpunkt einen Hintergrund hat (Bilddatei oder grauen Verlauf), sodass der transparente Hintergrund nicht auffällt
Beim MouseOver Effekt wird dann der Hintergrund des Menüpunktes per CSS einfach ausgeblendet

Einigermaßen verständlich?
Bin auch noch nicht der CSS Künstler, aber so würde ich das vermutlich probieren. :nixweiss:

[corraggiouno]

Den Header an den Menüstellen so transparent machen, wie du das später beim MouseOver Effekt haben möchtest
wie gehst du davor mit der Transparenz; wie sind deine Arbeitsschritte; kannst du das vielleicht beschreiben?

[tuffenuff]

Aaaah, sorry.
Mir fällt gerade auf, dass ich dir was ganz falsches erklärt habe.
Ich dachte, du wolltest oben im Menü die Transparenz erreichen.
Habe gerade nochmal gelesen, dass du es ja nur bei den Unterpunkten von Leistungen willst, richtig?:frieden:

Ich glaube, dafür müssten wir den CSS Code, bzw. den Teil der dafür zuständig ist sehen.
Ich wüsste zumindest so nichts auf Anhieb. :nixweiss:
Außer vielleicht auch mit kleinen Hintergrundbildern zu arbeiten, und beim MouseOver Effekt einfach das Hintergrundbild durch ein transparentes .png Bild ersetzen.
EDIT: Vorher kannst du natürlich auch ein transparentes Hintergrundbild für die Menüpunkte verwenden. (Wäre natürlich auch optisch schöner)

[corraggiouno]

ja genau, ich benötige so ein hintergrundbild (transparent); aber wenn ich dieses abspeichere bleibt es nicht transparent..........
ich habe eine neue Datei erstellt mit einem Transparenten Hintergrund; dann habe ich ein Rechteck aufgezogen und dann die Deckkraft auf ca. 60 % gesetzt; wenn ich aber das Bild abspeichere wird bleibt die Transparenz nicht ........kannst du mir sagen was ich da falsch mache?

[tuffenuff]

Als was (und wie) speicherst du denn ab?
Png?
Gif?

Andere Format können nicht mit Transparenz arbeiten. ;)

[corraggiouno]

.........als gif-datei ..........und "für web und geräte speichern"...................wie gehst du da beim Speichern vor?

[tuffenuff]

Ist die Hintergrund-Ebene noch in der Photoshop-Datei vorhanden? (Die müsste weg)
Sieht man im Photoshopbild leicht das weiß-graue Kästchenmuster, welches für Transparenz steht?
Kannst du beim Speichern irgendwo ein Haken für "Transparenz" setzen?
Ansonsten speicher einfach mal als png ab.

[corraggiouno]

mmh, komisch - wenn ich das ganze als png-datei abspeichere, dann ist es transparent; als gif-datei funktioniert dies nicht.
Kann mir jemand sagen, warum das so ist?
Speichere ganz normal ab Speichern unter...

[Jenny]

Hallo!

PNG unterstützt Teiltransparenzen.
GIF kennt nur "ganz oder gar nicht". (1-bit-Transparenz)

[tuffenuff]

Stimmt natürlich! :ok:
Daran hatte ich gestern abend gar nicht gedacht, obwohl ich doch darauf sonst auch immer hinweise...:frieden:
corraggiouno: Funktioniert denn jetzt alles?

[corraggiouno]

GIF kennt nur "ganz oder gar nicht". (1-bit-Transparenz)
...nur wenn ich eben in gif abspeichere habe ich gar keine Transparenz!!
nur im png format habe ich Transparenz ............ siehe Ergebnis........
http://jaki.dyntec.de/leistungen.html

[Jenny]

Hallo!

GIF interpretiert alles, was über 50% Deckkraft hat, als 100% deckend, alles andere andere wird als "weg" interpretiert.

PS: Dieses "Rohr" zwischen Logo und Bild würde ich komplett rausschmeissen. Das Ding hat einfach keine "Daseins-Berechtigung"! Oder kannst du's begründen?

[corraggiouno]

vielen dank für den wertvollen Tipp :ok: