The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

CSS Trick: Fade Out Bottom (for WP widget)…

  • # March 11, 2010 at 2:04 pm


    I`m trying to add the CSS trick called `Fade Out Bottom` ( ) to a WordPress/ComicPress widget called `Scheduled Posts` (not to the whole page on my blog). This way, my future posts `fade` towards the bottom. However, I`m unable to get this to work. You can see the widget (titled `Sneak Peek) at the top of my right-sidebar at ( ).

    According to `This can be achieved with a transparent image that is in a fixed position on the page, like so`:

    [size=150]#bottom_fade {
    z-index: 99;
    position: fixed;
    bottom: 0%;
    background-image: url(“bottom-fade.png”);

    …`The high z-index helps insure it is the top-most layer.`

    I`ve uploaded the PNG image to: url (`/images/bottom-fade.png`), but have no idea how/where to add the CSS code to the widget itself. Does anyone know how to do this?

    Any help would be greatly appreciated!


Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed