Grow your CSS skills. Land your dream job.

#68: Think Geek Background Fade Technique

This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and the pattern turns into zombies. We recreate this from scratch with their graphics, and then flop them out for our own.

Links from Video:

Comments

  1. Matt
    Permalink to comment#

    Sehr gut! Danke! :D

  2. Sherri
    Permalink to comment#

    Hello Chris, Thanks for this, Can you please do another video on wordpress theme once again? advance theme??

  3. Permalink to comment#

    Chris this was sweet! Could you explain how they made the the Zombie/Robot image seamless on the repeat?

  4. Permalink to comment#

    I’d thought you smashed your camera ;)

    Kind regards
    Rata

  5. Fede
    Permalink to comment#

    Thanks ! Really Cool!

  6. Josh E
    Permalink to comment#

    This was really cool Chris! I wondered where you got the negative value for the robots image offset off the bottom. Was that the height of the image? I just don’t understand why that works on monitors of different resolutions.

  7. Totally totally cool. Thanks for laying it out. And for the download files!

  8. Semantic or not, I don’t care, it was quite clever of them to do that! Good explanation, I’ll have to play with it some time.

    Thanks!

  9. Jack Franklin
    Permalink to comment#

    Great stuff Chris.

    I noticed you have the HTML Ipsum icon in your menu bar, where can I get that program from, I’ve been searching for ages and I can’t find it :(

    Thanks,

    Jack

  10. Permalink to comment#

    Youre such a cool dude, thanks a lot fella!

  11. This was a cool technique. I was on the site the other day and didn’t even notice it until you Twittered it out. Very cool!

    I also like how you make the Email / name / website bars fade when you leave a comment.

  12. Permalink to comment#

    This is a great explanation and the technique is really facinating. Thanks for the video!

  13. mary
    Permalink to comment#

    fun! thank you!

  14. Permalink to comment#

    Thanks Chris.. this is very cool.. its a “why didn’t I think of that” idea. Also I loved the “no one cares about IE6 anymore” comment, lol.

  15. Permalink to comment#

    Awesome effect. Thanks for explaining that to us Chris!

  16. Oh I missed out on this post.. good thing am following you on twitter lol… Awesome trick! I love the way you have innovated using backgrounds… am gonna try it on my own first and if I fail :( then am gonna watch your screen cast… ooo this is gonna be fun :D thanks… wish me luck ;)

  17. Awesome. I hadn’t seen the Think Geek site until I read this post, but it’s a very cool effect. ;D

    (By the way, I love your comment form.)

  18. Permalink to comment#

    Would it not work the same using the page-wrap div styling on the html element thus eliminating the need for the page-wrap div? Just curious if that would work. . .

    • Yeah that would probably work. I usually stay way from styling the HTML element, but it’s kind of irrational, I think it’s fine in general.

    • Are there any reasons for that? I don’t think there are any compatability issues with styling the html element. IMHO, it makes perfect sense to put the background on the html and then have the body be a content container.

      You should try it. {wink wink}

  19. Eire32
    Permalink to comment#

    That is a super cool CSS trick. I really need to find a way to put that kinda idea in my next design! THANKS CHRIS!

  20. Permalink to comment#

    That’s really cool. Thanks for the explanation! Your screencasts are always really helpful. =)

  21. Josh
    Permalink to comment#

    Really cool man, thanks for taking the time!

  22. John
    Permalink to comment#

    Hey Chris,

    Awesome screencast and great trick! I also get a kick out of what you said at about 16:52. Sorry, very childish but hey… thats why I keep coming back!

    Kudos!
    -John

  23. Daniel
    Permalink to comment#

    Maybe they drew inspiration from your downloads area: http://css-tricks.com/examples/SecretMessage/

  24. Sweet!
    I would do this using z-index with absolute positioning. Would this work?

    Thank you!

  25. Permalink to comment#

    Very neat trick!

  26. Permalink to comment#

    This idea is wicked cool, thanks for sharing the idea & how to do it!

    I think I might use jQuery to hide some of the extra markup (which you showed how to in an older screen cast), and add this sweet fluff with some other stuff to my design enhancements of my new portfolio which is in the works.

  27. Permalink to comment#

    # 68.. next is…6*

  28. Natalie
    Permalink to comment#

    This is a great screencast. Cool little trick, explained really well.

    Love your stuff Chris, and even though I see you scrapped the PSD to WP theme, I hope you get back to it. You explain stuff very clearly.

  29. Awesome stuff, Chris.

    That’s really clever. I think I’ll see how it works with color images.

    And dude “Open Image in New Tab” right under “Copy Image Location” is your friend. :)

  30. Jermaine
    Permalink to comment#

    That was pretty sweet, I will give it a try

  31. In my comment above I mentioned to use the images without divs whit absolute positioning and z-index. I think this would me more simple and semantic (or not).

  32. Juan
    Permalink to comment#

    Thanks Chris!, nice video explanation and thechnique.

  33. Permalink to comment#

    I just voted for you in both categories on the 2009 .net Magazine Awards. Thanks for all of the great tips and tricks!!!

  34. You can apply the first background to the html element, the second the the body element and avoid 1 of those wrappers.

    • Ooops! Someone said it already… sorry.

      I scanned through to make sure someone hadn’t… but didn’t scan through well enough.

  35. mike
    Permalink to comment#

    i like the new comments form…… idk how new it is but any ways i noticed on twitter u said u made another wordpress screen cast and wasnt sure u where gonna post it. I would like to see another wp screen cast maybe a little more advanced

  36. Awesome tutorial, and fairly simple. My developer friends and I had noticed the update to ThinkGeek’s background last week too and were dissecting the design to figure it out, when I got a tweet about your post. Thanks for taking the time to put this together!

  37. Permalink to comment#

    Thanks for posting this…very cool effect! I’m just getting started in web design and stuff like this really helps a lot!

    Rock On.

  38. William
    Permalink to comment#

    wow…great tut!! Easily explained and humorous =D

  39. Joseph
    Permalink to comment#

    Exporting transparent PNGs from Photoshop gives me problems trying to get the same colour as my actual body bg (in order to hide the elements until scrolled to the bottom) – any ideas? Transparent gifs export fine, but PNG 24 is not the same colour.

    • Permalink to comment#

      Hey mate -

      I had a bit of trouble at first, and then I decided to go real simple. I used standard web colors (#000 fade to #666) and then it was much easier to get it to match up on the export. Don’t really know if that’s exactly the problem you were having, but it’s how I fixed mine…

  40. Permalink to comment#

    Hey Chris -

    Mad props for this one. I hadn’t ever seen that effect before until you pointed it out, and it really is phenomenally simple! I’m in the process of putting on my design site, a simple night to day bit with suns and crescent moons and it’s getting to look quite nice.

    Thanks again mate!

  41. Thanks for the great info! Much appreciated. Question, however. What if you want the image fade/change to happen quicker? i.e., Instead of the user scrolling all the way down the page, having the complete switch occur only a third of the way scrolled down the page. My main WordPress site page is very long and I do not expect users scroll down to the bottom much. Individual post pages have a different problem in that they are shorter and users don’t need to scroll all the way to the bottom so once again the complete image fade/change probably won’t be seen.

    Once again, thanks for the tutorial!

  42. Christopher
    Permalink to comment#

    The negative value in the background position is actually horizontal offset (not vertical, which is bottom); probably used to better locate the ‘BRAAAAINS’.

    Love the site Chris, especially the new snippets

  43. Permalink to comment#

    Thanks loved your screencast, this is where my imagination took me this morning

  44. Permalink to comment#

    Couldn’t you do this using pseudo elements on the body?

    • Permalink to comment#

      Probably. It’s been a while since I’ve looked at this tutorial but in general, the <body> element is a perfectly valid element to use the :before and :after pseudo elements on which could be the extra ‘canvases’ you need to get this effect done.

  45. Permalink to comment#

    Hello!
    Once I saw somewhere awesome background technique and couldn’t find it now :(
    There was black background with line which moved across the page while scrolling.

    Can anyone help me to find it?

  46. Problem Causer
    Permalink to comment#

    I really like your content, Chris. This is a very helpful site and community you’ve created here. But one suggestion: take some GasX or something before you start making videos. Every single one is filled with you burping under your breath and it’s kind of gross. I feel like I can smell a meatball sub emanating from my speakers.

Leave a Comment

Current ye@r *

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