Ich mag diesen dezenten Effekt auf dem fortuito.us Blog sehr. Der Text am unteren Rand der Seite blendet aus. Selbst wenn man den Seiteninhalt nach oben und unten scrollt, wirkt es so, als würde er am unteren Rand der Seite ausblenden.
Dies kann mit einem transparenten Bild erreicht werden, das sich an einer festen Position auf der Seite befindet, wie hier:
#bottom_fade {
z-index: 99;
position: fixed;
bottom: 0%;
background-image: url("bottom-fade.png");
}Der hohe z-index sorgt dafür, dass es sich in der obersten Ebene befindet.
Sieht wirklich gut aus! Für das letzte -Tag habe ich eine Klasse hinzugefügt (nennen Sie sie, wie Sie wollen, ich habe sie "last" genannt) mit margin-bottom: 150px (für eine untere Ausblendhöhe von 200px). Mit diesem Abstand wird der letzte Absatz vollständig lesbar angezeigt. Könnte Benutzern helfen zu lesen ;-)
@Jayzon: Tolle Idee. Das ist ein großartiger Weg. Entweder das oder den großen Rand als Padding für den Seiten-Wrapper hinzufügen.
in Safari tot
Entschuldigung – funktioniert in Safari 3!
Ich hatte vor ein paar Tagen ein Problem, als ich diesen schönen Effekt auf meiner Homepage erzielen wollte. Da die PNG-Datei über allem anderen liegt, sind Links im PNG-Bereich nicht zugänglich. Ich glaube nicht, dass das viel für die Benutzerfreundlichkeit usw. hilft ;-)
Wie auch immer, für reine Textseiten ist es ein schöner Effekt!
@Jayzon: Ja, da es im Grunde ein Bild ist, das direkt über dem Text liegt, können Sie nicht "durchklicken" und diese Links erreichen. Vielleicht wäre ein Kompromiss, den Ausblendbereich zu verkürzen, sodass er wirklich nur eine Zeile oder so abdeckt.
pointer-events: noneauf dem Bild sollte das Problem behebenSchöne Lösung
Wirklich schön! Funktioniert im Internet Explorer!!!
habe eine Breite von 100% hinzugefügt und den Hintergrund mit repeat-x wiederholen lassen, damit er auf breiteren Seiten nicht zu kurz wird.
Frage: In IE6 bleibt es nur am unteren Rand der Seite, nicht am unteren Rand des aktuellen Punkts. Gibt es eine Möglichkeit, das zu beheben?
@Lisa – Die gesamte Idee ist für IE6 überhaupt nicht freundlich. Sie benötigen einen absoluten Positionierungs-Hack oder eine Art JavaScript, um es an Ort und Stelle zu halten, sowie einen PNG-Hack, um die Alpha-Transparenz zu erhalten. Ich würde vorschlagen, einfach eine alternative Stylesheet für IE 6 und darunter zu verwenden und dies überhaupt nicht zu nutzen.
Ich brauche das auch für IE 6, bitte sagen Sie mir, wie