Transparente PNG's

[webdesigner_88]

Hallo Leute!

Wollte bei dieser Website hier eigentlich ein Design machen, in welchem im Hintergrund ein Transparentes PNG ist. Hier...

So wie hier sollte es eigentlich aussehen:


Doch leider wird mir anstatt dem Schlagschatten nur ein einfärbiger Balken angezeigt.


Könnt ihr mir bitte sagen was ich machen muss, damit die Transparenz auch funktioniert?

Liegt es am Browser? An den Einstellungen im PSD? An der Website selbst?

Beste Grüße, Alex!

 

[stb_87]

AW: Transparente PNG's

Ich kann da höchstens einen Unterschied am Rand erkennen, da wird kein Schatten angezeigt. Ansonsten kann ich da keinen Fehler erkennen.

I. d. R. kann nur der IE6 und älter die Tranzparenz nicht korrekt anzeigen.

 

[webdesigner_88]

AW: Transparente PNG's

Ja eben der Rand ist leider das Problem. Wie gesagt, eigentlich sollte dort ein Schatten sein, der leicht Transpartent ist, so dass man den Verlauf vom Hintergrund noch sehen kann.
Doch leider ist bloß dieser durchgehende Strich da.

 

[stb_87]

AW: Transparente PNG's

Dann machst du das halt nicht mit einer png-Grafik sondern stellst das in Photoshop frei und fügst diesen Schatten als jpg links und rechts ein. Ist viel einfacher und wird garantiert in jedem Browser korrekt angezeigt.

 

[webdesigner_88]

AW: Transparente PNG's

Verstehe leider nicht ganz was du meinst mit "freistellen".

Ist das denn so nicht möglich... ?

zuerst so...


und dann so...

 

[stb_87]

AW: Transparente PNG's

Ob nun slicen oder mit dem Freistellungwerkzeugsd_freistellen: - gibt sich beides nichts...

 

[Str4ng3r]

AW: Transparente PNG's

sorry stb wenn ich dir ins wort falle, aber wie ich es verstanden habe macht er es ja genau so, er hat diesen schatten erstellt und sliced es dann soweit wie der schatten geht, also läuft die grafik mit ner leichten tranzparenz aus. Dies wird aber im Browser nicht angezeigt. Wieso? Ich versteh es auch nicht!

 

[Igel2]

AW: Transparente PNG's

Gleich mal vorneweg ich bin nicht der HTML ***** bastele auch nur so rum. Also wenn ich jetzt was Falsches sage dann bitte nicht gleich hauen.

1.Hast Du es schon mal damit versucht, daß Du aus Deinem warp, top & outer-container die Rosa Farbe (#FAD6C8) raus nimmst und alles auf Transparenz setzt. Dann sollten zumindest die Rosa Balken verschwinden und der Verlauf vom body durch kommen.

2. fällt mir bei Deinem content.png auf, daß es dort links und rechtr nur 2 Transparente Bereiche und keinen Schatten gibt.
Das könnte aber auch an meinem LäppiBildschirm liegen da auch Auf dem Pic das Du gepostet hast der Schatten auch nur SEHR dezent in Erscheinung tritt.
Es könnte aber auch schon beim slicen od. beim Speichern was schiefgelaufen sein. Welches PNG Format hast Du benutzt PNG8 od. PNG24?

BTW nette Seite - gefällt mir
LG
Igel

 

[webdesigner_88]

AW: Transparente PNG's

Hallo Leute!

Danke für Eure Hilfe!
@ Str4ng3r: Stimmt. Genauso hab ich's gemacht. Woran das Problem nun aber liegt? Keine Ahnung. Aber naja... Bin zuversichtlich das wir früher oder später noch auf die Lösung stossen!

@ Igel2: ad 1.: Die Farben hab ich nun mal bei content und bottom rausgenommen. Somit siehst du den Unterschied zwischen top (dort ist die Farbe noch drinnen) und den anderen div's. Also dies ist schon mal ein Teil der Lösung. Vielen Dank!

ad 2.: Also der Schatten ist wirklich nur leicht dezent. Wenn du die Grafik für den content rein alleine ansiehst, dann wird dir da wirklich kaum was auffallen. Jedoch im gesamten Design integriert tritt er doch zum vorschein.
PNG Format hab ich PNG24 verwendet. Hoffe mal, das ist das richtige!?

BTW... Danke für's Lob!

Beste Grüße, Alex!

 

[Igel2]

AW: Transparente PNG's

Gern geschehen
@PNG Format JA!
@Schatten - habe auch schon festgestellt, daß Schatten im Browser stark abgeschwächt dargestellt werden - vll mal testweise den Schatten stärker machen

LG

 

[webdesigner_88]

AW: Transparente PNG's

Hi Igel2!

Naja, es wird schon! Hab eben jetzt so wie du mir geraten hast den Schatten stärker gemacht!
Jedoch ganz auf'n Punkt getroffen habn wirs noch nicht!
Sieht zwar schon besser aus als vorhin, aber hier nochmal zum Vergleich wie's aussehen sollte...

Sonst vielleicht noch irgendwelche Lösungsvorschläge?

 

[stb_87]

AW: Transparente PNG's

sorry stb wenn ich dir ins wort falle, aber wie ich es verstanden habe macht er es ja genau so, er hat diesen schatten erstellt und sliced es dann soweit wie der schatten geht, also läuft die grafik mit ner leichten tranzparenz aus. Dies wird aber im Browser nicht angezeigt. Wieso? Ich versteh es auch nicht!

Habe ich jemals was anderes behauptet?
Wie auch bereits erwähnte hängt das vom Browser ab, ob die Transparenz korrekt angezeigt wird oder nicht.


Hast du denn mal versucht das als jpg-Datei zu speichern?! Da sollte der Schatten eigentlich unverändert dar gestellt werden. Ich habe es hier eben noch mal schnell getestet und es hat funktioniert.

 

[Igel2]

AW: Transparente PNG's

@stb soweit ich das noch richtig auf dem "Sender habe" speichert Jpg keine Transparenzen. Der Schatten sollte ja nach außen "auslaufen" und durch den dahinterliegenden Verlauf ist M.E. nur mit Transparenz zufriedenstellend hin zu bekommen. Lasse mich aber gerne eines besseren belehren.

@webdesigner_88
war 2 tage nicht im Nezt deshalb erst heute.
im unteren Teil (vor dem helleren Verlauf) wirkt der Schatten sehr hart abgegrenzt.
Weiß leider auch keine 100% sichere Lösung. Habe aber "auf die schnelle" noch 2 Ideen dazu.
Idee 1:
Hast Du schon mal versucht, den Schatten mit einem Verlauf zu erstellen also unten heller als oben. Er muß hat vor dem Dunkleren Verlauf stärker betont werden als vor dem hellen.
Idee 2. den Schatten stärker weichzeichen, so daß keine so harte Abgrenzung entsteht.

Oder, wenn gar nichts fruchtet dann den Schatten halt statt mit dem Rosa Farbton doch mit dem üblichen Schwarz bzw Grau machen und entsprechend abschwächen


Vll fällt mir ja in den nächsten Tagen noch was ein. Bin gerade unterwegs und kann deshalb nichts ausprobieren.

LG
Igel