Grow your CSS skills. Land your dream job.

“Fade to black” effect

  • GMB
    # March 21, 2012 at 5:40 pm

    I’ve hit a bit of a snag in creating a “fade to black” effect. What I’ve come up with works in JSFiddle, which you can see here:

    http://jsfiddle.net/2ee2r/

    But not on the following test page viewed in Safari and Chrome (haven’t tested it in other browsers):


    < !DOCTYPE html>






    Any idea what I’ve done wrong?

    Thanks in advance for any help.

    # March 21, 2012 at 5:54 pm

    Try this css

    div {
    background-color: #000;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    }

    Also if you’re going to leave the div empty i’d suggest using  

    GMB
    # March 21, 2012 at 6:12 pm

    Thanks for the suggestion, karlpcrowley, but I get the same results: no problem in JSFiddle; no go in browser.

    Also, I suppose you meant that I should use:

     


    in the otherwise empty div?

    # March 21, 2012 at 6:16 pm

    Can you link to the page you’re working on?

    and you could leave out the paragraph

     
    GMB
    # March 21, 2012 at 6:23 pm

    I wasn’t working with a live page, just one on my desktop. I did put the page up at:

    http://mindmadebooks.com/new_test.html

    and got the same results.

    Thanks for your help.

    # March 21, 2012 at 6:24 pm

    I think there may be something wrong with the semi-colon at the end of your script, or an invisible weirdo character that comes after it (perhaps if you copy/pasted it from somewhere). Your code didn’t work for me either, but when I delete that whole line and then type it again manually, it works fine.

    });
    # March 21, 2012 at 6:27 pm

    now that you mention it, anytime I copy and paste from jsfiddle it doesn’t work
    If you check your page which chrome it’s stating there’s an illegal character

    GMB
    # March 21, 2012 at 6:28 pm

    Thanks, Senff — there was indeed a space after the final semi-colon. I removed and that did the trick.

    And thanks, karlpcrowley — I should have verified the code.

    I appreciate the speedy replies!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".