Layer am unteren Rand ausfaden lassen...

[TheHazel3yes]

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

 

[teqqy]

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.

 

[miss.moxy]

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

 

[2nd]

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

 

[TheHazel3yes]

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.

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

 

[miss.moxy]

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

 

[hoppelmoppel]

Hmm, kannst da nicht einen 1px Breiten Balken machen, der dann als Hintergrund über den ganzen Div gelegt wird?

 

[TheHazel3yes]

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

 

[hoppelmoppel]

Ja mach mal .. wenn es ein einfacher verlauf ist, dann reicht 1px Breite und den über die ganze Breite drüber mappen ..

 

[kazu]

Das mit der Fähigkeit zum Verlauf ins Tranzparente hätten wir Dir auch gleich sagen können bzw. wurde ja angemerkt!

Transparentes PNG über den auszufadenden Bereich legen.

Beachte aber trotzdem:

Dass Ganze muss aber im IE6 nachbearbeitet werden, da der mit 24 Bit PNGs und Alphakanal Probleme hat.

 

[miss.moxy]

PNG fix gibts nen Haufen, ich verwend zB den hier – geht allerdings nur,
wenn die Bilder direkt im HTML drin stehn und nicht nicht über CSS
definiert werden…

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i];
         var imgName = img.src.toUpperCase();

         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);

Her mit dem Screenshot

 

[TheHazel3yes]

Es ist kein einfacher Verlauf, aber testweise hab ich es mal mit einem 1px-breiten Hintergrund versucht. Es fällt tatsächlich kaum auf (nur wenn man genau schaut), aber die Datei wurde trotzdem von vorher 83kb auf nun 52kb verkleinert - s-t-r-a-n-g-e... *hm*

Die Idee von 2ndreality hatte ich anfangs falsch verstanden - ich dachte an ein komplett transparentes Bild, was natürlich in meinem Fall gar nix bringen würde.

Mit den wunderbaren IE-Bugs habe ich nun aber auch schon zu kämpfen. Was unter Safari und Opera (nur OS X-Version getestet) noch wunderbar aussieht, ist mit IE ein Horror... Siehe Screenshots!
Nun mal sehen, was ich genau brauche und anwenden werde - aber der LIEBEN LIEBEN Lea danke ich schon mal für den Link.

So, nun die Screenshots. An den Textformatierungen etc. muss ich erst arbeiten - bisher ist das nur 1:1 von der alten Seite übernommen, ist ja noch eine Baustelle. (ich könnt jetzt ganz pervers das uralte Baustellen-Gif reinbauen, welch Spaß wär das...)

 

[kazu]

Ich hab das jetzt auch mal ausprobiert:
test

Lea, ich hab Dein .js einfach mal mit eingebaut in der Hoffnung, dass es auf dem IE was bringt (habe keinen IE ). Jetzt müsste nur noch der Verlauf beim Scrollen stehenbleiben, ich komme nicht drauf, wie!

 

[theoldgimlet]

Das sieht wirklich gut aus.

Hast du schon mal probiert den Inhalt nicht bis zum Fensterende gehen zulassen? Dann könnte man das nämlich so "trimmen", dass es so aussieht, als ob der Inhalt auf der Wand deines Hintergrundbildes "steht".

 

[TheHazel3yes]

Danke schön! ;-)

Also deine Idee finde ich nicht schlecht! Ich denke halt, dass mir dann noch weniger Platz für Text bleibt und die Website eigentlich unter dem Design etwas leiden würde - was sie jetzt zweifellos schon gewaltig tut. *gg*

Die Bugs habe ich übrigens schon erfolgreich bekämpft - und zwar mit dieser Seite:

Jetzt muss ich noch einige andere IE-Bugs ausbessern: Wie etwa das Menü an der rechten Seite - das sollte eigentlich stehen bleiben. Tut es mit IE aber natürlich nicht. Dabei hätte ich da gestern eigentlich schon eine Seite dazu verwendet, wo von einem IE-Bugfix diesbezüglich gesprochen wurde...

Naja, diesmal bin ich über Parallels froh, das macht das Testen wirklich einfach. *g*

Lg, Rick

 

[TheHazel3yes]

Lea, ich hab Dein .js einfach mal mit eingebaut in der Hoffnung, dass es auf dem IE was bringt (habe keinen IE ). Jetzt müsste nur noch der Verlauf beim Scrollen stehenbleiben, ich komme nicht drauf, wie!

Meine Seite ist zwar anders aufgebaut, aber bei mir klappt das, weil die "Hauptseite" in einem Layer per iFrame liegt und das Transparenz-PNG liegt in einem anderen Layer. So wird nur die iFrame-Seite gescrollt.

 

[kazu]

Ich versuche ja immer Frames zu vermeiden... ob das wirklich sinnvoll ist, sei dahingestellt. Na ja, ich gucke mich mal weiter um nach einer Möglichkeit, den <div> festzunageln... verdammt, dass Du mich aber auch auf so eine Idee bringen musstest, da komme ich wieder vom Hundertsten ins Tausenste!

 

[TheHazel3yes]

Div festnageln?

Das wär eigentlich das, was ich gerade versuche - mit Safari klappt das aber bei mir.
Versuch mal folgendes:

In meiner CSS-Datei habe ich folgendes stehen:

.navi {
position:absolute;
left:650px;
top:0px;
width:140px;
height:440px;
z-index:2;
overflow: visible;
visibility: visible;
}
body>.navi {
position:fixed;
}

Und im Div-Tag der Webseite dann statt der normalen Div-Adressierung diese hier:

<div class="navi">

Das klappt bei mir. ;-)

BTW: iFrames sind - glaube ich - kein Übel. Fand Frames aber auch nie schlimm.

 

[kazu]

position:fixed;

Mensch, so einfach! Klasse, das klappt! Danke! Bleibt nur noch die Frage wie das im IE aussieht... dass die den aber auch nicht endlich mal vernünftig programmieren können

 

[TheHazel3yes]

habs grad im IE probiert - glaub mir, du willst das ergebnis nicht sehen...