Layer am unteren Rand ausfaden lassen...

Diskutiere mit über: Layer am unteren Rand ausfaden lassen... im Web Page Design Forum

  1. TheHazel3yes

    TheHazel3yes Thread Starter MacUser Mitglied

    Beiträge:
    367
    Zustimmungen:
    4
    Registriert seit:
    25.11.2005
    Hallo!

    Ich hab schon ein paar Mal gesehen, dass man ein CSS-Layer (nehme zumindest an, dass es per CSS geschieht) unten ausblenden kann.

    Also auf 90% des Layers volle Deckkraft, nur unten soll es ausfaden und mit dem Hintergrund verschmelzen.
    Hab schon gegoogelt und bei selfhtml geschaut, aber leider noch nix gefunden.

    Hat jemand bitte eine Idee?

    Lg, Rick
     
    Zuletzt bearbeitet: 17.11.2010
  2. teqqy

    teqqy MacUser Mitglied

    Beiträge:
    984
    Zustimmungen:
    27
    Registriert seit:
    13.06.2006
    Guck doch in den Quelltext der Internetseite?!

    Ich hab sowas auch schon mal gesehen, denke aber, dass es entweder mit Java gemacht worden ist, oder ein einfaches Hintergrundbild mittles Photoshop (oder ähnlichem) erstellt und eingebunden wurde.
     
  3. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    Registriert seit:
    15.05.2004
    Den Alphaeffekt mit JavaScript hab ich bisher immer nur auf das
    gesamte Bild angewendet gesehen.
    Mit CSS wäre mir ein solcher Ausblend-Effekt neu…
    Photoshop lässt grüßen.

    lea
     
  4. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Transparentes PNG über den auszufadenden Bereich legen. Dass Ganze muss aber im IE6 nachbearbeitet werden, da der mit 24 Bit PNGs und Alphakanal Probleme hat. Oder gleich in Photoshop das Hintergrundbild (für ein DIV z. B.) so bearbeiten, dass es passend aussieht.

    2nd
     
  5. TheHazel3yes

    TheHazel3yes Thread Starter MacUser Mitglied

    Beiträge:
    367
    Zustimmungen:
    4
    Registriert seit:
    25.11.2005
    hey, danke für die antworten!

    also... leider weiß ich derzeit keine website, wo das so gemacht wurde - ich kann mich halt nur erinnern, dass ich soetwas bereits mal gesehen hatte. womöglich war es auch eine flash-seite, was dann natürlich für mich schlecht wäre, da ich kein flash verwenden will.

    zu den anregungen: was mit dem transparenten png habe ich soweit verstanden, allerdings ist dieses dann sooo transparent, dass auch der text davon unbeinflusst stehen bleibt. ;-)
    dann kam die idee mit dem hintergrundbild. also hab ich den gewünschten bereich ausgeschnitten und in einen eigenen layer gelegt - css opacity angewandt aber leider ein sehr "hartes" ergebnis. man sieht natürlich jetzt (gerade wenn ein bild vom transparenten in den normalen bereich wandert) eine sehr harte kante, also wieder kein weicher verlauf.
    und es ist ja leider nicht möglich, mit photoshop einem bild einen transparenzverlauf zu geben, der dann in irgendeinem format abspeicherbar wäre - entweder transparent oder nicht, dazwischen gibts hier ja leider nicht. :(

    ich könnte ca. 100 opacity-layer mit verschiedenen stärken anlegen, dann hätte ich das problem gelöst. irgendwas in mir sagt mir aber, dass das nicht so unbedingt sauber ist. :D

    ich schau weiter...

    der grund für meinen aufwand ist übrigens, dass das schöne hintergrund am unteren ende sehr dunkel wird (gewollt) und deshalb text schwer lesbar wird - deshalb soll er eben sanft ausfaden und erst nach dem weiteren runterscrollen gut sichtbar werden. er soll aber auch nicht komplett unsichtbar sein, damit auch noch weiß, dass noch etwas kommt. *hm*

    lg, rick
     
    Zuletzt bearbeitet: 17.11.2010
  6. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    Registriert seit:
    15.05.2004
    Zeig mal ein Beispiel, ich kann mir zwar vorstellen, was du ungefähr
    vor hast, aber ich denke, da kann man eine geschicktere Lösung finden
    als 100 Layer ;)


    lea
     
  7. hoppelmoppel

    hoppelmoppel MacUser Mitglied

    Beiträge:
    518
    Zustimmungen:
    2
    Registriert seit:
    12.04.2006
    Hmm, kannst da nicht einen 1px Breiten Balken machen, der dann als Hintergrund über den ganzen Div gelegt wird?
     
  8. TheHazel3yes

    TheHazel3yes Thread Starter MacUser Mitglied

    Beiträge:
    367
    Zustimmungen:
    4
    Registriert seit:
    25.11.2005
    juhu, DIE lösung!

    ich hab noch etwas weiter gegoogelt und über PNG rausgefunden, dass dieses format nun doch erheblich besser ist als gedacht - es kann nämlich transparente verläufe! *supi*
    nun hab ich noch sehen müssen, wie ich das im photoshop machen kann, aber das war dann auch kein problem.

    und nun? nun ist es perfekt! der layer mit dem png-file (welches ein ausschnitt aus dem hintergrundbild mit verlauf ins transparente ist) liegt über den anderen und macht einen sauberen übergang.
    kehrseite: das png-file hat stolze 83kb bei 820x30px - aber ich glaub, da muss ich durch. keine ahnung, ob es mit css oder dergleichen überhaupt machbar wäre...

    danke an alle, die mir hier helfend zur seite gestanden sind!

    soll ich noch einen screenshot reinstellen - interessiert sich jemand dafür?

    lg, rick
     
    Zuletzt bearbeitet: 17.11.2010
  9. hoppelmoppel

    hoppelmoppel MacUser Mitglied

    Beiträge:
    518
    Zustimmungen:
    2
    Registriert seit:
    12.04.2006
    Ja mach mal .. wenn es ein einfacher verlauf ist, dann reicht 1px Breite und den über die ganze Breite drüber mappen ..
     
  10. kazu

    kazu MacUser Mitglied

    Beiträge:
    1.364
    Zustimmungen:
    47
    Registriert seit:
    09.11.2005
    Das mit der Fähigkeit zum Verlauf ins Tranzparente hätten wir Dir auch gleich sagen können bzw. wurde ja angemerkt! ;)
    Beachte aber trotzdem:

     
Die Seite wird geladen...
Ähnliche Themen - Layer unteren Rand Forum Datum
Wie verschiebe ich in einem Div-Layer den Inhalt, ohne dabei den HG anzusprechen? Web Page Design 15.08.2011
Problem mit CSS (div-layer verschieben sich) Web Page Design 29.07.2006
DIV Layer 100px von Top bis 10px vor Bottom - IE machts nicht Web Page Design 03.04.2006
DIV-Layer bis an den unteren Rand Web Page Design 10.07.2005
Scrollen im div-Layer Web Page Design 01.05.2005

Diese Seite empfehlen

Benutzerdefinierte Suche