Fade effect on top and bottom of page while scrolling

Discussion in 'HTML' started by jakeatkins via WebmasterKB.com, Jul 23, 2007.

  1. I'm looking for some kind of effect where the text/images shown in a frame
    will gradually fade to black within 25 pixels of the top and bottom border of
    the frame while scrolling. Can this be inserted this into a style.css file?
    Thanks!

    --
    Message posted via http://www.webmasterkb.com
    jakeatkins via WebmasterKB.com, Jul 23, 2007
    #1
    1. Advertising

  2. jakeatkins via WebmasterKB.com

    Ben C Guest

    On 2007-07-23, jakeatkins via WebmasterKB.com <u35973@uwe> wrote:
    > I'm looking for some kind of effect where the text/images shown in a frame
    > will gradually fade to black within 25 pixels of the top and bottom border of
    > the frame while scrolling. Can this be inserted this into a style.css file?
    > Thanks!


    You could make a graduated black image that goes from fully transparent
    at the bottom to fully opaque at the top and superimpose it over the top
    of the frame with absolute positioning.
    Ben C, Jul 23, 2007
    #2
    1. Advertising

  3. Genius idea! But how do I get the text to go behind the graduated image?
    This is on a wordpress blog, and I don't see any html file, just all .phps
    with a style.css. where would I even put in the code to do this correctly?

    Ben C wrote:
    >> I'm looking for some kind of effect where the text/images shown in a frame
    >> will gradually fade to black within 25 pixels of the top and bottom border of
    >> the frame while scrolling. Can this be inserted this into a style.css file?
    >> Thanks!

    >
    >You could make a graduated black image that goes from fully transparent
    >at the bottom to fully opaque at the top and superimpose it over the top
    >of the frame with absolute positioning.


    --
    Message posted via WebmasterKB.com
    http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1
    jakeatkins via WebmasterKB.com, Jul 23, 2007
    #3
  4. I think I know what your saying to do, to put an absolute image position on
    the .html that opens the frames. But I would also want the same effect on
    the bottom of the frame, how would I determine an absolute location when
    taking into account all the different browsers and screen/window sizes?

    jakeatkins wrote:
    >Genius idea! But how do I get the text to go behind the graduated image?
    >This is on a wordpress blog, and I don't see any html file, just all .phps
    >with a style.css. where would I even put in the code to do this correctly?
    >
    >>> I'm looking for some kind of effect where the text/images shown in a frame
    >>> will gradually fade to black within 25 pixels of the top and bottom border of

    >[quoted text clipped - 4 lines]
    >>at the bottom to fully opaque at the top and superimpose it over the top
    >>of the frame with absolute positioning.


    --
    Message posted via http://www.webmasterkb.com
    jakeatkins via WebmasterKB.com, Jul 23, 2007
    #4
  5. Ben C <> writes:

    > On 2007-07-23, jakeatkins via WebmasterKB.com <u35973@uwe> wrote:
    >> I'm looking for some kind of effect where the text/images shown in a frame
    >> will gradually fade to black within 25 pixels of the top and bottom border of
    >> the frame while scrolling. Can this be inserted this into a style.css file?
    >> Thanks!

    >
    > You could make a graduated black image that goes from fully transparent
    > at the bottom to fully opaque at the top and superimpose it over the top
    > of the frame with absolute positioning.


    That was my first thought as well. But, a gradient alpha channel means PNG;
    GIF has only one-bit alpha and JPEG none at all. Doesn't IE have "issues"
    with its support for PNG?

    sherm--

    --
    Web Hosting by West Virginians, for West Virginians: http://wv-www.net
    Cocoa programming in Perl: http://camelbones.sourceforge.net
    Sherm Pendley, Jul 23, 2007
    #5
  6. jakeatkins via WebmasterKB.com

    Ben C Guest

    On 2007-07-23, jakeatkins via WebmasterKB.com <u35973@uwe> wrote:
    > Ben C wrote:
    >>> I'm looking for some kind of effect where the text/images shown in a frame
    >>> will gradually fade to black within 25 pixels of the top and bottom border of
    >>> the frame while scrolling. Can this be inserted this into a style.css file?
    >>> Thanks!

    >>
    >>You could make a graduated black image that goes from fully transparent
    >>at the bottom to fully opaque at the top and superimpose it over the top
    >>of the frame with absolute positioning.


    > Genius idea! But how do I get the text to go behind the graduated image?


    Absolutely positioned things go on top of other things generally anyway.

    > This is on a wordpress blog, and I don't see any html file, just all .phps
    > with a style.css. where would I even put in the code to do this correctly?


    Don't know. You mean you can only add styles and not HTML?
    Ben C, Jul 23, 2007
    #6
  7. I've put this in the top of the specific frame's index.php:

    <img src="smred.gif" STYLE="position:absolute; left: 100px;">

    It shows up in the frame over top of text, but doesn't move with the
    scrolling, just stays where it was dropped...? Does the absolute image code
    need to go in the .html file with the framesets? Where would I put it since
    there is no body tags in the frameset.html?


    Ben C wrote:
    >>>> I'm looking for some kind of effect where the text/images shown in a frame
    >>>> will gradually fade to black within 25 pixels of the top and bottom border of

    >[quoted text clipped - 4 lines]
    >>>at the bottom to fully opaque at the top and superimpose it over the top
    >>>of the frame with absolute positioning.

    >
    >> Genius idea! But how do I get the text to go behind the graduated image?

    >
    >Absolutely positioned things go on top of other things generally anyway.
    >
    >> This is on a wordpress blog, and I don't see any html file, just all .phps
    >> with a style.css. where would I even put in the code to do this correctly?

    >
    >Don't know. You mean you can only add styles and not HTML?


    --
    Message posted via WebmasterKB.com
    http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1
    jakeatkins via WebmasterKB.com, Jul 23, 2007
    #7
  8. jakeatkins via WebmasterKB.com

    Bergamot Guest

    Sherm Pendley wrote:
    >
    > a gradient alpha channel means PNG;
    > Doesn't IE have "issues" with its support for PNG?


    I believe IE7 does (mostly?) support png alpha transparency, but IE6 has
    its own weird way of handling it with a proprietary CSS "filter"
    property. It does require ActiveX enabled to work, though. If disabled,
    I believe you get no background image at all, which could be a
    readability problem.

    --
    Berg
    Bergamot, Jul 24, 2007
    #8
  9. jakeatkins via WebmasterKB.com wrote:
    > I've put this in the top of the specific frame's index.php:
    >
    > <img src="smred.gif" STYLE="position:absolute; left: 100px;">
    >
    > It shows up in the frame over top of text, but doesn't move with the
    > scrolling, just stays where it was dropped...? Does the absolute image code
    > need to go in the .html file with the framesets? Where would I put it since
    > there is no body tags in the frameset.html?
    >
    >



    please stop top posting!


    --
    www.daszeichen.ch
    remove nixspam to reply
    Bernhard Sturm, Jul 24, 2007
    #9
  10. On 23 Jul 2007 Bernhard Sturm wrote in alt.html

    Why?

    > jakeatkins via WebmasterKB.com wrote:
    >> I've put this in the top of the specific frame's index.php:
    >>
    >> <img src="smred.gif" STYLE="position:absolute; left: 100px;">
    >>
    >> It shows up in the frame over top of text, but doesn't move with the
    >> scrolling, just stays where it was dropped...? Does the absolute image
    >> code need to go in the .html file with the framesets? Where would I
    >> put it since there is no body tags in the frameset.html?
    >>
    >>

    >
    >
    > please stop top posting!
    >
    >



    --
    D?
    Yorkshire Pete
    http://yorkshirepete.com/
    Yorkshire Pete, Jul 24, 2007
    #10
  11. Yorkshire Pete wrote:
    > On 23 Jul 2007 Bernhard Sturm wrote in alt.html
    >
    > Why?
    >
    >> jakeatkins via WebmasterKB.com wrote:
    >>> I've put this in the top of the specific frame's index.php:
    >>>
    >>> <img src="smred.gif" STYLE="position:absolute; left: 100px;">
    >>>
    >>> It shows up in the frame over top of text, but doesn't move with the
    >>> scrolling, just stays where it was dropped...? Does the absolute image
    >>> code need to go in the .html file with the framesets? Where would I
    >>> put it since there is no body tags in the frameset.html?
    >>>
    >>>

    >>
    >> please stop top posting!
    >>
    >>

    >


    Because now no one can easily decipher who was replying to whom.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jul 24, 2007
    #11
  12. Yorkshire Pete <> writes:

    > On 23 Jul 2007 Bernhard Sturm wrote in alt.html
    >
    >> please stop top posting!

    >
    > Why?


    Because it's rude, and you've been asked nicely to do so.

    sherm--

    --
    Web Hosting by West Virginians, for West Virginians: http://wv-www.net
    Cocoa programming in Perl: http://camelbones.sourceforge.net
    Sherm Pendley, Jul 24, 2007
    #12
  13. jakeatkins via WebmasterKB.com

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Tue, 24 Jul 2007 01:09:04 GMT
    Yorkshire Pete scribed:

    > On 23 Jul 2007 Bernhard Sturm wrote in alt.html
    >
    > Why?
    >
    >> jakeatkins via WebmasterKB.com wrote:
    >>> I've put this in the top of the specific frame's index.php:
    >>>
    >>> <img src="smred.gif" STYLE="position:absolute; left: 100px;">
    >>>
    >>> It shows up in the frame over top of text, but doesn't move with the
    >>> scrolling, just stays where it was dropped...? Does the absolute image
    >>> code need to go in the .html file with the framesets? Where would I
    >>> put it since there is no body tags in the frameset.html?
    >>>
    >>>

    >>
    >>
    >> please stop top posting!


    Youse is sooooooo bad! Now I see why The Lone Ranger replaced you with
    Tonto.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Jul 24, 2007
    #13
  14. On Jul 23, 8:18 pm, Bernhard Sturm <> wrote:
    > jakeatkins via WebmasterKB.com wrote:
    > please stop top posting!


    Maybe you could explain to him what top posting is...
    Travis Newbury, Jul 24, 2007
    #14
  15. On Jul 23, 9:18 pm, Sherm Pendley <> wrote:
    > >> please stop top posting!

    > > Why?

    > Because it's rude, and you've been asked nicely to do so.


    Well I don't think "rude" is correct, you want to do it because it is
    the standard for this particular group. Other groups prefer other
    formats.

    As far as being asked nicely, well, I thought that the request was
    actually a little rude. It would have been so much nicer if the
    request came with an explanation of what the problem was rather than
    just blerting out "please stop top posting!" The exclamation point at
    the end turned a request into a demand.

    I believe we all need a group hug in this thread. Come-on... even you
    Neredbojias...
    Travis Newbury, Jul 24, 2007
    #15
  16. Travis Newbury wrote:

    >
    > Well I don't think "rude" is correct, you want to do it because it is
    > the standard for this particular group. Other groups prefer other
    > formats.


    So there are groups that prefer top-posting? I wonder if this really
    exists. I admit: I got a bit pissed by reading the thread because I
    wasn't able to follow it properly as the top-posting made it impossible
    to determine who wrote what in response to whoms text.

    > It would have been so much nicer if the
    > request came with an explanation of what the problem was rather than
    > just blerting out "please stop top posting!" The exclamation point at
    > the end turned a request into a demand.


    Indeed. It was a demand. It's a bit like 'Do not cross!' when you come
    to a red traffic light.

    >
    > I believe we all need a group hug in this thread. Come-on... even you
    > Neredbojias...
    >


    I love you, and I love the group, and we all love each other, but don't
    top post! And always submit a URL! And don't expect this to be a
    help-desk! :)

    cheers
    bernhard


    --
    www.daszeichen.ch
    remove nixspam to reply
    Bernhard Sturm, Jul 24, 2007
    #16
  17. This is an example of top-posting (see below).

    Travis Newbury wrote:
    > On Jul 23, 8:18 pm, Bernhard Sturm <> wrote:
    >> jakeatkins via WebmasterKB.com wrote:
    >> please stop top posting!

    >
    > Maybe you could explain to him what top posting is...
    >


    Top posting is, when you enter your text above all others text within a
    message (see above).

    HTH
    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply
    Bernhard Sturm, Jul 24, 2007
    #17
  18. jakeatkins via WebmasterKB.com

    Ben C Guest

    On 2007-07-23, jakeatkins via WebmasterKB.com <u35973@uwe> wrote:
    > I've put this in the top of the specific frame's index.php:
    >
    ><img src="smred.gif" STYLE="position:absolute; left: 100px;">
    >
    > It shows up in the frame over top of text, but doesn't move with the
    > scrolling, just stays where it was dropped...?


    Yes, I thought that was what you wanted-- so that as things scrolled out
    of view at the top and bottom they sort of faded away.

    > Does the absolute image code need to go in the .html file with the
    > framesets?
    > Where would I put it since there is no body tags in the frameset.html?


    Well the <bodies> are in each document that's loaded into the frames.
    But I don't really understand any more what the effect is that you want.
    Ben C, Jul 24, 2007
    #18
  19. On 23 Jul 2007 Sherm Pendley wrote in alt.html

    > Yorkshire Pete <> writes:
    >
    >> On 23 Jul 2007 Bernhard Sturm wrote in alt.html
    >>
    >>> please stop top posting!

    >>
    >> Why?

    >
    > Because it's rude, and you've been asked nicely to do so.
    >
    > sherm--
    >


    It's rude not to get your facts straight. Nobody asked me not top post.

    --
    D?
    Yorkshire Pete
    http://yorkshirepete.com/
    Yorkshire Pete, Jul 24, 2007
    #19
  20. jakeatkins via WebmasterKB.com

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Tue, 24 Jul 2007 10:19:59 GMT
    Travis Newbury scribed:

    > As far as being asked nicely, well, I thought that the request was
    > actually a little rude. It would have been so much nicer if the
    > request came with an explanation of what the problem was rather than
    > just blerting out "please stop top posting!" The exclamation point at
    > the end turned a request into a demand.
    >
    > I believe we all need a group hug in this thread. Come-on... even you
    > Neredbojias...


    Whaddya think I am, a homo? How rude!

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Jul 24, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Cuthbert
    Replies:
    8
    Views:
    418
    Ancient_Hacker
    Sep 13, 2006
  2. ju dith

    Effect.Fade and Back Button

    ju dith, Apr 21, 2008, in forum: Ruby
    Replies:
    2
    Views:
    115
    Tim Hunter
    Apr 21, 2008
  3. hon123456
    Replies:
    1
    Views:
    419
    Thomas 'PointedEars' Lahn
    Apr 12, 2006
  4. Jake Barnes
    Replies:
    6
    Views:
    189
    Evertjan.
    Sep 3, 2006
  5. Piotr Kaleta
    Replies:
    4
    Views:
    212
    Henry
    Apr 21, 2008
Loading...

Share This Page